效果預(yù)覽圖
1 準(zhǔn)備工作：需要配置好nginx服務(wù)赖晶，下載angular.js以及angular-ui-router.js文件
1.1 ?nginx下載及配置方法：https://www.zhihu.com/question/41430703（參見(jiàn)古塵師姐的回答）
1.2 ?angular.js和angular-ui-router.js下載：http://pan.baidu.com/s/1hsHw3uG（這是我自己上傳的百度網(wǎng)盤拙泽，也可以去angular官網(wǎng)下載）
2 效果展示
最終版（加入bootstrap，更加美觀）
實(shí)用版：（沒(méi)有引入bootstrap埋哟，但可以更好看到頁(yè)面之間的變換，幫助理清思路，下面的例子講的就是實(shí)用版）
3 ui-router路由配置
3.1 文件結(jié)構(gòu)
打開(kāi)你的網(wǎng)站根目錄罚勾，默認(rèn)是nginx下的html文件夾毅人，建立如下幾個(gè)文件夾：
把a(bǔ)ngular.js和angular-ui-router.js文件放入angular文件夾
新建app.js作為路由配置js文件放入js文件夾
新建father.html, ? childOne.html, ? ?childTwo.html, ? ? childThree.html作為路由頁(yè)面放入tpls文件夾中 ?
新建index.html文件作為主頁(yè)面。
3.2 頁(yè)面寫(xiě)法
3.2.1 主頁(yè)面的寫(xiě)法（index.html)
body中的ng-app="myApp"尖殃，代表angular可以控制body中的所有子元素丈莺；
div中的ui-view代表這個(gè)標(biāo)簽將被路由中的頁(yè)面替換掉；
然后分別引用了angular.js文件送丰，angular-ui-router.js文件缔俄，以及自己的路由配置js文件。
3.2.2 login頁(yè)面的寫(xiě)法（login.html)
給最外邊的div加了一些css樣式器躏，為了看起來(lái)更加直觀俐载，刪掉對(duì)路由也沒(méi)有影響的。
button中的ui-sref="father",這是一個(gè)非常簡(jiǎn)單的ui-sref的使用登失，當(dāng)點(diǎn)擊這個(gè)按鈕時(shí),AngularJS會(huì)重新生成網(wǎng)頁(yè)遏佣，它會(huì)查找$state中名為“father”的state，讀取這個(gè)state的url,并 替換掉ui-view中的內(nèi)容壁畸，簡(jiǎn)單來(lái)說(shuō)就是用father頁(yè)面替換掉當(dāng)前的login頁(yè)面贼急。
3.2.3 father頁(yè)面的寫(xiě)法（father.html)
father頁(yè)面中也有一個(gè)ui-view，通過(guò)這個(gè)ui-view就能夠?qū)崿F(xiàn)路由的嵌套
所以捏萍，如果要跳轉(zhuǎn)到father中的子路由頁(yè)面太抓，就應(yīng)該在ui-sref后面的路由名稱前面加上點(diǎn)號(hào)，代表跳轉(zhuǎn)到father中的ui-view,而如果是在當(dāng)前路由中跳轉(zhuǎn)令杈，就不用加點(diǎn)號(hào)走敌。
3.2.4 child頁(yè)面的寫(xiě)法（childOne.html; childTwo.html; childThree.html;)
很簡(jiǎn)單，大同小異逗噩，沒(méi)什么好說(shuō)的掉丽。
3.2.5 路由配置頁(yè)面的寫(xiě)法（app.js)
首先定義myApp模塊，并引入所依賴的模塊ui.router异雁；
然后通過(guò).config執(zhí)行路由函數(shù)捶障；
其中的$urlRouteProvider代表錯(cuò)誤的路由重定向，就是說(shuō)如果用戶輸入了錯(cuò)誤的路由地址纲刀，我們給他們定向到某個(gè)正確的路由项炼，可以使用when/和otherwise的語(yǔ)法，有興趣的的可以去自己搜索詳細(xì)了解一下示绊，這里我只使用了otherwise表示锭部，只要用戶輸錯(cuò)了路由，都給他定向到login頁(yè)面面褐。
而$stateProvider呢拌禾，代表正確的路由配置，就拿最后一行state來(lái)說(shuō)吧展哭，其中的第一個(gè)參數(shù)father.childThree和ui-sref相關(guān)聯(lián)湃窍，當(dāng)點(diǎn)擊擁有ui-sref的元素時(shí)闻蛀，就會(huì)跳轉(zhuǎn)同名的state中，而第二個(gè)參數(shù)url:代表瀏覽器中顯示的地址您市，建議寫(xiě)成跟ui-sref名稱相同的名字（不寫(xiě)成一樣的也能運(yùn)行循榆，沒(méi)太大影響，只是瀏覽器地址欄顯示的不同而已）墨坚，第三個(gè)參數(shù)templateUrl就是代表的是真實(shí)的文件地址，告訴瀏覽器哪里去獲取文件映挂，如果路由頁(yè)面只有幾個(gè)字的話也可以是寫(xiě)成是template的形式泽篮，比如template:"請(qǐng)輸入要顯示的內(nèi)容"。
4 常見(jiàn)問(wèn)題
Q：遇到報(bào)錯(cuò)怎么辦柑船？
A: 對(duì)比圖片仔細(xì)檢查你的語(yǔ)法帽撑，大小寫(xiě)有沒(méi)有寫(xiě)錯(cuò)，有沒(méi)有少寫(xiě)字母鞍时，有沒(méi)有少寫(xiě)或者多寫(xiě)標(biāo)點(diǎn)符號(hào)亏拉，文件引用都引用好了嗎，文件有沒(méi)有放進(jìn)該放的文件夾（不是開(kāi)玩笑逆巍，真的要仔細(xì)檢查及塘，認(rèn)真臉，錯(cuò)誤往往都是這幾個(gè)原因）?
Q：如果還是沒(méi)有解決呢锐极？
A：自行百度笙僚，或者下方留言共同討論
Q：按鈕太丑了，不能接受Ａ樵佟＠卟恪！翎迁！怎么才能達(dá)到完成圖的那種效果栋猖。
A：引入bootstrap.css，把login.html和father.html的背景色修改為白色汪榔，給按鈕添加class=”btn" 并更改按鈕的背景色蒲拉。
