angular4.x学习笔记--模块

不念不忘少年蓝@ 2022-05-28 01:13 199阅读 0赞

## 模块 ##

Angular很重要的概念之一仍然是模块。Angular整个框架就是由很多个模块组成的，而不同的模块需要从不同的地方导入。打开`package.json`文件，可以看到依赖的angular包可能是这样的：

"@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",

来简单看下这些angular包中包含了哪些常用的模块（至少目前为止，我觉得常用的）。

*  @angular/core：这里包含了很多常用的模块
    
     *  NgModule：模块定义装饰器
     *  Component：组件定义装饰器
     *  Directive：指令定义装饰器
     *  Pipe ：管道定义装饰器
     *  PipeTransform：管道接口
     *  Injectable：服务定义装饰器
     *  ElmentRef：元素引用
     *  ViewChild：获取子元素
     *  Render：渲染
     *  Input：接受参数输入
     *  Output：事件输出
     *  EventEmitter：触发自定义事件
 *  @angular/common
    
     *  CommonModule：通用模块，包含内置指令ngIf，ngFor
 *  @angular/forms
    
     *  FormsModule：定义模版驱动表单
     *  ReactiveFormsModule：定义响应式表单
     *  FormGroup, FormArray, FormControl, FormBuilder：响应式表单元素
     *  Validators：表单校验
 *  @angular/http
    
     *  HttpModule：http请求模块
 *  @angular/router
    
     *  RouterModule 路由模块
     *  Routes 路由数据结构
 *  @angular/platform-browser
    
     *  platformBrowser：AoT编译
     *  BrowserModule：浏览器支持，注意该模块导入了CommonModule，然后导出去，所以引用了这个模块也就引用了CommonModule
 *  @angular/platform-browser-dynamic
    
     *  platformBrowserDynamic：JIT编译

以上模块都是Angular框架中的自带模块，而我们开发的完整单元也是模块。**一个应用中至少要有一个模块，也就是根模块。** 一些共享的功能属性我们可以抽象出来，成为共享模块。然后就是一些特性模块了。

模块的组成由组件，服务，指令，管道等等组成，这些概念会在下面讲到。定义模块的语法如下：

@NgModuel({
        declarations: [],   // 用到的组件，指令，管道
        providers: [],      // 依赖注入服务 
        imports: [],        // 导入需要的模块
        exports: [],        // 导出的模块，跨模块交流
        entryComponents: [] // 需提前编译好的模块
        bootstrap: []       // 设置根组件
    
    })
    export class AppModule { }

> 所有用到的组件，指令，管道，模块都需要事先在模块中声明好，才能在具体组件中使用。服务可以在模块，组件，指令中的`providers`声明，也可以直接在运行时提供（参见Trotyl Yu的[例子][Link 1]）。

一般情况下，在根模块的`bootstrap`中设置启动的根组件即可，但也可以动态处理（参见Trotyl Yu的[例子][Link 2]）。

那如何启动根模块呢？

在入口脚本中，也就是Angular Cli项目中的`main.ts`中，启动如下：

// 导入需要模块
    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    
    // 根模块
    import { AppModule } from './app/app.module';
    
    // 编译启动模块
    platformBrowserDynamic().bootstrapModule(AppModule);

至此，我们对模块有所了解，也知道了模块的定义。

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[Link 1]: http://plnkr.co/edit/fiOq9J3BpD2csuV3FGhu?p=preview
[Link 2]: http://plnkr.co/edit/fzJtvnPKTyzOB8UILtoD?p=preview
[20191229112121499.png]: /images/20220528/b5807263d01c486a9e176fb0cd9a1ef2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220528/ad85ded5db0a4aa3bce66d515ef506d0.png