一、Angular概述
基於命令行的開發方式？
①hotreload
②編譯工作
③集成了webpack打包工具。。。。
angular.cn中文angular.io正式官網angular.cn/guide/styleguide風格指南
1、what？
angular是一個Google推出的js框架，是以模塊為基本單位，模塊又可以包含組件、指令、過濾器。。
1.1版本問題
angularangular2.0以後所有的版本統稱為angular
(當前學習ng4.0)
angular.jsangular1.*統稱為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/quickstartdownload
或者直接拷貝老師提供的壓縮包
②解壓縮壓縮包，進入對應的目錄中
執行npminstall 安裝項目所需要用到的依賴
③npmstart 啟動開發服務器
方式2：
AngularCLI是一個命令行界面工具，它可以創建項目、
添加文件以及執行一大堆開發任務，比如測試、打包和發佈。
//安裝基於angular的命令工具
npminstall -g@angular/cli
//創建一個有著ng模板的項目
ngnewmy-app
//進入當前目錄下的my-app
cdmy-app
//啟動開發服務器
ngserve --open
二、Angular模板項目的啟動流程
index.html
main.js(main.ts)-->啟動一個模塊AppModule
app/app.module.ts--->啟動一個組件app/app.component.ts
HelloAngular
三、完成組件的創建和使用
1、創建組件和使用組件
①創建文件app/test/test.component.ts
②將類裝飾成一個組件類
import{Component}from'@angular/core'
@Component({
selector:'test',
template:`
itis a test
`})
exportclassDemo01Component{
}
③使用組件
app.module.ts中，
import{TestComponent}from'./test/test.component'
@NgModule({
declarations:[TestComponent]
})
②<test>
練習：（16:50-17:00）
demo02/demo02.component.ts
組件中渲染一個無序列表（5個列表）
將組件渲染AppComponent
四、Angular中常見的指令
1、循環指令Vue: <anyv-for>
Angular:
語法：
2、選擇指令Vue:<anyv-if>
angular:
五、常見指令
指令和組件的關係：
組件就是一個帶有模板的指令！！！
1、多重分支判斷
vue
v-if
v-else-if
v-else
2、屬性綁定
Vue:
<class>
<style>
Angular:
<button>
3、事件綁定
Vue
<click>
<button>Angular
語法：
舉例：
<button>
4、雙向數據綁定
Vue:
Angular:
依賴注入：
將依賴的東西注入到指定的地方，讓依賴可被使用
舉例：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-changeAngular中指令創建和使用
5.1創建
import{Directive} from'@angular/core'
@Directive({
selector:'[test]'
})
exportclassTestDirective{
}
5.2使用
app.module.ts
import{TestDirective}from'***'
@NgModule({
declarations:[TestDirective]
})
②作為標籤的屬性
<h1test>
5.3得到調用指令的元素
①import{ElementRef}from'@angular/core'
②實例化
constructor(privateel:ElementRef){}
③讀取元素
this.el.nativeElement
5.4指令調用時傳參？？
①<h1test>
②在指令類的內部
import{Input}from'@angular/core'
@Input()test="";
this.test
補充：使用生命週期的處理函數？
①引入
import{OnDestroy}from'@angular/core'
②在定義類的時候實現接口類
exportclassTestimplementsOnDestroy{
ngOnDestroy(){}
}
六、組件之間通信
Vue中組件通信的方式？
①propsdown
步驟1：發送
<sonmyname>
步驟2：接收
Vue.component('son',{
props:['myName']
})
②eventsup（子-》父）
步驟1:事件的綁定
methods:{
rcvMsg:function(msg){}
}
步驟2：事件的觸發（兒子）
this.$emit('customEvent',123);
③$refs$parent
④busAngular中組件通信？
1、propsdown
步驟1：發送
<sonuname>
步驟2：接收
import{Input}from'@angular/core'
@Input()uName="";
this.uName
2、eventsup
步驟1：事件和處理函數的綁定
定義一個方法
rcvMsg(msg){}
步驟2：觸發事件
子組件觸發
import{Output,EventEmitter} from '@angular/core'
@Output()toFatherEvent = new EventEmiiter();
this.toFatherEvent.emit('123');
我們是這樣寫Angular應用的：
用Angular擴展語法編寫HTML模板，用組件類管理這些模板，用服務添加應用邏輯，用模塊打包發佈組件與服務。
七、管道（pipe）
管道是用來對數據進行篩選、過濾、格式化
Vue中過濾器：
Vue.filter('changeSex',function(arg,arg1,arg2){
return處理後的結果
})
angular中管道：
過濾器的本質就是一個有參數有返回值的方法
語法:
{{expression|pipe1:'12':34|pipe2}}
1、內置管道
常見內置管道：
uppercase/lowercase/date/number/slice
2、自定義管道
創建一個自定義管道：
import{Pipe,PipeTransform}from'@angular/core'
@Pipe({
name:'testNG'
})
exportclassTestPipeimplementsPipeTransform{
//value是豎槓前表達式執行的結果
//args通過調用管道時，冒號後邊跟的參數
transfrom(value:any,...args:[]):any{
return‘處理後的結果’
}
}
調用：
②調用
和內置管道的用法是一樣的,同樣支持傳參、多重過濾
八、服務(依賴注入)
服務service:服務的本質是一個類，在服務類中封裝的是經常用到的數據和方法。
常見的服務：日誌類服務、心跳服務、網絡請求服務。。。
1、服務的創建和使用
創建：
import{Injectable}from'@angular/core'
@Injectable()
exportclassUserService{
constructor(){}
checkUserLogin(){returntrue}
}
使用：
①需要給服務指定provider
在組件中或者模塊中指定providers:[UserService]
②調用
import{UserService}from'./***'
constructor(privatemyService: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()
exportclassTestService{
showAlert(msg){
alert(msg);
}
}
3、 給模塊或者組件,在providers屬性對應的數組中[TestService]
4、組件中要想使用服務中的方法
import{TestService}from'***'
constructor(privatemyService: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>②創建代碼片段
創建組件
varLogin=Vue.component('login-component',{
template:`
登錄頁面
`})③配置路由詞典
newVue({
router:newVueRouter({
routes:[
{path:'/myLogin',component:Login}
]
})
})④測試
測試路由詞典中路由地址能否按照需求正確加載所需要用到的頁面
Angular：①指定容器
@Component({})exportclass**③配置路由詞典
//a-module-routing
import{Routes,RouterModule}from'@angular/router'
import{LoginComponent}from'./demo15_spa/login.component'
constroutes:Routes=[
{path:'',component:LoginComponent}
.....
]
@NgModule({
import:[RouterModule.forRoot(routes)],
exports:[RouterModule]
})
exportclassAppRoutingModule{}
找到跟模塊：
import{AppRoutingModule}from'./app.router'
@NgModule({
imports:[AppRoutingModule]
})④測試
2、在Angular實現組件間的導航的方式
Vue寫法：
①可以直接修改地址欄（內部測試）
②可以通過js
this.$router.push('目的地的路由地址')
③routerLink
<router-linkto>Angular：①直接修改地址欄②js /<router-linkto>
import{Router}from'@angular/router'
constructor(privatemyRouter:Router){}
this.myRouter.navigateByUrl('url');③<arouterlink>
補充：實現前進和後退
import{Location}from'@angular/common'
constructor(privatemyLocation: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(privatemyAR:ActivatedRoute){}
this.myAR.params.subscribe((result)=>{
//result.price
})
在Angular中實現數據傳輸的方式：
①組件間通信
②跳轉時指定參數
③與遠程服務器端通信
4、路由嵌套
可以在SPA中某個組件中，根據url嵌套其它的組件
Vue中實現方式：
①在準備嵌套其它組件的，指定一個容器<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.tsMailComponent
inbox.component.tsInboxComponent
outbox.component.tsOutboxComponent
②路由模塊
5、路由守衛
路由守衛RouteGuard，控制是否能夠訪問某一個url中所對應的組件！
鑑權的組件
用戶登錄的頁面
。。。
如何使用路由守衛：
①創建一個服務
import{Injecatable}from'@angular/core'
import{CanActivate}from'@angular/router'
@Injectable()
exportclassMailGuardimplments CanActivate{
canActivate(){
returntrue/false
}
}
②給服務指定提供商
providers:[MailGuard]
③給路由詞典中想要保護的路由指定canActivate
{
path:'mail',
canActivate:[MailGuard]
}
Vue中如果也想實現路由守衛：
constrouter =newVueRouter({...})
router.beforeEach((to,from,next)=>{
//...
})
https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
閱讀更多 渡一教育web前端開發 的文章
