angular官网阅读记录

今天比较闲，虽然本人css也很菜，实在不愿意看。更愿意看些框架类的东西，这里主要是概念理解，从而提升自己的逼格，换句话说，我说的每句话都是有来源和依据的。
二是今天遇到一个问题，组件导入的问题，也还有前段时间组件sevice化的传值等原因。

1、angular是什么？
Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架。 Angular 本身就是用 TypeScript 写成的。它将核心功能和可选功能作为一组 TypeScript 库进行实现，你可以把它们导入你的应用中。

Angular 的基本构造块是 NgModule，它为组件提供了编译的上下文环境。 NgModule 会把相关的代码收集到一些功能集中。Angular 应用就是由一组 NgModule 定义出的。 应用至少会有一个用于引导应用的根模块，通常还会有很多特性模块。

• 组件定义视图。视图是一组可见的屏幕元素，Angular 可以根据你的程序逻辑和数据来选择和修改它们。 每个应用都至少有一个根组件。

• 组件使用服务。服务会提供那些与视图不直接相关的功能。服务提供者可以作为依赖被注入到组件中，
  这能让你的代码更加模块化、更加可复用、更加高效。
  例子：[动态化加载子组件] 和 任意组件间传值

模块、组件和服务都是使用装饰器的类，这装饰器会标出它们的类型并提供元数据，以告知 Angular 该如何使用它们。

组件类的元数据将组件类和一个用来定义视图的模板关联起来。 模板把普通的 HTML 和 Angular 指令与绑定标记（markup）组合起来，这样 Angular 就可以在渲染 HTML 之前先修改这些 HTML。

服务类的元数据提供了一些信息，Angular 要用这些信息来让组件可以通过依赖注入（DI）使用该服务。

**解析：**上面说了这么多就是component、service的使用介绍。有一定工作经验的人一想就应该理解了，他在说什么，上面重点理解service的概念，很重要，如果你不懂上面有两个例子，仔细分析。

模块的概念
Angular 定义了 NgModule，它和 JavaScript（ES2015） 的模块不同而且有一定的互补性。 NgModule 为一个组件集声明了编译的上下文环境，它专注于某个应用领域、某个工作流或一组紧密相关的能力。 NgModule 可以将其组件和一组相关代码（如服务）关联起来，形成功能单元。

每个 Angular 应用都有一个根模块，通常命名为 AppModule。根模块提供了用来启动应用的引导机制。 一个应用通常会包含很多特性模块。

像 JavaScript 模块一样，NgModule 也可以从其它 NgModule 中导入功能，并允许导出它们自己的功能供其它 NgModule 使用。 比如，要在你的应用中使用路由器（Router）服务，就要导入 Router 这个 NgModule。

把你的代码组织成一些清晰的特性模块，可以帮助管理复杂应用的开发工作并实现可复用性设计。 另外，这项技术还能让你获得惰性加载（也就是按需加载模块）的优点，以尽可能减小启动时需要加载的代码体积。

**解析：**上面的意思就是模块之间的管理是通过NgModule，至少是根模块AppModule。不局限于此，他也可以是多个Module被AppModule所管理。
最金典的场景就是，当前一个项目有多个局点，不同的局点使用各自的Module。这就需要对模块化有一定理解了。
官网对NgModule介绍：本身就是一个装饰器，起到一个管理组件的作用。

这里面的理解每一个都很重要：重点，angular一定要有class的概念，不然很难理解下面很多说法
1、providers: Provider[]
在这里列出了提供商的依赖项可用于注入到任何组件、指令、管道或该注入器下的服务。 引导用的 NgModule 使用的是根注入器，可以为应用中的任何部件提供依赖。
**解析：**重点在可注入的理解，不是我们常用的html中<app-own></app-own>这类应用，它是作用于ts或service的class注入。
我们copy官网的例子放在这里：

class Greeter {
   greet(name:string) {
     return 'Hello ' + name + '!';
   }
}

@NgModule({
  providers: [
    Greeter
  ]
})
class HelloWorld {
  greeter:Greeter;

  constructor(greeter:Greeter) {
    this.greeter = greeter;
  }
}

2、declarations: Array<Type<any> | any[]>
属于该模块的一组组件、指令和管道（统称可声明对象）。
这就是我们最常用的，html中<app-own></app-own>这类应用。所以当你写了一个组件，只用上面这种用途，这里声明足以。注意是声明。

可声明对象必须属于也只能属于一个模块。 如果你尝试把同一个类声明在多个模块中，那么编译器就会报错。 要注意不能声明那些从其它模块中导入的类。

3、imports: Array<Type<any> | ModuleWithProviders<{}> | any[]>
这里列出的 NgModule 所导出的可声明对象可用在当前模块内的模板中。
**解析：**他这个意思，必须满足ModuleA 导入了 ModuleB 并导出了它的场景，就会让 ModuleB 中的可声明对象也同样在那些导入了 ModuleA 的模块中可用。
4、exports: Array<Type<any> | any[]>
此 NgModule 中声明的一组组件、指令和管道可以在导入了本模块的模块下任何组件的模板中使用。 导出的这些可声明对象就是该模块的公共 API。
**解析：**重点在于理解exports这个单词，你的组件上也有这个词。我个人理解是暴露出去的意思，暴露出去从而供他人导入引用。

4、entryComponents: Array<Type<any> | any[]>
定义此 NgModule 中要编译的组件集，这样它们才可以动态加载到视图中。
一句话就说明这个东西的重要性。具体看上面的例子。

对于在这里列出的每个组件，Angular 都会为其创建一个 ComponentFactory，并将其保存到 ComponentFactoryResolver 中。

Angular 会自动把模块的 bootstrap（引导模块）和路由定义中引用的组件添加到 entryComponents 列表中。 该选项用于添加那些需要写代码来创建的组件，比如 ViewContainerRef.createComponent()。

5、schemas: Array<SchemaMetadata | any[]>
该 NgModule 中允许使用的声明元素的 schema（HTML 架构）。 元素和属性（无论是 Angular 组件还是指令）都必须声明在 schema 中。
比较死。
允许的取值包括 NO_ERRORS_SCHEMA 和 CUSTOM_ELEMENTS_SCHEMA。

上面的理清exports和imports在实际工作中多去尝试几次，添加和添加的区别。
以上的认识都是模块的概念。

2、组件的概念
每个 Angular 应用都至少有一个组件，也就是根组件，它会把组件树和页面中的 DOM 连接起来。 每个组件都会定义一个类，其中包含应用的数据和逻辑，并与一个 HTML 模板相关联，该模板定义了一个供目标环境下显示的视图。
这个应该是工作中最长打交道了啦。component

@Component() 装饰器表明紧随它的那个类是一个组件，并提供模板和该组件专属的元数据。

官网的介绍
Component是一个装饰器，用于把某个类标记为 Angular 组件，并为它配置一些元数据，以决定该组件在运行期间该如何处理、实例化和使用。下面这几点一定要理解。

• 组件是 Angular 应用中最基本的 UI 构造块。Angular 应用中包含一棵组件树。
• Angular 的组件是指令的一个子集，它总是有一个与之关联的模板。 和其它指令不同，模板中的每个元素只能具有一个组件实例。
• 组件必须从属于某个 NgModule 才能被其它组件或应用使用。 要想让它成为某个 NgModule 中的一员，请把它列在
  @NgModule 元数据的 declarations 字段中。（这也验证了上面的说法）

里面有两种类型的数据绑定：

• 事件绑定让你的应用可以通过更新应用的数据来响应目标环境下的用户输入。
• 属性绑定让你将从应用数据中计算出来的值插入到 HTML 中。

还有比较重要的一点：
你的模板也可以用管道转换要显示的值以增强用户体验。比如，可以使用管道来显示适合用户所在本地环境的日期和货币格式。 Angular 为一些通用的转换提供了预定义管道，你还可以定义自己的管道。
比如： DatePipe、UpperCasePipe、Translate、CurrencyPipe 和 PercentPipe，你也可以自定义。详细使用见官网管道。

3、服务与依赖注入
对于与特定视图无关并希望跨组件共享的数据或逻辑，可以创建服务类。 服务类的定义通常紧跟在 “@Injectable()” 装饰器之后。该装饰器提供的元数据可以让你的服务作为依赖被注入到客户组件中。

依赖注入（或 DI）让你可以保持组件类的精简和高效。有了 DI，组件就不用从服务器获取数据、验证用户输入或直接把日志写到控制台，而是会把这些任务委托给服务。

就是constructor导入了service感觉没什么可说的。

管道
Angular 的管道可以让你在模板中声明显示值的转换逻辑。 带有 @Pipe 装饰器的类中会定义一个转换函数，用来把输入值转换成供视图显示用的输出值。
Angular 自带了很多管道，比如 date 管道和 currency 管道，完整的列表参见 Pipes API 列表。你也可以自己定义一些新管道。

具体的用法查看官网：这里举个例子
把文本转换成全大写形式。

{{ value_expression | uppercase }}