angular认识模块与组件

前言

咱们都知道一个angular应用一般会有多个模块(Module)组成。而咱们又会在一个模块下写多个组件，让咱们了解一些模块与组件的基本构造吧。

模块

angular中的模块共有9个配置部分。其中最经常使用的有4部分为私有资源列表、公有资源列表、协做模块列表以及扩展功能列表。

如图所示，咱们以appModule为例逐一介绍一下。

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

import {AppRoutingModule} from './app-routing.module'; 
import {AppComponent} from './app.component'; 

@NgModule({ 
  declarations: [ 
    AppComponent 
  ],
  imports: [ 
    BrowserModule, 
    AppRoutingModule, 
  ],
  providers: [], 
  bootstrap: [AppComponent] 
})
export class AppModule { 
}

咱们使用@NgModule声明其为一个模块，同时@NgModule里的内容为此模块的基本信息。

1. declarations：私有资源列表，咱们在这里那些属于本模块的组件，指令和管道。
2. exports：导出表，咱们在这里声明哪些能够被其余模块使用，若是咱们这里没有内容，即便咱们在别的模块import这个模块，也没法使用这个模块下面的组件。
3. imports：此为协做模块类表，咱们能够理解为咱们请其余模块来帮忙，其实咱们是请其余模块地下的一个或多个组件来帮忙，可是为了防止重复，咱们直接请组件所在模块帮忙。
4. providers：扩展功能列表，这里提供本模块所须要的Service，
5. bootstrap：定义启动组件。这个配置项也能够是一个数组，也就是说能够指定作个组件做为启动点，可是这种用法是很罕见的。咱们一般只在appmodule中使用。

其中咱们简单来理解一下providers和exports。若是咱们须要显示某组件而初始化某组件，咱们就使用imports，若是咱们须要使用其组件方法，咱们就使用providers提供。简单来讲，若是v层须要组件，咱们就使用imports提供，若是c层须要组件，咱们就使用providers提供，这里咱们没法直接提供组件，咱们经过提供某某controller间接提供组件。

组件

同模块同样，组件经过@Component来声明为他是一个组件。

@Component({

selector: 'app-student-index',

templateUrl: './student-index.component.html',

styleUrls: \['./student-index.component.sass'\]

})

1.selector：是一个 CSS 选择器，它会告诉 Angular，一旦在 HTML 中找到了这个选择器对应的标签，就建立并插入该组件的一个实例。
2.templateUrl：该组件的 HTML 模板文件相对于这个组件文件的地址。 另外，你还能够用template属性的值来提供内联的 HTML 模板。
3.styleUrls：该组件的cass文件相对于这个文件的地址。你也能够用styles属性的值来提供内联css。
若是咱们想在c层请其余组件帮忙，咱们在构造函数中声明

constructor(private studentService: StudentService,

private userService: UserService,

private appComponent: AppComponent,

private router: Router) {

}

angular会帮咱们自动注入。
咱们将全部的service都放到一个文件夹里。可是咱们没有放到一个module，这是涉及到摇树优化的问题。具体再也不多说

总结

组件：把重复的代码提取出来合并成为一个个组件，组件最重要的就是重用（复用）

模块：分属同一功能/业务的代码进行隔离（分装）成独立的模块，能够独立运行，独立管理，每一个模块有不少接口，可供调用

组件化模块化优势：开发调试效率高、可维护性强、避免阻断、版本管理更容易