Angular2学习心得

学习记录：

看了近10小时的开发文档（开发指南1-7）,

因为没有连上后台 也没有用到express 所以数据都是静态的

主要是练习了组件间父子组件的通信和Angular2的基本开发

下面是对比同样页面用React和Angular2的不同感觉：

1.用知乎上的一个回复来讲：微软和google,一个总想全世界的代码都是C#,另一个总想全世界的代码都是Java.

Angular2给人的感觉就是..很Java

React给人感觉就是..很新. 毕竟再这之前没人提出过状态机的概念

2.对比父子组件通信

React:
1.父组件定义函数（or变量）

2.引入子组件同时传值

3.子组件通过this.props调用

 //父组件
  var parent = React.createClass({
    render: function(){
        //只要传递的方法放在标签里
        return(
        <child foo = {this.foo} />
        )
    },
    foo:function(){...}
  })
  //子组件
  var children = React.createClass({
    render: function(){
        //通过this.props调用父组件方法
        return(
        <button onClick={this.props.foo()}></button>
        )
    }
  })

Angular2：（因为刚碰..我想应该有更好的通信方法的…）

1.声明服务类（service）

2.在父组件中 providers: [fooService]

3.构造器中注入constructor(private fooService : FooService){}

4.子组件构造器做同样的事情
（
注：如果不在构造器中 就需要
fooService : FooService = new FooService ();
但是这个在开发指南里是不建议的
以免FooService以后改动时候需要一同改所有引用过它的组件。
）

代码：

//父组件

import { FooService } from './service/FooService';

@Component({
        ....
        templat:`
        <div>{{fooService.name}}</div>
        <child (output)="output($event)></child>
        `,
        providers: [FooService]
})

export class ParentComponent {
        constructor(private fooService : FooService){}

        output($event){
                console.log('响应子组件')
        }   
}

//子组件
import {Output, EventEmitter} from '@angular/core';
import { FooService } from './service/FooService';

@Component({
        ....
        templat:`
        <button (click)="onClickMe(id)">click me!</button>
        `
})

export class ChildrenComponent {
        constructor(private fooService : FooService){}

        @Output() output : EventEmitter<any> = new EventEmitter();

        onClickMe(id : number){
            this.habitService.id = id;
            this.output.emit(id);
        }
}  

Angular可以通过service来让父子组件共享一个服务类,也可以通过input output的方法来通信。

对比Angular2和React

1.Angular在开发中速度比React更慢，逻辑管理相对更困难

2.Angular引入了typeScript，在知乎上有一条评论说：
如果几万~十几万的代码量，后期维护api返回数据改了一个,typeScript
的和Angular的双向绑定作用就出来了。可见，Angular更适用于大型
项目。

3.Angular建议每个component文件就一个组件 这样使得前端每个文件都被细化。特别赞templateUrl…就是..很赞。

4.因为Angular父子组件的通信并没有像React那么方便快捷，我在做React重构时候，会把所用页面的Button抽出来变成一个公用Button，大概思路是click—>disable:flase—>ajax.success—>disable:ture的这样一个防止未响应完成的多次click，但是这样的功能在Angular上…我还在思考能不能这样用。

总结：

目前来讲，React给我的感觉就像facebook说的只是一个view，组件=view+state，就是React。

Angular2的感觉是前端工程化，高度复用的东西 , 好像是service指令？