Angular入门系列(三) Angular中的组件、模块与服务

组件

组件就是一个html+css+js的集合体,可以是一个按钮,一个输入框,一个弹层,或者一个页面,每个组件都有它自己外观和行为。

其中:

Css定义了组件的样式:比如字体大小,背景色

Ts定义了组件行为:比如单击发生什么,输入发生是么

Html定义了组件的内容:比如有标题或者文章内容

下面的这些都是组件

比如界面上的控件:

也可以是对话框

当然也可以是页面

 

由此可以看出,组件本质是页面上的一个区域,一个功能块,具有自己的外观和行为

并且可以相互嵌套

比如对话框组件由按钮组件和文本组件构成,页面组件由表格组件,按钮组件构成。

基于组件的好处是可以避免提高代码的重用型

 

 

模块

Angular 应用是模块化的,它拥有自己的模块化系统,称作 NgModule。 一个 NgModule 就是一个容器,用于存放一些内聚的代码块,这些代码块专注于某个应用领域、某个工作流或一组紧密相关的功能。

根据组件的概念可知, 组件才是用户可以看到的,直接操作的对象,模块就是用来组织和归类组件的一块功能。下面是一张系统模块划分图示例

app模块:整个应用的根模块,表示整个应用的功能。

订单模块:专注于订单业务和页面集合

用户模块:专注于用户模块的页面集合

重点:一个组件必须且只能属于一个模块

这里面有两层含义:

(1)组件必须属于一个模块,如果这个组件不属于任何模块,则它无法被angular加载并显示在界面上

(2)组件只能属于一个模块,比如上面的订单页面组件,属于订单模块,就不能再把他划给用户模块。

 

下面来看看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 { }

imports:  导入其他模块,表示该模块依赖其他模块的组件

declarations: 声明哪些组件属于该模块

exports:   声明哪些组件可以被导出,其他模块引入该模块时,可以使用该模块导出组件

providers:申明该模块使用哪些service(service后面将会讲解)

bootstrap:模块的启动组件(这个一般在app根模块才会使用,后面会讲解)

 

模块起到的作用:

(1)将系统的不同功能的组件分门别类

(2)确定不同模块的依赖关系,可以实现懒加载,提高启动速度

(3)可以避免组件重名带来的问题,只要保证同一个模块名字一致就行

 

服务

服务本质上是实现一定内聚功能的代码块,它常常表现为一个class

(类似于java中service层实现类,其实这部分的和spring用的同一种思想-依赖注入)

1 先定义service


@Injectable()
export class Logger {
  log(msg: any)   { console.log(msg); }
  error(msg: any) { console.error(msg); }
  warn(msg: any)  { console.warn(msg); }
}

这个@injectable()表示这个类可以被其他组件引用

(java中相当于@Service注解)

2 在模块中声明,表示该模块使用此service

@NgModule({
  .......
  providers:    [ Logger ],
  .....

})

 

3 在需要的组件中通过constructor构造器注入

export class HelloComponent {

  constructor(
    private logger: Logger) { }

  show() {
    this.logger.warn("这是一个警告");
  }
}

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值