Angular 2初体验杂感

参考官方文档编写了第一个angular 2的项目。使用的语言是 typescript，也属于第一次接触。

---

注意：刚看Angular 2一周不到，所写只是自己的体会，可能错。之前除用flask写过网页，无其他前端经验。对此文内容的正确性和准确性不保证。

---

杂感：

语法

1. JavaScript类的语言，extension的特性非常强，这个与python不一样，有点类似swift，或者说，swift参考了JavaScript做的设计吧。

2. 代码的调用逻辑中，decorator模式普遍存在。所以，常常能看到一串大闸蟹式的调用。如

   this.heroes = this.searchTerms
         .debounceTime(300)
         .distinctUntilChanged()
         .switchMap(term => term
          ? this.heroSearchService.search(term)
          : Observable.of<Hero[]>([]))
        .catch(error => {
          console.log(error);
          return Observable.of<Hero[]>([]);
        });

3. 通过上例可以看出，类似lambda函数的写法也是常见写法，比如catch里面error的输入处理。也有传统的三元操作符支持，比如switchMap里面 term的 “? :” 操作。这个操作和python的buildin操作一致。

4. 不同于python，但类似于java，不能在文件里面直接定义可变变量，可变变量必须依托于一个类，外面能定义的只能是const的变量。
5. 命名规则和python不同，python对于文件名，采用的是首字母小写的驼峰法，对应的代码里面的类首字母大写来对应。但是 typescript推荐采用加入 hyphen划分“-”的全小写文件名命名，依据是存在操作系统大小写不敏感的可能。虽然合理，但我觉得，如果真有开发一个文件夹放这样的易混淆文件名，他可以结束职业生涯了。而代码的变量名，python是全小写加下划线，而typescript采用了驼峰法。默认tab是2个空格，和python 4个空格不一致。
6. Angular自己的类和函数是通过ng开头，但是有1和2的区别，比如 *ngif *ngIf这两个，前者是1，后者是2，这些容易搞出错。在WebStorm里面，现在的一种处理方法就是，输入时，先输入 ng2-，这样，intellisense的提示就都是ng2的函数了。

7. 每个 Component通过 constructor 来构造，但构造只是一个变量的初始化。而这个初始化有意思的地方是，不需要显性地写。比如下面的例子，就隐性地有private的 self.heroSearchService和self.router创建了

   
constructor(
private heroSearchService: HeroSearchService,
private router: Router
){}


8. 在html中访问类变量，能看到有两种方式，一种是ng的类的方式，还有一种就是通过类似于flask中ninja的方式展示 {{hero.name}}。通过采用[(ngModel)]对变量做双向绑定，在Class中声明变量时，做@input()装饰器绑定，这样，只要对应实例中的变量发生变化，网页上马上会显示相应的变化，这一点非常强大。

结构

1. 一个简单的项目，一开始要安装的包非常多，npm install很耗时，用cnpm会好些，当然，用 yarn也被 npm 快很多。如果出错，根据log，一般删除 node_modules下的文件再安装就行。
2. 启动入口。对于Angular的load，它首先找了根目录下的systemjs.config.js，这里面定义了 package[“app”][“main”]这个加载的入口，main: './main.js',，在 main.ts中，定义了platformBrowserDynamic().bootstrapModule(AppModule);，然后在app.module.ts里面定义了启动的Component bootstrap: [AppComponent]。对于网页，通过根目录下的index.html来加载，在index.html中，有个一个 <my-app>Loading AppComponent content here ...</my-app>标签，这个my-app的标签，就是bootstrap中AppComponent的selector
3. 项目代码分 module, component, service这几个大类。对于Module，我的理解是一个比较大的功能，它包含了几个Component，定义在declaration中。而Component是其中小功能的实现，包含页面逻辑和展现方式。而一个页面，可以是一个Component的展现，也可以是多个Component的组合展示。Component是有View的显示，而Service则是属于纯功能模块，提供给各个Component调用，就像示例中获取http请求数据。
4. 文件的划分非常细。基本每个component都有自己的ts，html，css文件。感觉文件爆炸可能性非常高，项目路径以后或许会比较深。

Component

1. Component之间的显示组合，通过在Component的selector标签，在html中包含，这种Component嵌套非常方便。
2. 一个Component是一个完整的概念，定义了它内容的逻辑(template或者templateUrl)，风格的逻辑（style或者styleUrls**注意，这个后面要跟一个array**)，还有它的业务处理逻辑（自己export的类，提供了html里面定义的那些变量和操作调用入口。）
3. Component中的ngOnInit()类似于Android的页面加载时的 onStart()

Router

1. 跳转主要靠 router的设置，这个被单独作为一个module和各个Component绑定，html里面通过 [routerLink]把跳转和参数绑定。如
   

   
> <a ... [routerLink]="['/detail', hero.id]"></a>
>

Service

1. Service类的创建会有一个 @Injectable的标签，其实是一种类似于工厂的设计模式，由调用者提供类中会用到的变量的实例。通过一个类的constructor的参数来做一层抽象。不过，如果constructor没有参数的话，这个装饰器是一种浪费，不过，官方建议只有是service都加上。所以，更倾向也Angular2在设计上，提供一个service的基类，service类都extend它，不是更清楚？而且未来扩展起来也更方便。
2. Promise是一种支持异步调度的类，特别对于网络请求。返回用Promise包装的泛型，然后通过.then()进行下一步操作。对于网络编程，和后端编程不同的是，网络编程更趋向于异步和响应，而后端，传统上，同步与等待是主体。所以，网络编程中，对于请求的代码，对于反馈的逻辑在一起提交，可以理解成一行很长的代码，如上面提到的decorator模式。而对于后端编程，代码层面上，请求代码拿到数据后，才做进一步的操作代码。不过现在代码明显整合得不完整，Promise要使用，需要 import ‘rxjs/add/operator/toPromise’