Angular 常用概念

2024年3月29日 196次阅读 来源: leilei

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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞