启程

寒假的时候老师布置了一个web作业，做一个个人博客，并给出了种子项目代码，一看发现是用angularjs写的，并且是好几年前的东西了（大概已经被淘汰了吧233），于是看了下angular的文档，决定用angular5进行开发。如今加入一个team，刚好里面的前端框架也是用angular5，于是给自己定了个目标，结合项目代码、官方文档、以及这本书进行更深入的学习。在此记录下看书得到的一点体会。

解构

导入模块组件的时候利用了es6的解构赋值特性，如import { componet } from ‘@angular/core’
然后项目中有这样写的 import { …something } from ‘xxModule’; 不是很理解表达的意思。

反引号模板字符串

反引号字符串会展开模板变量！

输入属性

在Angular中，添加一个带方括号的属性（比如[foo]）意味着把一个值传给该组件上同名的输入属性（如foo）

启动过程

ng serve >> angular-cli.json >> main.ts >> bootstrap引导模块(AppModule) >> 顶层组件AppComponent >> 渲染模板

模板变量

<input name="link" #newlink></input>

这里的#newlink语法称作一个解析，Angular会把设置了#(hash)的标签元素赋值给一个局部变量，其代表了这个元素的Dom，其效果是让变量newlink可用于该视图的所有表达式中。

组件host选项

@Component({
  selector: 'app-article',templateUrl: './article.component.html',styleUrls: ['./article.component.css'],host:{
    class: 'row'
  }
})

组件的宿主就是该组件所附着到的元素，借助host选项，我们可以在组件的内部设置宿主元素。（不是很明白具体作用是什么。）

可选参数

constructor(aa: string,bb: string,cc?: number){ this.cc= cc|| 0; }

上面的cc参数是一个可选参数，由末尾的？标出来。

扩展阅读

1. 胖模型、皮包骨的控制器
2. 变量的解构赋值
3. Angular高级样式指南
4. Angular Directive（指令）