重新开始Angular

模块

• 每个 Angular 应该至少要有一个模块(根模块)，一般可以命名为：AppModule。
• Angular 模块是一个带有 @NgModule 装饰器的类，它接收一个用来描述模块属性的元数据对象。

• declarations （声明） - 视图类属于这个模块。 Angular 有三种类型的视图类： 组件 、 指令 和 管道 。
• exports - 声明（ declaration ）的子集，可用于其它模块中的组件模板 。
• imports - 本模块组件模板中需要由其它导出类的模块。
• providers - 服务的创建者。本模块把它们加入全局的服务表中，让它们在应用中的任何部分都可被访问到。
• bootstrap - 应用的主视图，称为根组件，它是所有其它应用视图的宿主。只有根模块需要设置 bootstrap 属性中。

组件(Components)

• 从 @angular/core 中引入 Component 修饰器
• 建立一个普通的类，并用 @Component 修饰它
• 在 @Component 中，设置 selector 自定义标签，以及 template 模板

元数据(Metadata)

• 元数据告诉 Angular 如何处理一个类。在 TypeScript 中，我们用 装饰器 (decorator) 来附加元数据。
• 例如@Component 装饰器能接受一个配置对象，并把紧随其后的类标记成了组件类。Angular 会基于这些信息创建和展示组件及其视图。

数据绑定

• 插值 : 在 HTML 标签中显示组件值。

{{title}}

• 属性绑定: 把元素的属性设置为组件中属性的值。

• 事件绑定: 在组件方法名被点击时触发。

保存

• 双向绑: 使用Angular里的NgModel指令可以更便捷的进行双向绑定。

数据绑定

指令

component的用途是创建一个组件并附上一些行为，而directive则是在已经存在的dom元素上附加一些行为；二期详细区别如下：
（1）component使用的注解@Component修饰，directive使用注解@Directive来修饰
（2）component是通过组件化思想，基于组件来创建应用，把应用划分成细小的各个可重复使用的组件，遵循DRY原则（Don't repeat youself！），directive是用来在已经存在的dom元素上实现一些行为
（3）component是可重复使用的组件，directive是可重复使用的行为
（4）component有创建一个视图view，即有template或者templateUrl，directive则没有。

服务

封装了某一特定功能，并且可以通过注入的方式供他人使用的独立模块

模板引用变量

通过在标识符前加上井号 (#) 来实现

@Component({
  selector: 'loop-back',
  template: `
    
    
{{box.value}}
  `
})
export class LoopbackComponent { }

可以将模板引用变量初始化为 "ngForm" ，它代表的是表单的整体。

  

提交

模板语法

Bad curly

这个样式比较特殊

红色
保存