前端知识点总结——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-app
cd my-app
//启动开发服务器
ng serve --open
二、Angular模板项目的启动流程
index.html
main.js (main.ts)-->启动一个模块 AppModule
app/app.module.ts ---> 启动一个组件 app/app.component.ts
Hello 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-if
v-else-if
v-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.ts
import {TestDirective} from '***'
@NgModule({
declarations:[TestDirective]
})
②作为标签的属性
<h1 test></h1>
5.3 得到调用指令的元素
①import {ElementRef} from '@angular/core'
②实例化
constructor(private el:ElementRef){}
③读取元素
this.el.nativeElement
5.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.uName
2、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/slice
2、自定义管道
创建一个自定义管道：
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:true
this.http.get(
myUrl,
{withCredentials:true}
)
服务器端：
①跨域header('Access-Control-Allow-Origin:http://localhost:3000');
②服务器允许接收凭证
header('Access-Control-Allow-Credentials:true');
服务创建和使用：
1、创建一个文件 test.service.ts
2、在文件中编写代码，装饰一个服务
@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-routing
import {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写法：
①可以直接修改地址栏（内部测试）
②可以通过js
this.$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/outbox
localhost:3000/mail/inbox
demo18_embed
mylogin.component.ts MyLoginComponent
mail.component.ts MailComponent
inbox.component.ts InboxComponent
outbox.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