1.前言 前幾天剛下定決心把畢業設計改造下,因為畢業設計算是我學習的基石,學習到的東西都盡可能的在這個平臺上施展,鍛煉自己.改造為前后端分離,前端使用angular2,后端只提供接口.便于以后的維護.那么就要學習agular2了.

這里就要說下個人觀點了,安利一波:我認為每個程序員都應該有自己的一個項目,一個可以讓你學習的東西能施展到上面的項目,可能該項目一開始很簡單,但是隨著你不斷的學習,不斷的把新知識運用進去,這個項目就會伴隨著你的成長而豐富起來,給你帶來的則是更多的實戰經驗.

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

3.遇到的問題 3.1滾動監聽 要實現頁面滾動后導航欄會變色的效果,如下圖(圖來自我的csdn博客,沒找到其他好圖床) 圖來自我的csdn博客

之前使用Jq是

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

//下面這種寫法在TS下不會有效果. isAddBackColor(){ if (this.getIsIndex()){ var self = this; //該處使用匿名函數,而不是箭頭函數. window.addEventListener('scroll',function () { let marginTop = document.body.scrollTop|| document.documentElement.scrollTop; self.isBackColor = marginTop > 20 && self.getIsIndex(); }); } }

/**

• 判斷是否需要加背景色(有效果的)
• 使用isBackColor控制結果 */ isAddBackColor(){ if (this.getIsIndex()){ //監聽事件使用箭頭函數,這樣ng2才會管理該變量 window.addEventListener('scroll',() => { let marginTop = document.body.scrollTop|| document.documentElement.scrollTop; this.isBackColor = marginTop > 20 && this.getIsIndex(); }); } }

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

3.2http參數傳遞 按照下面代碼傳參數應該是沒有問題的,但是我遇到了url被編碼問題,例如輸入1111@qq.com會被轉換為1111%40qq.com,導致服務端解析失敗,找了很多原因才發現是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跨域問題 瀏覽器要求同源下才可請求,否則就產生跨域問題.

URL 說明 是否允許通信 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 同一域名，不同協議 不允許 www.a.com/a.js http://70.32.92.74/b.js 域名和域名對應ip 不允許 www.a.com/a.js script.a.com/b.js 主域相同，子域不同 不允許 www.a.com/a.js a.com/b.js 同一域名，不同二級域名（同上） 不允許（cookie這種情況下也不允許訪問） www.cnblogs.com/a.js www.a.com/b.js 不同域名 不允許 解決方案是用nginx反向代理到不同端口,模擬同一域名下不同文件夾情況.nginx監聽本地888端口,這個也是項目入口,對于帶api標識的請求轉到后端服務器,對于其他請求則到前端服務器.

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;} } 復制代碼

3.4路由問題 angular2的路由匹配規則是從根路由也就是forRoot()的這個開始.在該處匹配尋找規則.

根路由:

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}, ] } ];

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

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

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

3.7組件生命周期 組件生命周期看下面這張圖.圖中沒有onChanges(changes: SimpleChanges)方法的調用,該方法檢測到組件的輸入屬性發生變化時調用,也就是存在**@inpu**t裝飾的屬性,該屬性每次變化時會調該方法.

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。