我為什么最后選擇了angualr2
angular2是類似全家桶組合的框架,所需要的東西幾乎都包辦了,所以開發(fā)起來很迅速.
使用TypeScript作為開發(fā)語言,對于Java和C#程序員可以快速上手,還有就是我比較喜歡強類型語言,每個變量各司其職,由其的類型來限定,開發(fā)人員也很明確知道變量的作用.
google和Microsoft支持
WebStorm對angular2的強大支持.
一篇安利文章我為什么選擇Angular 2？
一些學(xué)習(xí)資料
- ECMAScript 6入門 http://es6.ruanyifeng.com/
- TypeScript入門 http://www.imooc.com/learn/763
- TypeScript中文網(wǎng) https://www.tslang.cn/docs/tutorial.html
- 慕課網(wǎng)1小時快速上手視頻 http://www.imooc.com/learn/789
- 官方文檔 https://www.angular.cn/docs/ts/latest/cli-quickstart.html
遇到的問題
滾動監(jiān)聽
要實現(xiàn)頁面滾動后導(dǎo)航欄會變色的效果,如下圖
之前使用Jq是
$(window).scroll(function () {
indexApp.scrollBar =
parseInt(document.body.scrollTop||document.documentElement.scrollTop);
});
不打算依賴Jq,搜了點資料發(fā)現(xiàn)了下面兩種寫法.
//下面這種寫法在TS下不會有效果.
isAddBackColor(){
if (this.getIsIndex()){
var self = this;
//該處使用匿名函數(shù),而不是箭頭函數(shù).
window.addEventListener('scroll',function () {
let marginTop = document.body.scrollTop|| document.documentElement.scrollTop;
self.isBackColor = marginTop > 20 && self.getIsIndex();
});
}
}
/**
* 判斷是否需要加背景色(有效果的)
* 使用isBackColor控制結(jié)果
*/
isAddBackColor(){
if (this.getIsIndex()){
//監(jiān)聽事件使用箭頭函數(shù),這樣ng2才會管理該變量
window.addEventListener('scroll',() => {
let marginTop = document.body.scrollTop|| document.documentElement.scrollTop;
this.isBackColor = marginTop > 20 && this.getIsIndex();
});
}
原因不明,猜想是var self = this;
賦值操作后相當(dāng)于一個全新的變量,self并不受angular管理,導(dǎo)致刷新的變量是self中的isBackColor.
http參數(shù)傳遞
按照下面代碼傳參數(shù)應(yīng)該是沒有問題的,但是我遇到了url被編碼問題,例如輸入1111@qq.com
會被轉(zhuǎn)換為1111%40qq.com
,導(dǎo)致服務(wù)端解析失敗,找了很多原因才發(fā)現(xiàn)是URLSearchParams
這個對象用錯了,angular2提供了這個對象,es6里面也有一個該對象,換成ng2中對象即可,import {URLSearchParams} from "@angular/http";
let urlParams = new URLSearchParams();
urlParams.set('search',search);
urlParams.set('order',order);
urlParams.set('pageNum',pageNum.toString());
urlParams.set('pageSize',pageSize.toString());
return this.http.get(Config.url_problem_stage + stage,{params:urlParams}).toPromise()
.then(response => response.json())
.catch(LogService.handleError)
3.3跨域問題
瀏覽器要求同源下才可請求,否則就產(chǎn)生跨域問題.
解決方案是用nginx反向代理到不同端口,模擬同一域名下不同文件夾情況.nginx監(jiān)聽本地888端口,這個也是項目入口,對于帶api標識的請求轉(zhuǎn)到后端服務(wù)器,對于其他請求則到前端服務(wù)器.
server {
listen 8888;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location /api {
proxy_pass http://127.0.0.1:8080;
}
location / {
proxy_pass http://127.0.0.1:4200;
}
}
路由問題
angular2的路由匹配規(guī)則是從根路由也就是forRoot()
的這個開始.在該處匹配尋找規(guī)則.
根路由:
export const appRoutes: Routes = [
{
path:'',
component: IndexComponent,
pathMatch:'full'
},
{
path:'aust',
loadChildren:'./content/content.module#ContentAndAsideModule'
},
{
path:'index',
component: IndexComponent,
},
{
path:'**',
loadChildren:'./content/content.module#ContentAndAsideModule'
},
];
子路由:
export const childRouter : Routes = [
{
path: '',
component:ContentAndAsideComponent,
children:[
{path:'',redirectTo:'/index',pathMatch:'full'},
{path:'start',component:StartComponent},
]
}
];
舉例:
訪問/,則先在根路由尋找,找到其跳轉(zhuǎn)到IndexComponent,完成任務(wù)
訪問/aust.則先在根路由找,發(fā)現(xiàn)需要到子路由里面尋找,到子路由后,在children中發(fā)現(xiàn)被重定向到/index,那么回到根路由,找到IndexComponent完成任務(wù).
訪問/aust/start,則先在根路由找,發(fā)現(xiàn)需要到子路由,到子路由匹配到StartComponent,完成任務(wù).
3.5組件通信
父->子:子組件使用input裝飾器,接受父組件的屬性,并且可使用ngOnChanges或則setter監(jiān)聽變化,做額外處理.
子->父:使用output裝飾器加EventEmitter向上彈出事件到父組件,父組件監(jiān)聽后處理.
任意組件:使用service通訊(要求service單例),service提供Observable的next發(fā)布,其他組件引用service對象subscribe該發(fā)布,那么就實現(xiàn)了信息的流動,并且是在只要訂閱了該發(fā)布的組件中都能獲取.
單例?
agular2的service是providers提供的,該組件如果引用了這個service,那么會先在自己的providers中尋找service,找不到則再向上找父組件,直到module.那么意味著每一個providers提供的是一個實例,旗下的組件都是享用這一個實例,那么怎么實現(xiàn)全局單例呢?很簡單在根module中提供服務(wù)且其他組件不要自己providers該服務(wù).
組件生命周期
組件生命周期看下面這張圖.圖中沒有onChanges(changes: SimpleChanges)
方法的調(diào)用,該方法檢測到組件的輸入屬性發(fā)生變化時調(diào)用,也就是存在@input裝飾的屬性,該屬性每次變化時會調(diào)該方法.
