Angular 常用概念

1.模块与装饰器

Angular设计目标就是适应大型应用的开发,模块的概念就是来组织不同的组件及服务。一个大型应用的最终形态就是各种不同的模块的组合

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { HeroService } from './hero.service';

//NgModule装饰器将AppModule类标记为Angular组件
@NgModule({ 
   //装饰器就是一个函数,作用是将元数据添加到紧跟在后面的类、类成员(属性、方法)和函数参数
  imports:      [ BrowserModule ], //导入本模块中所需要的其他非自定义的模块
  providers:    [ HeroService ],  //服务模块,并自动加入到全局的服务列表中
  declarations: [ AppComponent ], //声明本模块中的组件,指令和管道
  bootstrap:    [ AppComponent ]  //根组件,
})
export class AppModule { }  //导出的根模块

2.组件、指令、管道

组件在Angular中处于中心地位,但也是指令的一种,我把组件看做是含有模板的指令,管道就是anuglarjs中的过滤器,具体有哪几种,可以参考Anugular的官方API Angular内置管道
自定义组件

import { Component } from '@angular/core';

@Component({ //@Component装饰器将HeroDetailComponent类标记为Angular组件
    //内部的数据称为元数据,其它元数据装饰器用类似的方式来指导 Angular 的行为。 
    //例如@Injectable、@Input、@Output等
  selector: 'hero-detail',
  templateUrl: '../somewhere.html',
  styleUrls: ['./any.css']
})

export class HeroDetailComponent {
    //仅仅是一个类,看不到Anugular框架的影子
}

自定义指令

//指令有属性型指令和结构型指令 和组件
import { Directive, ElementRef, Input } from '@angular/core';

//ElementRef注入到构造函数中,这样指令才能访问DOM
//Input 将数据传入指令中
@Directive({ selector: '[appHighlight]' })
export class HighlightDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'yellow';
    }
}

自定义管道

<p>The hero's birthday is {{ birthday | date:'yyyy.MM.dd' }}</p>

<p>The current pipe {{ somevalue | paramStrength:'number' }}</p>
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'paramStrength'})
export class ExponentialStrengthPipe implements PipeTransform {
//implements是一种类实现某个接口的写法,这样就可以使用对应接口里面的方法,如这里的transform
  transform(value: number, params: string): number {
    //value是输入值,params是传入的参数
    //value对应上面的somevalue, params对应上面的number
    let exp = parseFloat(exponent);
    return value + exp ;
  }
}

3.服务

服务可以为对数据的获取和各种处理,组件就是服务的消费者,通过依赖注入在组件中使用服务

import { Injectable } from '@angular/core';
import { Logger } from '../logger.service';

@Injectable({})
export class HeroService {
  //服务里面注入其他的服务,通过依赖注入,相当于执行了new的操作,又没有副作用
  constructor(private logger: Logger){}
}

4.生命周期

就是被Anuglar管理的组件的生命周期钩子,对应的有钩子里面的方法

import { OnInit, OnDestroy } from '@angular/core';

//OnInit接口里面的ngOnInit方法
export class PeekABoo implements OnInit, OnDestroy {
  constructor() { }

  // implement OnInit's `ngOnInit` method
  ngOnInit() { 
    console.log("组件初始化");
  }

  ngOnDestroy(){
    console.log("组件退出时实现的方法");
  }
}
    原文作者:leilei
    原文地址: https://segmentfault.com/a/1190000013011414
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞