专栏首页屈定‘s BlogAngular2学习记录-给后端程序员的经验分享

Angular2学习记录-给后端程序员的经验分享

1.前言

前几天刚下定决心把毕业设计改造下,因为毕业设计算是我学习的基石,学习到的东西都尽可能的在这个平台上施展,锻炼自己.改造为前后端分离,前端使用angular2,后端只提供接口.便于以后的维护.那么就要学习agular2了.

这里就要说下个人观点了,安利一波:我认为每个程序员都应该有自己的一个项目,一个可以让你学习的东西能施展到上面的项目,可能该项目一开始很简单,但是随着你不断的学习,不断的把新知识运用进去,这个项目就会伴随着你的成长而丰富起来,给你带来的则是更多的实战经验.

2.angular2简介

  1. angular2是类似全家桶组合的框架,所需要的东西几乎都包办了,所以开发起来很迅速.
  2. 使用TypeScript作为开发语言,对于Java和C#程序员可以快速上手,还有就是我比较喜欢强类型语言,每个变量各司其职,由其的类型来限定,开发人员也很明确知道变量的作用.
  3. google和Microsoft支持
  4. WebStorm对angular2的强大支持.
  5. 一篇安利文章http://www.infoq.com/cn/articles/why-choose-angular2/

一些学习资料 ECMAScript 6入门 http://es6.ruanyifeng.com/ TypeScript入门 http://www.imooc.com/learn/763 TypeScript中文网 https://www.tslang.cn/docs/tutorial.html 慕课网1小时快速上手视频 http://www.imooc.com/learn/789 官方文档 https://www.angular.cn/docs/ts/latest/cli-quickstart.html

3.遇到的问题

3.1滚动监听

要实现页面滚动后导航栏会变色的效果,如下图(图来自我的csdn博客,没找到其他好图床)

之前使用Jq是

$(window).scroll(function () {
    indexApp.scrollBar = parseInt(document.body.scrollTop||document.documentElement.scrollTop);
});

不打算依赖Jq,搜了点资料发现了下面两种写法.

//下面这种写法在TS下不会有效果.
  isAddBackColor(){
    if (this.getIsIndex()){
       var self = this;
       //该处使用匿名函数,而不是箭头函数.
      window.addEventListener('scroll',function () {
        let marginTop = document.body.scrollTop|| document.documentElement.scrollTop;
        self.isBackColor = marginTop > 20 && self.getIsIndex();
      });
    }
  }
/**
   * 判断是否需要加背景色(有效果的)
   * 使用isBackColor控制结果
   */
  isAddBackColor(){
    if (this.getIsIndex()){
      //监听事件使用箭头函数,这样ng2才会管理该变量
      window.addEventListener('scroll',() => {
        let marginTop = document.body.scrollTop|| document.documentElement.scrollTop;
        this.isBackColor = marginTop > 20 && this.getIsIndex();
      });
    }
  }

原因不明,猜想是var self = this;赋值操作后相当于一个全新的变量,self并不受angular管理,导致刷新的变量是self中的isBackColor.

3.2http参数传递

按照下面代码传参数应该是没有问题的,但是我遇到了url被编码问题,例如输入`1111@qq.com会被转换为1111%40qq.com,导致服务端解析失败,找了很多原因才发现是URLSearchParams这个对象用错了,angular2提供了这个对象,es6里面也有一个该对象,换成ng2中对象即可,import {URLSearchParams} from “@angular/http”; `

let urlParams = new URLSearchParams();
urlParams.set('search',search);
urlParams.set('order',order);
urlParams.set('pageNum',pageNum.toString());
urlParams.set('pageSize',pageSize.toString());
return this.http.get(Config.url_problem_stage + stage,{params:urlParams}).toPromise()
          .then(response => response.json())
          .catch(LogService.handleError)

3.3跨域问题

浏览器要求同源下才可请求,否则就产生跨域问题.

URL

说明

是否允许通信

http://www.a.com/a.jshttp://www.a.com/b.js

同一域名下

允许

http://www.a.com/lab/a.jshttp://www.a.com/script/b.js

同一域名下不同文件夹

允许

http://www.a.com:8000/a.jshttp://www.a.com/b.js

同一域名,不同端口

不允许

http://www.a.com/a.jshttps://www.a.com/b.js

同一域名,不同协议

不允许

http://www.a.com/a.jshttp://70.32.92.74/b.js

域名和域名对应ip

不允许

http://www.a.com/a.jshttp://script.a.com/b.js

主域相同,子域不同

不允许

http://www.a.com/a.jshttp://a.com/b.js

同一域名,不同二级域名(同上)

不允许(cookie这种情况下也不允许访问)

http://www.cnblogs.com/a.jshttp://www.a.com/b.js

不同域名

不允许

解决方案是用nginx反向代理到不同端口,模拟同一域名下不同文件夹情况.nginx监听本地888端口,这个也是项目入口,对于带api标识的请求转到后端服务器,对于其他请求则到前端服务器.

server {
    listen       8888;
    server_name  localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location /api {
        proxy_pass   http://127.0.0.1:8080;
    }
    location / {
        proxy_pass   http://127.0.0.1:4200;
    }
}

3.4路由问题

angular2的路由匹配规则是从根路由也就是forRoot()的这个开始.在该处匹配寻找规则.

根路由:

export const appRoutes: Routes = [
  {
    path:'',
    component: IndexComponent,
    pathMatch:'full'
  },
  {
    path:'aust',
    loadChildren:'./content/content.module#ContentAndAsideModule'
  },
  {
    path:'index',
    component: IndexComponent,
  },
  {
    path:'**',
    loadChildren:'./content/content.module#ContentAndAsideModule'
  },
];

子路由:

export const childRouter : Routes = [
  {
    path: '',
    component:ContentAndAsideComponent,
    children:[
      {path:'',redirectTo:'/index',pathMatch:'full'},
      {path:'start',component:StartComponent},
    ]
  }
  ];

举例: 访问/,则先在根路由寻找,找到其跳转到IndexComponent,完成任务 访问/aust.则先在根路由找,发现需要到子路由里面寻找,到子路由后,在children中发现被重定向到/index,那么回到根路由,找到IndexComponent完成任务. 访问/aust/start,则先在根路由找,发现需要到子路由,到子路由匹配到StartComponent,完成任务.

路由参数 路由传参数主要有两种方式,一种是restful风格的,一种是?号参数风格的.两种参数都保存在ActivatedRoute对象中,因此下面代码中的route为此对象 — restful风格 配置:{path:'article/:id',component:ArticleComponent} 链接:http://domain/article/1 路由:[routerLink]="['article',article.id]"或者直接拼接url js获取:this.route.params中的一系列方法,或者this.route.snapshot.params['id'] — 问号参数风格 配置:{path:'article',component:ArticleComponent} 链接:http://domain/article?id=1 路由:routerLink="article" [queryParams]="{id: article.id}" js获取:this.route.queryParams中的一系列方法,或者this.route.snapshot.queryParams['id'],另外可以使用订阅模式queryParamMap.subscribe(),路由参数更新时自动通知

3.5组件通信

父->子:子组件使用input装饰器,接受父组件的属性,并且可使用ngOnChanges或则setter监听变化,做额外处理. 子->父:使用output装饰器加EventEmitter向上弹出事件到父组件,父组件监听后处理. 任意组件:使用service通讯(要求service单例),service提供Observable的next发布,其他组件引用service对象subscribe该发布,那么就实现了信息的流动,并且是在只要订阅了该发布的组件中都能获取.

3.6单例?

agular2的service是providers提供的,该组件如果引用了这个service,那么会先在自己的providers中寻找service,找不到则再向上找父组件,直到module.那么意味着每一个providers提供的是一个实例,旗下的组件都是享用这一个实例,那么怎么实现全局单例呢?很简单在根module中提供服务且其他组件不要自己providers该服务.

3.7组件生命周期

组件生命周期看下面这张图.图中没有onChanges(changes: SimpleChanges)方法的调用,该方法检测到组件的输入属性发生变化时调用,也就是存在@input装饰的属性,该属性每次变化时会调该方法.

3.8部署问题

单页应用部署到服务器上可能会出现访问www.domain.xx可以访问,并且点击什么的都能成功,但是直接访问其中一个路由www.domain.xx/aust/start却报404. 先分析下问题的原因,我们的单页应用只有一个入口,报404也就是没找到这个入口.看nginx的配置.nginx收到请求后会去root下寻找aust/start下的index.html那么自然找不到,所以直接访问就会404. 那么问题来了为什么访问www.domain.xx之后页面内跳转到路由没问题呢?这是因为访问主域名后angular的js都已经全部加载了,这个时候跳转是js来控制的,不经过nginx自然不会出现上面的问题.

location / {
    root /Users/niuli/workspace/web/austoj/dist;
    index  index.html index.htm;
}

解决方法: 解决方法就是让其对于路由都去加载index.html这个文件.使用try_files指令,该指令会把uri当成一个文件,去根目录下寻找,找不到的话则内部重定向到配置的/index.html.这样配置的好处,对于静态资源try_files会直接找到后就返回,对于路由则会定向到/index.html.

location / {
    try_files $uri /index.html;
    root /Users/niuli/workspace/web/austoj/dist;
    index  index.html index.htm;
}

3.9文件上传

文件上传是通过ajax操作上传,使用FormData形式,主要有以下问题要解决.

  1. 怎么获得input框所选中的文件(为input绑定change事件,然后获取$event,文件就是event.srcElement.files[0])
  2. 怎么上传到服务器?(使用formData对象,调用其append方法添加文件,再使用angular2的http组件post上去)uploadAvatar(file: any): Promise<any>{ let formData:FormData = new FormData(); formData.append('avatar',file); return this.http.post(Config.url_upload_img,formData).toPromise() .then(response => response.json()) .catch(LogService.handleError); }

angular2项目: https://github.com/nl101531/AUSTOJ-WEB

window.disqusProxy={shortname:"mrdear",username:"屈定",server:"disqus.ifreehub.cn",port:443,adminAvatar:"/avatars/admin-avatar.jpg",identifier:"2017/04/08/web/Angular--study_for_backend/"},window.disqus_config=function(){this.page.url=window.location.href,this.page.identifier=window.disqusProxy.identifier}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Java--序列化知识点

    今天线上遇到了DTO类实现了Serializable接口,但是其并没有显示声明serialVersionUID,这样的话每次打包有改动JDK就会为其重新生成se...

    屈定
  • Java--死锁以及死锁的排查

    清单一代码有点长,但是逻辑很简单,有两个临界区变量lockA,lockB,线程A先获取到lockA在获取lockB,线程B则与之相反顺序获取锁,那么就可能会有以...

    屈定
  • 工作 --多时区下时间的加减怎么做?

    国际业务往往比国内业务复杂很多,其中一点就是多时区,洛杉矶时间2019.11.3号,正值夏令时切换时踩了一把坑,该篇文章记录下问题,并给出多时区下时间操作比较合...

    屈定
  • Silverlight网络寻奇 at 090417

    Silverlight获取Ie外观的颜色 Silverlight 3 now supports operating system colors. This me...

    用户1172164
  • SQL注入小记

    sqlmap: sqlmap是一个开源的渗透测试工具,可以用来进行自动化检测,利用SQL注入漏洞,获取数据库服务器的权限。

    用户5521279
  • 资讯 | 你家的网络摄像头可能也正被CIA监控,维基解密曝光CIA视频流窃听工具

    大数据文摘
  • Java研发方向如何准备BAT技术面试答案(下)

    这部分内容比较深入,整理了一些网络文章可参考,推荐看书籍的方式去复习。 81.深度优先和广度优先算法 推荐看书籍复习!网络文章只做参考,http://blog....

    JavaQ
  • RSA大会播报 – 2014最佳安全博客提名(国外篇)

    今年美国RSA大会将在这个月的23-28号举行,每年大会上都会评出过去一年来业内最佳安全博客(Security Bloggers Network Social ...

    FB客服
  • Uncaught RangeError: Maximum call stack size exceeded 调试日记

    异常处理汇总-前端系列 http://www.cnblogs.com/dunitian/p/4523015.html 开发道路上不是解决问题最重要,而是解决问题...

    逸鹏
  • Debug客栈 2017-2018年度干货分享

    此篇文章是个人在大学接触计算机期间学习计算机知识进行的一次对计算机各个领域的资料的总结,自己在这一年半的事件中收获了不少有趣的资料,还有许许多多优质的公共平台,...

    Debug客栈

扫码关注云+社区

领取腾讯云代金券