手把手教你使用Angular之模块与组件

转自:轻样知生 - 手把手教你使用Angular之模块与组件 - Tylili

  

一、模块

        虽然Angular是一款前端框架,但在使用Typescript作为开发语言的同时,也引入了面向对象的开发方式。熟悉Java开发的同学肯定知道依赖注入的概念,幸运的是,Angular的模块化也引用了这一设计模式。模块是Angular中最大的单元,任何应用都应该有一个根模块,同时也可拥有多个模块。Angular中,通过@NgModule装饰器定义模块,示例如下:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

其中:

        declarations: 用于声明该模块下的组件、指令或管道,上例中的AppComponent便是作为组件声明的,只有在声明之后才能使用。关于组件、指令和管道的概念,将在接下来的部分单独介绍。

        exports: 用于导出该模块下的组件、指令或管道,通过导出,这些组件、指令或管道将能在其他模块中使用。

        imports: 用于导入其他模块,当模块引用其他模块之后,便可以通过引入组件的方式来使用被引用模块中的组件、指令和管道。上例中由于导入了BrowserModule模块,因此可在该模块中引入和使用BrowserModule模块中的组件、指令和管道。

        providers: 用于向该模块中注入服务,服务在注入该模块后,便可在该模块中使用。上例中便注入了Logger服务,之后无需通过构造函数便可以直接在整个模块中的组件直接使用该服务。关于服务的概念,将在接下来的部分单独介绍。

        bootstrap: 根模块的根组件 ,作为根模块的入口,只有根模块才有根组件。

        关于模块,通俗的将就是将一个应用分成若干个单元,这些单元负责完成某个类型的所有功能,并且这些单元可以相互引用。例如一个简易博客系统,可以分成根模块、用户模块、文章模块。那么文章模块可以引用用户模块,而用户模块和文章模块的入口要通过根模块,所以根模块就得引用另外两个模块。

 

二、组件

        通过@Component装饰器,便可将类定义成一个组件。组件可作为模块中的单元,可以重复使用。使用组件及其视图的方式有多种,可在页面中静态布置,也可通过路由插槽展示。@Component装饰器配置项如下:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  // template: '<h1>Welcome to {{ title }}!</h1>',
  styleUrls: ['./app.component.css'],
  // styles: 'h1{color:#fff}',
  providers: [ HttpClient ]
})
export class AppComponent {
  title = 'app';
}

其中:

        selector: 这是该组件的CSS选择器,在页面中该选择器的位置,将展示该组件的视图。

        templateUrl: HTML模板文件的相对路径,也可通过template直接提供HTML模板。HTML模板将用于提供该组件的视图。

        styleUrls: 样式文件的相对路径,也可通过styles直接提供样式。该样式仅对该组件的视图有效。

        providers: 服务列表,将向该组件注入列表中的服务,此后便可使用该服务了。上例中的Angular被告知,在该组件的构造函数中需要一个HttpClient实例,通过Angular创建了一个HttpClient实例,并直接注入到组件中使用。

发布了9 篇原创文章 · 获赞 3 · 访问量 1万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览