Angular4学习笔记之根模块与Ng模块

Angular根模块与Ng模块笔记

本文是关于Angular的学习笔记，特别关注根模块和Ng模块的相关内容。长沙网络推广觉得这是一个很好的学习机会，因此分享给大家，希望能为大家提供参考。

一、根模块（Root Module）

每个Angular应用至少需要一个根模块来引导并运行应用。通常，这个模块被命名为AppModule。它位于src/app/app.module.ts文件中。

例如：

```typescript

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './appponent';

@NgModule({

imports: [BrowserModule],

declarations: [AppComponent],

bootstrap: [AppComponent]

})

export class AppModule { }

```

二、关于imports数组

在imports数组中，不要添加非NgModule类型的类。如果两个指令同名，可以使用as关键字为第二个指令创建别名。例如：

```typescript

import { HighlightDirective as ContactHighlightDirective } from './contact/highlight.directive';

```

三、BrowserModule的重要性

每个在浏览器中运行的应用都需要来自@angular/platform-browser的BrowserModule。每个应用都在其根AppModule的imports数组中包含BrowserModule。NgIf等指令位于@angular/common的CommonModule中。BrowserModule导入了CommonModule并重新导出它，这意味着只要导入BrowserModule，就可以自动获得CommonModule中的指令。

四、关于declarations数组

每个NgModule类都必须声明每一个组件，否则浏览器控制台会报错。不要在declarations数组中添加除组件、指令和管道之外的其他类型。不要将NgModel（或FORMS_DIRECTIVES）添加到AppModule元数据的declarations数组中，这些指令属于FormsModule。每个组件、指令和管道只能属于一个模块，不要声明属于其他模块的类。

五、关于bootstrap数组

在应用的引导过程中，我们有两种主要的编译方式：即时（JIT）编译和预编译（AOT）。JIT编译是在运行时动态进行的，适合开发环境。而AOT编译则作为构建流程的一部分提前完成，生成更小、启动更快的应用，尤其适用于移动设备或高延迟网络。

在Angular应用中，NgModule扮演着核心角色。我们引导根模块来启动应用，但导入特性模块来扩展应用的功能。特性模块是一种带有@NgModule装饰器及其元数据的类，它们提供了内聚的功能集合，如应用的某个业务领域、用户工作流或基础设施等。

在JIT编译模式下，Angular的即时编译器会动态地从AppModule源码中生成一个AppModuleNgFactory类。这个过程是在浏览器的内存中完成的。而在AOT模式下，编译器会提前生成这个工厂类，并将其输出为一个物理文件。这样，我们就不必在浏览器中进行编译，也不需要把Angular编译器发送到浏览器。这使得应用的启动速度更快，体积更小。

值得一提的是，无论是JIT还是AOT，它们使用的都是同一份AppModule源码。这意味着AppModule本身并不需要关心它是如何被引导的。随着应用的发展，AppModule会不断演化，而main.ts中的引导代码则保持相对稳定。

特性模块与根模块共享同一个依赖注入器，这意味着在一个模块中定义的服务可以在所有模块中使用。特性模块有其独特的特性：它们可以暴露或隐藏自己的实现。这是特性模块的魅力所在，它们为我们提供了一种组织和管理大型应用的强大方式。通过特性模块，我们可以将应用划分为具有特定关注点和目标的区域，从而更好地管理和扩展应用的功能。

无论是JIT还是AOT，无论是根模块还是特性模块，它们都是构建现代Web应用的重要部分。理解和掌握这些概念，将有助于我们更有效地开发和组织我们的Angular应用。在Angular框架中，绑定模块到[(ngModel)]的过程是极其重要的一个环节。若要确保模块顺利绑定，就必须先导入FormsModule模块。接下来让我们深入了解这一关键环节。本章的内容虽精简，但却包含了对Angular模块概念、功能和关系的全面理解。让我们一起领略它的奥秘。

在Angular的世界里，模块是一种组织代码的关键机制。它好比一个容器，将相关的代码组件整合在一起，形成一个独立的单元。每个模块都有其特定的功能，并通过与其他模块的交互来实现应用程序的整体功能。理解模块的概念，是掌握Angular框架的基础。FormsModule作为其中一个关键模块，对于实现数据绑定、表单验证等功能至关重要。在开发过程中，当你需要将某个模块绑定到[(ngModel)]时，就必须先导入FormsModule模块。这不仅关系到功能能否实现，还关乎到应用程序的稳定性和安全性。

除了模块概念外，本章还介绍了模块的功能和关系。每个模块都有其特定的功能，例如有的负责路由管理，有的负责数据服务等。这些模块之间也存在着复杂的关系，通过交互协作实现应用程序的整体功能。理解模块的功能和关系，有助于我们更好地组织和管理代码，提高开发效率。这也是我们在开发过程中需要不断学习和的领域。通过深入了解每个模块的功能和关系，我们可以更好地利用Angular框架构建高效、稳定的应用程序。

本文的内容虽然简洁明了，但却包含了丰富的信息。希望通过本文的学习，大家能更深入地理解Angular模块的概念、功能和关系，从而在实际开发中更好地运用这些知识点。也希望大家能继续关注和支持狼蚁SEO，共同学习进步。在未来的开发中，我们将继续Angular的奥秘，共同创造更多的可能性。让我们一起期待更多的精彩内容吧！让我们在编程的道路上不断前行！让我们共同见证Angular的魅力！让我们共同这个充满无限可能的编程世界！