Angular认识模块与组件的概念与区别

前言

我们都知道一个应用通常会有多个(Module)组成。而我们又会在一个下写多个,让我们了解一些模块与的基本构造吧。

让大家对Angular的模块和组件有一个清晰的认识!

模块

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

Angular认识模块与组件的概念与区别

如图所示,我们以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,这是涉及到摇树优化的问题。具体不再多说

总结

组件:把重复的代码提取出来合并成为一个个组件,组件最重要的就是重用(复用)

模块:分属同一功能/业务的代码进行隔离(分装)成独立的模块,可以独立运行,独立管理,每个模块有很多接口,可供调用

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