模块

Angular 模块都是一个带有@NgModule装饰器的类。
NgModule是一个装饰器函数，它接收一个用来描述模块属性的元数据对象。把紧随其后的类标记为模块类。其中最重要的属性是：

declarations
声明本模块中拥有的视图类。包括[组件]、[指令]和[管道]。
exports(根模块则不需要导出任何东西。)
导出可用于其它模块的组件[模板]。
imports(Angular模块)
本模块声明的组件模板需要的类所在的其它模块。
providers
[服务]的创建者，并加入到全局服务列表中，可用于应用任何部分。
bootstrap
指定应用的主视图（称为根组件），它是所有其它视图的宿主。只有根模块才能设置bootstrap属性。
app.module.ts中bootstrap了AppComponent,而main.ts文件中bootstrap了AppModule

元数据告诉 Angular 如何处理一个类。我们用装饰器 (decorator) 来附加元数据。@Component装饰器，它把紧随其后的类标记成了组件类。

@Component的配置项包括：

selector：CSS 选择器，在父级 HTML 中查找对应内容，创建并插入该组件。

插值绑定
属性绑定

事件绑定
双向绑定

组件是一种特殊的指令

“依赖注入”是提供类的新实例的一种方式，还负责处理好类所需的全部依赖。大多数依赖都是服务
@Injectable()

变量赋值的方式初始化组件，也可以使用构造函数来声明和初始化属性。

插值表达式

{{heroImageUrl}}
等价于

等价于

其他同理

事件绑定

等价于

click with myClick

//模板对象
//模板输入变量
 ... //模板引用变量

Class设置

Special

或者[class]="isSpecial"
或者

This div is initially saveable

其中currentClasses是一个对象,每个key都是类名,value是布尔值

模板引用变量的作用范围是整个模板。不要在同一个模板中多次定义同一个变量名，否则它在运行期间的值是无法确定的。

输入和输出属性

@Input() hero: Hero;
@Output() deleteRequest = new EventEmitter();
或者
@Component({
inputs: ['hero'],
outputs: ['deleteRequest'],
})

指定别名
@Output('myClick') clicks = new EventEmitter();
或者
@Directive({
outputs: ['clicks:myClick'] // propertyName:alias
})

管道操作符

类似过滤器
将obj渲染在页面:

安全导航操作符( ?. )

{{name}}如果name不存在,则仅仅不渲染
但是{{hero.name}}的hero如果不存在,则直接报错,因此可以采用NgIf环绕保护,或直接

生命周期钩子函数

OnInit()钩子:
在构造函数之后马上执行复杂的初始化逻辑

OnChanges() 钩子:
一旦检测到该组件(或指令)的输入属性发生了变化，Angular就会调用它的ngOnChanges()方法。

每个组件的css只对自身生效
:host为宿主元素伪类选择器,可以选中该组件的宿主元素
指定的styleUrlsURL是相对于应用程序根目录的，它通常是应用的宿主页面index.html所在的地方。

Angular的是一个分组元素，但它不会污染样式或元素布局，因为 Angular 压根不会把它放进 DOM 中。
一般配合*ngFor使用,给其提供一个宿主

$event.target即事件对象元素自身


{{box.value}}

只有在应用做了些异步事件（如击键），Angular 才更新绑定（并最终影响到屏幕）。将keyup事件绑定到了数字0，这是可能是最短的模板语句。虽然这个语句不做什么，但它满足 Angular 的要求，所以 Angular 将更新屏幕。

事件(keyup.enter)只关注回车键事件
(blur)事件

Angular会在标签上自动创建并附加一个[NgForm]指令。
此时每个input元素都应该有唯一的name属性,否则报错

NgModel 指令不仅仅跟踪状态。它还使用特定的 Angular CSS 类来更新控件，以反映当前状态:
控件被访问过。
ng-touched ng-untouched
控件的值变化了。
ng-dirty ng-pristine
控件的值有效。
ng-valid ng-invalid

.reset()方法重置表单.使各状态重置且清空表单内容,尤其是变成ng-pristine





  
    Name is required.
  
  
    Name must be at least 4 characters long.
  
  
    Name cannot be Bob.

不要将 Angular 模块的imports数组与文件顶部的import语句弄混淆了。它们的功能不同。

JavaScript 的import声明允许你访问在其他文件中导出的符号，这样你可以在当前文件引用它们。我们会往几乎所有类型的应用中加入import语句。它们与 Angular 毫无关系，Angular 对它们也一无所知。

模块的imports数组是@NgModule元数据中独有的。它告诉 Angular 特定 Angular 模块的信息 — 用@NgModule装饰的类 — 应用需要它们来正常工作。

Angular 模块把组件、指令和管道打包成内聚的功能块，每个模块聚焦于一个特性区域、业务领域、工作流或通用工具。
每个运行在浏览器中的应用都必须导入[BrowserModule],他注册了一些关键的应用服务提供商。它还包括了一些通用的指令，例如[NgIf]和[NgFor]，所以这些指令在该模块的任何组件模板中都是可用的。

启动模块为根模块，自定义的其他模块叫特性模块。

模块