Angular 常用概念

wind5o 发布于2019-08-22 14:04 / 2730人阅读

摘要：模块与装饰器设计目标就是适应大型应用的开发，模块的概念就是来组织不同的组件及服务。

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";
    }
}

自定义管道

The hero"s birthday is {{ birthday | date："yyyy.MM.dd" }}

The current pipe {{ somevalue | paramStrength："number" }}
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("组件退出时实现的方法");
  }
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92822.html

Angular 4 简单入门笔记

摘要：首先，我们需要在入口页面的中配置根路径然后创建一个路由模块路由配置在主模块中导入配置好的路由模块而在页面中需要一个容器去承载上面代码中的定义了用户点击后的路由跳转，定义该路由激活时的样式类。刚实习的时候用过AngularJS，那时候真的是连原生JavaScript都不会写，依样画葫芦做了几个管理后台。然后突然换项目了，AngularJS就不写了，感觉前前后后接触了一年多的Angula...

whlong 2019-08-20 17:44 评论0 收藏0
前端每周清单半年盘点之 Angular 篇

摘要：延伸阅读学习与实践资料索引与前端工程化实践前端每周清单半年盘点之篇前端每周清单半年盘点之与篇前端每周清单半年盘点之篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单；本文则是对于半年来发布的前端每周清单...

LeviDing 2019-08-20 18:54 评论0 收藏0
Angular单元测试系列-如何使用Jasmine进行Angular单元测试

摘要：四结论本章几乎所有的内容在单元测试经常使用到的东西特别是异步部分，三种不同异步方式并非共存的，而是需要根据具体业务而采用。否则，你会发现真难写单元测试。自此，我们算是为写单元测试打下了基础。以下是我假定那些极少或压根没写单元测试的人准备的，因此，会白话解释诸多概念性问题，同时会结合 Jasmine 与之对应的方法进行讲解。一、概念 Test Suite 测试套件，哪怕一个简单的类，...

zeyu 2019-08-21 11:43 评论0 收藏0
[译] 前端攻略-从路人甲到英雄无敌二：JavaScript 与不断演化的框架

摘要：一般来说，声明式编程关注于发生了啥，而命令式则同时关注与咋发生的。声明式编程可以较好地解决这个问题，刚才提到的比较麻烦的元素选择这个动作可以交托给框架或者库区处理，这样就能让开发者专注于发生了啥，这里推荐一波与。本文翻译自FreeCodeCamp的from-zero-to-front-end-hero-part。继续译者的废话，这篇文章是前端攻略-从路人甲到英雄无敌的下半部分，在...

roadtogeek 2019-08-19 18:25 评论0 收藏0
Angularjs学习笔记指令

摘要：自定义指令中有很多内置指令，一般都是以开头的比如等等。本文介绍的自定义指令的用法。该参数的意思是替换指令的内容，更改上面的例子。将属性绑定到父控制器的域中学习概念多指令中的参数中增加了的值和的点击函数。自定义指令 angularjs中有很多内置指令，一般都是以ng开头的；比如：ng-app,ng-click,ng-repeat等等。本文介绍angularjs的自定义指令的用法。指令...

LeexMuller 2019-08-19 18:04 评论0 收藏0