接手了一個(gè)angular1.x的前端環(huán)境，以前只做過少量的前端跟vuejs開發(fā)赖欣，對(duì)大angular有點(diǎn)陌生转绷。所以先從讀文檔與配置開發(fā)環(huán)境做起；
1.前言
讀文檔 你需要有一個(gè)網(wǎng)絡(luò)終端設(shè)備（能上網(wǎng)的）網(wǎng)絡(luò)搜索一下angular笛钝。。愕宋。因各人的閱讀風(fēng)格不同 我在此沒有推薦玻靡；大量angular 相關(guān)資料讓新手有點(diǎn)著急啊 ，有個(gè)大神曾說過 面對(duì)新的知識(shí) 第一次接觸能掌握百分之二十就是有一定成果了中贝。因此 我總評(píng)判自己讀完之后是否理解了 20%囤捻；答案是肯定的，但是 很多時(shí)候就停留在 20% 沒有再次學(xué)習(xí)啦邻寿。
2.配置angular開發(fā)環(huán)境
項(xiàng)目前端使用angular1.x+angularRoute+jquery+bootstrap等技術(shù)開發(fā)蝎土，開發(fā)時(shí)間較早，項(xiàng)目完成后較少有維護(hù) 所以需要自己摸索绣否。首先是開發(fā)環(huán)境誊涯，因接觸過一點(diǎn) vuejs 比較喜歡vue的所見即所得的開發(fā)方式，于是決定將此angular項(xiàng)目配置成此開發(fā)方式蒜撮；
配置開發(fā)環(huán)境自動(dòng)更新的主要依賴包：
grunt（https://www.gruntjs.net/api/grunt）
grunt-contrib-connect （一個(gè)靜態(tài)服務(wù)器）
grunt-contrib-watch（配置監(jiān)聽）
serve-index(用于創(chuàng)建靜態(tài)文件服務(wù)器)
serve-static(用于啟用目錄瀏覽)
connect-livereload（監(jiān)控你指定的目錄中文件暴构，如果有文件被更改，自動(dòng)觸發(fā)瀏覽器刷新頁面）
connect-history-api-fallback（啟用history）
因配置過vuejs開發(fā)環(huán)境段磨，所以本地Mac中帶有 nodejs環(huán)境和npm工具等取逾，所以直接download了項(xiàng)目 直接 進(jìn)入項(xiàng)目目錄下 npm install 了pachage.json中的依賴包，項(xiàng)目中自帶了 grunt工具苹支。因此 配置開發(fā)環(huán)境使用的包都是基于grunt的菌赖；
安裝完 angular 和angular-route等項(xiàng)目依賴之后就要進(jìn)行 所見即所得環(huán)境的開發(fā)環(huán)境配置了，自動(dòng)搭建靜態(tài)文件服務(wù)器沐序，不需在自己電腦上搭建Web服務(wù)器 也不需要瀏覽器插件：
1）首先將上述依賴包 npm 安裝琉用；
執(zhí)行命令：npm install --save-dev grunt-contrib-watch grunt-contrib-connect connect-livereload?serve-index?serve-static?connect-history-api-fallback
2）修改Gruntfile.js文件：
配置定義中間件
配置grunt initConfig
注冊任務(wù)
然后運(yùn)行 grunt? live 啟動(dòng)任務(wù)堕绩，如果沒有報(bào)錯(cuò)配置就完成了；
邑时。
奴紧。
。
然而并不是
3.遇到的問題
配置此開發(fā)環(huán)境的時(shí)候遇到問題有：CSP晶丘、404黍氮、livereload錯(cuò)誤、403浅浮、CORS沫浆、502（后端問題）等
CSP：
grunt live后總報(bào)Content-Security-Policy 錯(cuò)誤，網(wǎng)上找了很多解決辦法滚秩，很多建議在 入口文件 一般為index.html中的head中加入meta標(biāo)簽類似于
<metahttp-equiv="Content-Security-Policy"content="default-src 'self'; img-src https://*; child-src 'none';">
但是并沒有什么用专执，顯然我的問題不在這里。經(jīng)過不斷查找終于 在自己的 Chrome中安裝了一個(gè) disable CSP的插件郁油，并開啟此插件 問題就解決了本股， oh-my-god
livereload報(bào)錯(cuò)
經(jīng)過檢查端口發(fā)現(xiàn)livereload的端口并未啟動(dòng)，導(dǎo)致報(bào)錯(cuò) 直接手動(dòng) grunt watch 啟動(dòng)了就好了桐腌，然而發(fā)現(xiàn)的過程是漫長的
403
這個(gè)多半是權(quán)限問題拄显，找了運(yùn)維同事協(xié)助就解決了。
CORS
這個(gè)還是蠻高大上的案站，就是跨域? 躬审；跨域真是個(gè)老問題 在vue中 直接配置一下Dev啟動(dòng) 就可以解決了，但是在angular中如何解決呢蟆盐，首先我沒有angular-cli 后端的NGINX配置也沒有成功 不知道為何盒件；并且發(fā)現(xiàn)前端代碼已經(jīng)存在了$httpProvider.defaults.useXDomain =true; 為什么還是會(huì)出現(xiàn)呢?
很久很久以后我看到一篇關(guān)于Chrome跨域的文章，并且執(zhí)行如下操作
1) 新建一個(gè)文件夾?/tmp/mychrome
2) 在終端執(zhí)行
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/tmp/mychrome
彈出對(duì)話框選擇啟用不安全模式舱禽，我就不截圖了
后來在運(yùn)行 grunt live的時(shí)候終于沒有 跨域了，我也是熱淚盈眶恩沽。雖然關(guān)閉瀏覽器在打開的時(shí)候又不是 非安全模式了誊稚，但是我回果斷選擇不關(guān)閉瀏覽器；
404
這是我想說的重點(diǎn)罗心，404 很神奇 一個(gè)運(yùn)行 grunt live 自動(dòng)打開 瀏覽器 更改代碼后自動(dòng)刷新就404的問題里伯；我發(fā)現(xiàn)代碼中已經(jīng)啟用了所謂的$locationProvider.html5Mode(true); 和在index.html中已經(jīng)存在了<base href="/"> 并發(fā)現(xiàn)自己的問題是livereload自動(dòng)重載后查不到路由的問題，并不是大部分的那種去掉錨點(diǎn)問題渤闷；
于是我重新定位問題疾瓮，終于發(fā)現(xiàn)了connect-history-api-fallback；安裝之后 并在中間件中添加飒箭，就不會(huì)出現(xiàn)刷新找不到路徑了狼电；此問題的原因大致在于 重新刷新是angular無法定位自己的管理路由問題蜒灰；
502
這個(gè)是后臺(tái)接口問題，跟前端沒什么關(guān)系了肩碟。我終于可以去看后臺(tái)拉强窖；真是淚流滿面的 自強(qiáng)不息 新手無指導(dǎo)angular入門呀。削祈。翅溺。
