最近在學習AngularJs,學習一門技術最好的方式就是實踐。出於這樣的目的，我準備從實現一個聊天室爲切入點完成angularJs的學習。本教程會持續更新，逐步的帶領大家用angularJs完成一個網頁版的聊天室。我們需要搭起一個框架，在本項目中我們會使用到ui-router這個組件承擔起路由的工作。
目前項目的文件結構（隨着項目的進行還會不斷的擴充）
index.html 項目的入口文件，tpls 文件夾用來存放html模板文件, js 文件夾存放 js文件。
index.html 代碼
<!DOCTYPE html> <html lang="en" ng-app="pchat"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 引入angularjs--> <!--<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>--> <script src="js/angular.min.js"></script> <!-- 引入ui-router --> <script src="js/angular-ui-router.js"></script> <!-- 引入app.js--> <script src="js/app.js"></script> </head> <body> <div ui-view="main"></div> </body> </html>
在index.html 裏定義了模塊pchat，引入了angularJs的核心js文件，ui-router組件庫，和 app.js（app.js 是項目本身的代碼 下面會介紹到）。 body 標籤裏面 包含了一個 div 用來顯示 名稱爲 main 的 view 。
app.js 代碼
var pchat = angular.module('pchat', ["ui.router"]);
pchat.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state("login", {
url: "/login",
views: {
"main": {
templateUrl: 'tpls/login.html',
}
}
});
});
tpls/login.html （模板文件）
<div> login page </div>
app.js 裏 通過 angular.module 的方法實例化了pchat模塊（ 方法的第一個參數是模塊的名稱和之前的index.html裏的模塊的名稱對應，第二個參數是模塊依賴於其他模塊的列表，這裏pchat模塊依賴ui-router模塊）， 並且通過依賴注入的方式注入了ui-router。 pchat模塊通過$stateProvider （$stateProvider 是由 ui-router 組件提供的）配置了一個路由地址爲/login 其狀態爲login ，login 狀態定義了一個名稱爲 main 的 view （和之前index.html名稱對應上），它的模板文件tpls/login.html。
我們運行一下代碼 看看是什麼效果
可以看到 路由爲 /login的鏈接 輸出了 login page , ui-router的路由就是這樣使用。
接着我們對app.js做一些改動加入master和maser.home的狀態路由規則。（master和master.home）爲父子路由。
app.js 代碼
var pchat = angular.module('pchat', ["ui.router"]);
pchat.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state("login", {
url: "/login",
views: {
"main": {
templateUrl: 'tpls/login.html',
}
}
}).state("master", {
url:"/master",
views: {
"main": {
templateUrl: 'tpls/master.html'
}
}
}).state("master.home", {
url: "/home",
views: {
"content": {
templateUrl: 'tpls/home.html'
}
},
});
});
tpls/master.html
<div>
master
<div ui-view="content"></div>
</div>
tpls/home.html
<div>home</div>
訪問以下/master
可以看到 /master 和之前一樣被路由到 tpls/master.html 打印出master。 名稱 content 爲 view 的 視圖並沒有顯示出來 。
在來訪問以下 /master/home（ master.home 是繼承 與 master）
由於master.home 繼承與master ，先輸出了master狀態下的 tpls/master.html 模板文件，之後輸出了 tpls/home.html（對應 名稱爲 content的 view ）模板文件。
最後我們在app.js配置中加上一個默認的路由
$urlRouterProvider.otherwise('/master/home');這樣我們這個項目的登錄頁面和主頁的框架就搭建完成，之後只需要將模板裏面的文字替換成html頁面就可以了。
持續更新中……………..
原文地址: Witty Blog