Angular--Module的使用
<p>Angular 是一个用html 和typescript <code>构建</code>客户端应用的<code>平台与框架</code>。<br>它将核心功能和可选功能作为一组TypeScript 库进行实现，你可以把它们导入到你的应用中。</p><div>
<div>
<h3>1. 模块Module</h3>
<blockquote><ol>
<li>Angular 应用的基本构造块是<span style="color: rgba(51, 153, 102, 1)"><strong><code>NgModule</code></strong></span>, 它为组件提供了编译的上下文环境。</li>
<li>Angular 应用就是由一组NgModule定义的。 NgModule 可以将其组件和一组相关代码（如服务）关联起来，形成功能单元。</li>
<li>一个Angular应用至少有一个用于启动的<strong><code><span style="color: rgba(51, 153, 102, 1)">根模块</span>（root module）</code></strong>, 根模块通常命名为<code>AppModule</code>，并位于一个名叫 app.module.ts 的文件中。还会有很多<strong><code><span style="color: rgba(51, 153, 102, 1)">特性模块</span>（feature module）</code></strong></li>
</ol></blockquote>
<blockquote><ol>
<li>NgModule 是由<span style="color: rgba(51, 153, 102, 1)"><strong>@NgModule()</strong> </span>装饰器定义的类。</li>
<li>NgModules 用于配置注入器和编译器(the injector and the compiler)，并帮你把那些相关的东西组织在一起。</li>
<li><span style="color: rgba(51, 153, 102, 1)"><strong><code>@NgModule()</code></strong></span> 装饰器是一个函数，参数是一个元数据对象，元数据对象的属性用于描述这个模块。其中最重要的属性如下：</li>
</ol>
<blockquote>
<ul>
<li><span style="color: rgba(51, 153, 102, 1)"><strong><code>declarations</code></strong></span>（可声明对象表） ——属于本 NgModule 的<em>组件</em>、<em>指令</em>、<em>管道</em>。</li>
<li><span style="color: rgba(51, 153, 102, 1)"><strong><code>exports</code></strong></span>（导出表） —— 用于其它模块的<em>组件模板</em>中使用的声明对象的子集（the subset of declarations）。</li>
<li><span style="color: rgba(51, 153, 102, 1)"><strong><code>imports</code></strong></span>（导入表） —— 其他模块，本NgModule声明的组件需要使用它们的导出类。</li>
<li><span style="color: rgba(51, 153, 102, 1)"><strong><code>providers</code> </strong></span>—— 本模块向全局服务中贡献的那些服务的创建器。 这些服务能被本应用中的任何部分使用。（你也可以在组件级别指定服务提供商，这通常是首选方式。）</li>
<li><span style="color: rgba(51, 153, 102, 1)"><strong><code>bootstrap</code> </strong></span>—— 应用的主视图，称为<em>根组件</em>。它是应用中所有其它视图的宿主。只有<em>根模块</em>才应该设置这个 <code>bootstrap</code> 属性。</li>
</ul>
</blockquote>
<ol start="4">
<li><span style="color: rgba(51, 153, 102, 1)"><strong><code>@NgModule</code></strong></span> 的参数是一个元数据对象，用于描述如何编译组件的模板，以及如何在运行时创建注入器。 它会标出该模块自己的组件、指令和管道(declarations)，通过 <code>exports</code> 属性公开其中的一部分，以便外部组件使用它们。<code>NgModule</code> 还能把一些服务提供商添加到应用的依赖注入器中(provider)。</li>
</ol></blockquote>
</div>
<h3>2.常用模块NgModules</h3>
</div>
<div>
<h5> </h5>
<div>
<div>
<table>
<thead>
<tr><th>NgModule</th><th>Import it from</th><th>Why you use it</th></tr>
</thead>
<tbody>
<tr>
<td>BrowserModule</td>
<td>@angular/platform-browser</td>
<td>当你想要在浏览器中运行app 时</td>
</tr>
<tr>
<td>CommonModule</td>
<td>@angular/common</td>
<td>当你想要使用NgIf 和NgFor时</td>
</tr>
<tr>
<td>FormsModule</td>
<td>@angular/forms</td>
<td>当要构建模板驱动表单时</td>
</tr>
<tr>
<td>ReactiveFormsModule</td>
<td>@angular/forms</td>
<td>当要构建响应式表单时</td>
</tr>
<tr>
<td>RouterModule</td>
<td>@angular/router</td>
<td>当要使用路由功能，并且你要用到RouterLink, forRoot() 和.forChild()时</td>
</tr>
<tr>
<td>HttpClientModule</td>
<td>@angular/common/http</td>
<td>当要和服务器对话时</td>
</tr>
</tbody>
</table>
<blockquote>
<p><span style="color: rgba(51, 153, 102, 1)"><strong><code>BrowserModule</code> </strong></span>导入了 <code>CommonModule</code>，它贡献了很多通用的指令，比如<span style="color: rgba(51, 153, 102, 1)"><strong> <code>ngIf</code></strong></span> 和 <span style="color: rgba(51, 153, 102, 1)"><strong><code>ngFor</code></strong></span>。 另外，<code>BrowserModule</code> 重新导出了 <span style="color: rgba(51, 153, 102, 1)"><strong><code>CommonModule</code></strong></span>，以便它所有的指令在任何导入了 <code>BrowserModule</code> 的模块中都可以使用。<br>
对于运行在浏览器中的应用来说，都必须在根模块 <code>AppModule</code> 中导入 <code>BrowserModule</code> ，因为它提供了启动和运行浏览器应用时某些必须的服务。<code>BrowserModule</code> 的提供商是面向整个应用的，所以它只能在根模块中使用，而不是特性模块。 特性模块只需要 <code>CommonModule</code> 中的常用指令，它们不需要重新安装所有全应用级的服务。</p>
</blockquote>
</div>
</div>
<h5> </h5>
</div><br><br>
来源：https://www.cnblogs.com/le220/p/12720607.html
頁:
[1]