前端知识点总结——Angular

一、Angular概述

基于命令行的开发方式？

①hot reload
②编译工作
③集成了webpack打包工具
。。。。

angular.cn 中文
angular.io 正式官网
angular.cn/guide/styleguide 风格指南

1、what？

angular是一个Google推出的js框架，是以模块为基本单位，模块又可以包含组件、指令、过滤器。。1.1 版本问题angular angular2.0以后所有的版本统称为angular(当前学习ng4.0)angular.js angular1.* 统称为angular.js（http://www.runoob.com/angularjs/angularjs-tutorial.html）1.2 版本之间的区别①新版本是有组件的概念的②老版本是$scope和controller为主③angular引入了rxjs④angular采用ts（typescript是es6的超集，是由微软和谷歌） ts是一种强类型检查机制的语言⑤angular可读性、提高了代码的复用率、维护成本变低。。。

2、where

    可以使用支持angular的Ionic框架来实现移动端的开发，直接使用angular来实现pc端的开发实现操作比较频繁的SPA

3、why

①遵循w3c所推出的webComponent标准（组件化）
②代码具有更好的可读性和可维护性、
③引入了更多的高效率的工具 ，比如rxjs\immutable.js。。。， 让代码的编译、部署更简单
④ts --》 健壮

4、how

angular的开发整体框架，是有8大组成部分构成搭建环境的方式：
方式1：①下载quickstart-master.zip压缩包https://github.com/angular/quickstart download或者 直接拷贝老师提供的压缩包②解压缩 压缩包，进入对应的目录中执行npm install 安装项目所需要用到的依赖③npm start 启动开发服务器方式2：Angular CLI是一个命令行界面工具，它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。//安装基于angular的命令工具npm install -g @angular/cli//创建一个有着ng模板的项目ng new my-app//进入当前目录下的my-appcd my-app//启动开发服务器ng serve --open

二、Angular模板项目的启动流程

index.htmlmain.js (main.ts)-->启动一个模块 AppModuleapp/app.module.ts ---> 启动一个组件 app/app.component.tsHello Angular

三、完成组件的创建和使用

1、创建组件和使用组件①创建文件 app/test/test.component.ts②将类装饰成一个组件类import {Component} from '@angular/core'@Component({selector:'test',template:`<h1>it is a test</h1>`})export class Demo01Component{}③使用组件①到模块中声明app.module.ts中，import {TestComponent} from './test/test.component'@NgModule({declarations:[TestComponent]})②<test></test>练习：（16:50 - 17:00）demo02/demo02.component.ts组件中渲染一个无序列表（5个列表）将组件渲染AppComponent

四、Angular中常见的指令

1、循环指令
Vue :  <any v-for="tmp in list"></any>Angular: 语法：<any *ngFor="let tmp of list"></any><any *ngFor="let tmp of list;let myIndex=index"></any>2、选择指令
Vue: <any v-if="表达式"></any>
angular:<any *ngIf="表达式"></any>

五、常见指令

指令和组件的关系：

组件就是一个带有模板的指令！！！

1、多重分支判断

vue v-ifv-else-ifv-else<div [ngSwitch]="answer"><p *ngSwitchCase="'a'"></p><p *ngSwitchDefault></p>
</div>

2、属性绑定

Vue:<img v-bind:src="imgUrl"/><img :src="imgUrl"/><button :class="{myHightlight:true}"></button><h1 :style="{backgroundColor:myBG}"></h1>Angular:<img [src]="imgUrl"/><button [ngClass]="{myHightlight:true}"></button><h1 [ngStyle]="{backgroundColor:myBG}"></h1>

3、事件绑定

Vue<button v-on:click="handleClick"></button><button @click="handleClick"></button>
Angular语法：<any (eventName)="eventHandler()"></any>举例：<button (click)="handleClick()"></button>

4、双向数据绑定

Vue:<input v-model="addr"/>
Angular:<input [(ngModel)]="addr"/>依赖注入：将依赖的东西注入到指定的地方，让依赖可被使用举例：AppModule依赖于FormsModule,只需要在AppModule的imports数组写上FormsModule名称就可以使用FormsModule所提供的东西。好处：解耦，降低了耦合度Angular中如果想要监听双向数据绑定数据的变化，提供一个事件 ngModelChange注意事项：
①Angular中如果要想使用双向数据绑定，就必须指定模块依赖于FormsModule
②使用ngModelChange事件时，通过$event去传递用户当前所输入的信息（ngModelChange）="handleChange($event)"

内置的指令：

*ngFor
*ngIf
*ngSwitchCase
*ngSwitchDefault
ngSwitch
[]
()
[(ngModel)]
{{}}

5、自定义指令

Vue中自定义指令：Vue.directive('change',{bind:function(el,binding){},update:function(){},unbind:function(){}});v-change
Angular中指令创建和使用5.1 创建import {Directive}    from '@angular/core'@Directive({selector:'[test]'})export class TestDirective{}5.2 使用①到模块中声明app.module.tsimport {TestDirective} from '***'@NgModule({declarations:[TestDirective]})②作为标签的属性<h1 test></h1>5.3 得到调用指令的元素①import {ElementRef} from '@angular/core'②实例化constructor(private el:ElementRef){}③读取元素this.el.nativeElement5.4 指令调用时传参？？①<h1 test="123"></h1>②在指令类的内部import {Input} from '@angular/core'@Input() test="";this.test补充：使用生命周期的处理函数？①引入import {OnDestroy} from '@angular/core'②在定义类的时候 实现接口类export class Test implements OnDestroy{ngOnDestroy(){}}

六、组件之间通信

Vue中组件通信的方式？①props down步骤1：发送<son myName="zhangsan"></son>步骤2：接收Vue.component('son',{props:['myName']})②events up（子-》父）步骤1: 事件的绑定methods:{rcvMsg:function(msg){}}<son @customEvent="rcvMsg"></son>步骤2：事件的触发（儿子）this.$emit('customEvent',123);③$refs $parent④bus
Angular中组件通信？1、props down步骤1：发送<son uName="zhangsan"></son>步骤2：接收import {Input} from '@angular/core'@Input() uName="";this.uName2、events up步骤1：事件和处理函数的绑定定义一个方法rcvMsg(msg){}<son (toFatherEvent)="rcvMsg($event)"></son>步骤2：触发事件子组件触发import {Output,EventEmitter} from '@angular/core'@Output() toFatherEvent = new EventEmiiter();this.toFatherEvent.emit('123');

我们是这样写 Angular 应用的：

用 Angular 扩展语法编写 HTML 模板， 
用组件类管理这些模板，
用服务添加应用逻辑， 
用模块打包发布组件与服务。

七、管道（pipe）

管道是用来对数据进行筛选、过滤、格式化Vue中过滤器：<any>{{expression | filter(1,2) | filter2 }}</any>Vue.filter('changeSex',function(arg,arg1,arg2){return 处理后的结果})angular中管道：过滤器的本质就是一个有参数有返回值的方法语法:<any>{{expression | pipe1:'12':34 | pipe2}}</any>1、内置管道常见内置管道：uppercase/lowercase/date/number/slice2、自定义管道创建一个自定义管道：import {Pipe,PipeTransform} from '@angular/core'@Pipe({name:'testNG'})export class TestPipe implements PipeTransform {//value是竖杠前表达式执行的结果//args通过调用管道时，冒号后边跟的参数transfrom(value:any,...args:[]):any{return ‘处理后的结果’}}调用：①声明到模块中先引入再声明②调用和内置管道的用法是一样的,同样支持传参、多重过滤

八、服务 (依赖注入)

服务 service:服务的本质是一个类，在服务类中封装的是经常用到的数据和方法。常见的服务：日志类服务、心跳服务、网络请求服务。。。1、服务的创建和使用创建：import {Injectable} from '@angular/core'@Injectable()export class UserService {constructor(){}checkUserLogin(){return true}}使用：①需要给服务指定provider在组件中或者模块中指定providers:[UserService]②调用import {UserService} from './***'constructor(private myService:UserService){}this.myService.checkUserLogin()2、如何封装一个网络请求的服务①创建服务的文件②在服务中封装一个方法sendRequest(myUrl:string){return  this.http.get(myUrl).map((response)=>response.json())}③调用之前 首先指定providers④到组件中，先引入，再实例化，再调用this.myHS.sendRequest().subscribe((result)=>{//result就是服务器端返回的结果！})与服务器端通信如果涉及的session，angular需要这么处理：客户端①发起请求 withCredentials:truethis.http.get(myUrl,{withCredentials:true})服务器端：①跨域header('Access-Control-Allow-Origin:http://localhost:3000');②服务器允许接收凭证header('Access-Control-Allow-Credentials:true');服务创建和使用：1、创建一个文件 test.service.ts2、在文件中编写代码，装饰一个服务@Injectable()export class TestService{showAlert(msg){alert(msg);}}3、    给模块或者组件,在providers属性对应的数组中 [TestService]4、组件中要想使用服务中的方法import {TestService} from '***'constructor(private myService:TestService){}this.myService.showAlert()

Angular中开发模式：

我们是这样写 Angular 应用的：
用 Angular 扩展语法编写 HTML 模板， 
用组件类管理这些模板，
用服务添加应用逻辑， 
用模块打包发布组件与服务。然后，我们通过引导根模块来启动该应用。
Angular 在浏览器中接管、展现应用的内容，并根据我们提供的操作指令响应用户的交互。

在Angular开发时，八大组成部分：

1、模块
2、组件
3、模板 自带的html标签+指令、绑定相关的ng的语法
4、元数据 告诉 Angular 如何处理一个类。
5、数据绑定{{}} () [] [(ngModel)]
6、指令 三大类：组件、结构型、属性型
7、服务封装一些数据和方法
8、依赖注入就是将依赖的服务、模块注入到指定组件、模块中取使用，提供了一种新的实例化的方式（解耦）

九、路由模块

路由模块：建立起url和页面之间的映射关系
1、实现SPA的基本步骤

Vue：
实现一个SPA基本思路：
①指定一个容器<router-view></router-view>
②创建代码片段创建组件var Login = Vue.component('login-component',{template:`<h1>登录页面</h1>`})
③配置路由词典new Vue({router:new VueRouter({routes:[{path:'/myLogin',component:Login}]})})
④测试测试路由词典中 路由地址能否按照需求 正确加载所需要用到的页面Angular：
①指定容器<router-outlet></router-outlet>
②创建组件 （声明）@Component({}) export class **
③配置路由词典//a-module-routingimport {Routes,RouterModule} from '@angular/router'import {LoginComponent} from './demo15_spa/login.component'const routes:Routes = [{path:'',component:LoginComponent}.....]@NgModule({import:[RouterModule.forRoot(routes)],exports:[RouterModule]})export class AppRoutingModule{}找到跟模块：import {AppRoutingModule} from './app.router'@NgModule({imports:[AppRoutingModule]})
④测试

2、在Angular实现组件间的导航的方式

Vue写法：①可以直接修改地址栏（内部测试）②可以通过jsthis.$router.push('目的地的路由地址')③routerLink<router-link to="目的地的路由地址"></router-link>
Angular：
①直接修改地址栏
②js    import {Router} from '@angular/router'constructor(private myRouter:Router){}this.myRouter.navigateByUrl('url');
③ <a routerLink="地址"></a>补充：实现前进和后退import {Location} from '@angular/common'constructor(private myLocation:Location){}this.myLocation.back();                this.myLocation.forward();

3、参数的传递

Angular:3.1 发送this.myRouter.navigateByUrl('myOC/123');3.2 接收① 配置接收方的路由地址{path:'myOC'} ==> {path:'myOC/:price'}② 接收参数import {ActivatedRoute} from '@angular/router'constructor(private myAR:ActivatedRoute){}this.myAR.params.subscribe((result)=>{//result.price})在Angular中 实现数据传输的方式：①组件间通信②跳转时指定参数③与远程服务器端通信

4、路由嵌套

    可以在SPA中某个组件中，根据url嵌套其它的组件Vue中实现方式：①在准备嵌套其它组件的，指定一个容器 <router-view></router-view>②配置路由词典{path:'',component:MailComponent,children:[{path:'inbox',component:***}]}Angular中实现方式：①指定容器router-outlet②配置子路由{path:'mail',children:[...]}总结：在Angular中实现一个支持路由嵌套的SPA，导航到对应的子路由对应的页面时，必须在携带父组件的地址localhost:3000/mail/outboxlocalhost:3000/mail/inboxdemo18_embedmylogin.component.ts  MyLoginComponentmail.component.ts MailComponentinbox.component.ts InboxComponentoutbox.component.ts OutboxComponent①完成组件的创建和声明②路由模块

5、路由守卫

路由守卫 RouteGuard，控制是否能够访问某一个url中所对应的组件！鉴权的组件用户登录的页面。。。如何使用路由守卫：①创建一个服务import {Injecatable} from '@angular/core'import {CanActivate} from '@angular/router'@Injectable()export class MailGuard implments CanActivate{canActivate(){return true/false}}②给服务指定提供商providers:[MailGuard]③给路由词典中想要保护的路由指定canActivate{path:'mail',canActivate:[MailGuard]}Vue中如果也想实现路由守卫：const router = new VueRouter({ ... })router.beforeEach((to, from, next) => {// ...})https://router.vuejs.org/zh-cn/advanced/navigation-guards.html