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

我为什么最后选择了angualr2

angular2是类似全家桶组合的框架,所需要的东西几乎都包办了,所以开发起来很迅速.

使用TypeScript作为开发语言,对于Java和C#程序员可以快速上手,还有就是我比较喜欢强类型语言,每个变量各司其职,由其的类型来限定,开发人员也很明确知道变量的作用.

google和Microsoft支持

WebStorm对angular2的强大支持.

一篇安利文章我为什么选择Angular 2?

一些学习资料

遇到的问题

滚动监听

要实现页面滚动后导航栏会变色的效果,如下图



之前使用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.

http参数传递

按照下面代码传参数应该是没有问题的,但是我遇到了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跨域问题
浏览器要求同源下才可请求,否则就产生跨域问题.

解决方案是用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;
        }
    }

路由问题

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,完成任务.

3.5组件通信

  • 父->子:子组件使用input装饰器,接受父组件的属性,并且可使用ngOnChanges或则setter监听变化,做额外处理.

  • 子->父:使用output装饰器加EventEmitter向上弹出事件到父组件,父组件监听后处理.

  • 任意组件:使用service通讯(要求service单例),service提供Observable的next发布,其他组件引用service对象subscribe该发布,那么就实现了信息的流动,并且是在只要订阅了该发布的组件中都能获取.

单例?

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

组件生命周期

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

image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,509评论 6 504
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,806评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,875评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,441评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,488评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,365评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,190评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,062评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,500评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,706评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,834评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,559评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,167评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,779评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,912评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,958评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,779评论 2 354

推荐阅读更多精彩内容