1.前言 前幾天剛下定決心把畢業(yè)設(shè)計(jì)改造下,因?yàn)楫厴I(yè)設(shè)計(jì)算是我學(xué)習(xí)的基石,學(xué)習(xí)到的東西都盡可能的在這個(gè)平臺(tái)上施展,鍛煉自己.改造為前后端分離,前端使用angular2,后端只提供接口.便于以后的維護(hù).那么就要學(xué)習(xí)agular2了.

這里就要說(shuō)下個(gè)人觀點(diǎn)了,安利一波:我認(rèn)為每個(gè)程序員都應(yīng)該有自己的一個(gè)項(xiàng)目,一個(gè)可以讓你學(xué)習(xí)的東西能施展到上面的項(xiàng)目,可能該項(xiàng)目一開(kāi)始很簡(jiǎn)單,但是隨著你不斷的學(xué)習(xí),不斷的把新知識(shí)運(yùn)用進(jìn)去,這個(gè)項(xiàng)目就會(huì)伴隨著你的成長(zhǎng)而豐富起來(lái),給你帶來(lái)的則是更多的實(shí)戰(zhàn)經(jīng)驗(yàn).

2.angular2簡(jiǎn)介 angular2是類似全家桶組合的框架,所需要的東西幾乎都包辦了,所以開(kāi)發(fā)起來(lái)很迅速. 使用TypeScript作為開(kāi)發(fā)語(yǔ)言,對(duì)于Java和C#程序員可以快速上手,還有就是我比較喜歡強(qiáng)類型語(yǔ)言,每個(gè)變量各司其職,由其的類型來(lái)限定,開(kāi)發(fā)人員也很明確知道變量的作用. google和Microsoft支持 WebStorm對(duì)angular2的強(qiáng)大支持. ECMAScript 6入門 es6.ruanyifeng.com/ TypeScript入門 www.imooc.com/learn/763 TypeScript中文網(wǎng) www.tslang.cn/docs/tutori… 慕課網(wǎng)1小時(shí)快速上手視頻 www.imooc.com/learn/789 官方文檔 www.angular.cn/docs/ts/lat…

3.遇到的問(wèn)題 3.1滾動(dòng)監(jiān)聽(tīng) 要實(shí)現(xiàn)頁(yè)面滾動(dòng)后導(dǎo)航欄會(huì)變色的效果,如下圖(圖來(lái)自我的csdn博客,沒(méi)找到其他好圖床) 圖來(lái)自我的csdn博客

之前使用Jq是

$(window).scroll(function () { indexApp.scrollBar = parseInt(document.body.scrollTop||document.documentElement.scrollTop); }); 不打算依賴Jq,搜了點(diǎn)資料發(fā)現(xiàn)了下面兩種寫(xiě)法.

//下面這種寫(xiě)法在TS下不會(huì)有效果. 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)聽(tīng)事件使用箭頭函數(shù),這樣ng2才會(huì)管理該變量 window.addEventListener('scroll',() => { let marginTop = document.body.scrollTop|| document.documentElement.scrollTop; this.isBackColor = marginTop > 20 && this.getIsIndex(); }); } }

原因不明,猜想是var self = this;賦值操作后相當(dāng)于一個(gè)全新的變量,self并不受angular管理,導(dǎo)致刷新的變量是self中的isBackColor.

3.2http參數(shù)傳遞 按照下面代碼傳參數(shù)應(yīng)該是沒(méi)有問(wèn)題的,但是我遇到了url被編碼問(wèn)題,例如輸入1111@qq.com會(huì)被轉(zhuǎn)換為1111%40qq.com,導(dǎo)致服務(wù)端解析失敗,找了很多原因才發(fā)現(xiàn)是URLSearchParams這個(gè)對(duì)象用錯(cuò)了,angular2提供了這個(gè)對(duì)象,es6里面也有一個(gè)該對(duì)象,換成ng2中對(duì)象即可,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) 復(fù)制代碼

3.3跨域問(wèn)題 瀏覽器要求同源下才可請(qǐng)求,否則就產(chǎn)生跨域問(wèn)題.

URL 說(shuō)明 是否允許通信 www.a.com/a.js www.a.com/b.js 同一域名下 允許 www.a.com/lab/a.js www.a.com/script/b.js 同一域名下不同文件夾 允許 www.a.com:8000/a.js www.a.com/b.js 同一域名，不同端口 不允許 www.a.com/a.js www.a.com/b.js 同一域名，不同協(xié)議 不允許 www.a.com/a.js http://70.32.92.74/b.js 域名和域名對(duì)應(yīng)ip 不允許 www.a.com/a.js script.a.com/b.js 主域相同，子域不同 不允許 www.a.com/a.js a.com/b.js 同一域名，不同二級(jí)域名（同上） 不允許（cookie這種情況下也不允許訪問(wèn)） www.cnblogs.com/a.js www.a.com/b.js 不同域名 不允許 解決方案是用nginx反向代理到不同端口,模擬同一域名下不同文件夾情況.nginx監(jiān)聽(tīng)本地888端口,這個(gè)也是項(xiàng)目入口,對(duì)于帶api標(biāo)識(shí)的請(qǐng)求轉(zhuǎn)到后端服務(wù)器,對(duì)于其他請(qǐng)求則到前端服務(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;} } 復(fù)制代碼

3.4路由問(wèn)題 angular2的路由匹配規(guī)則是從根路由也就是forRoot()的這個(gè)開(kāi)始.在該處匹配尋找規(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}, ] } ];

舉例: 訪問(wèn)/,則先在根路由尋找,找到其跳轉(zhuǎn)到IndexComponent,完成任務(wù) 訪問(wèn)/aust.則先在根路由找,發(fā)現(xiàn)需要到子路由里面尋找,到子路由后,在children中發(fā)現(xiàn)被重定向到/index,那么回到根路由,找到IndexComponent完成任務(wù). 訪問(wèn)/aust/start,則先在根路由找,發(fā)現(xiàn)需要到子路由,到子路由匹配到StartComponent,完成任務(wù).

3.5組件通信 父->子:子組件使用input裝飾器,接受父組件的屬性,并且可使用ngOnChanges或則setter監(jiān)聽(tīng)變化,做額外處理. 子->父:使用output裝飾器加EventEmitter向上彈出事件到父組件,父組件監(jiān)聽(tīng)后處理. 任意組件:使用service通訊(要求service單例),service提供Observable的next發(fā)布,其他組件引用service對(duì)象subscribe該發(fā)布,那么就實(shí)現(xiàn)了信息的流動(dòng),并且是在只要訂閱了該發(fā)布的組件中都能獲取.

3.6單例? agular2的service是providers提供的,該組件如果引用了這個(gè)service,那么會(huì)先在自己的providers中尋找service,找不到則再向上找父組件,直到module.那么意味著每一個(gè)providers提供的是一個(gè)實(shí)例,旗下的組件都是享用這一個(gè)實(shí)例,那么怎么實(shí)現(xiàn)全局單例呢?很簡(jiǎn)單在根module中提供服務(wù)且其他組件不要自己providers該服務(wù).

3.7組件生命周期 組件生命周期看下面這張圖.圖中沒(méi)有onChanges(changes: SimpleChanges)方法的調(diào)用,該方法檢測(cè)到組件的輸入屬性發(fā)生變化時(shí)調(diào)用,也就是存在**@inpu**t裝飾的屬性,該屬性每次變化時(shí)會(huì)調(diào)該方法.

總結(jié)

以上是生活随笔為你收集整理的angular2学习记录-给后端程序员的经验分享的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。