AngularJS 路由機制是由ngRoute模塊提供，它允許我們將視圖分解成布局和模板視圖，根據url變化動態的將模板視圖加載到布局中，從而實現單頁面應用的頁面跳轉功能。實現無刷新的視圖切換。
首先需要在頁面引入angular和angular-route，注意要在angular-route之前引入angular，這主要是因為angular-route.js需要傳入window.angular這個參數，而這個參數只有在加載完angular才會出現。
單頁Web應用由于沒有后端URL資源定位的支持，需要自己實現URL資源定位。AngularJs使用瀏覽器URL”#”后的字符串來定位資源。
路由機制并非在AngularJS核心文件內，你需要另外加入angular-route.min.js腳本。并且創建mainApp模塊的時候需要添加對ngRoute的依賴。
服務routePRovider用來定義一個路由表，即地址欄與視圖模板的映射。我們會用到里面的when和otherwise兩個方法，otherwise：默認界面。
服務routeParams保存了地址欄中的參數，例如{id : 1, name : ‘tom’}，也提供了通配某類地址的能力。
服務route完成路由匹配，并且提供路由相關的屬性訪問及事件，如訪問當前路由對應的controller。
指令ngView用來在主視圖中指定加載子視圖的區域，它會創建自己的作用域并將模板嵌套在內部。 ng-view 是一個優先級為1000的終極指令。AngularJS不會運行同一個元素上的低優先級指令 。ng-view 是一個優先級為1000的終極指令。
<!--該 div 內的 HTML 內容會根據路由的變化而變化。有以下兩種寫法--> <ng-view></ng-view> //當做標簽 //或<div ng-view ></div> //當做元素以上內容再加上location服務（用來分析處理url），我們就可以實現一個單頁面應用了。
$http：用于處理 xmlHttpRequest$location：提供當前URL的信息$q： 異步請求使用，promise/deferred模塊$routeProvider：配置路由$log：日志服務resolve：該屬性會以鍵值對對象的形式，給路由相關的控制器綁定服務或者值。然后把執行的結果值或者對應的服務引用，注入到控制器中。如果resolve中是一個promise對象，那么會等它執行成功后，才注入到控制器中，此時控制器會等待resolve中的執行結果。on、emit和broadcast使得event、data在controller之間的傳遞變的簡單。
$emit：子傳父 傳遞event與data$broadcast：父傳子 childcontroller：傳遞event與data$on：監聽或接收數據。。用于接收event與databroadcast、emit事件必須依靠其他事件（ng-click等）進行觸發，而不能單純寫一個這個。on倒是可以直接寫，因為它屬于監聽和接收數據的。
$on的方法中的event事件參數： event.name// 事件名稱 event.targetScope //發出或者傳播原始事件的作用域 event.currentScope //目前正在處理的事件的作用域 event.stopPropagation() //一個防止事件進一步傳播(冒泡/捕獲)的函數(這只適用于使用`$emit`發出的事件) event.preventDefault() //這個方法實際上不會做什么事，但是會設置`defaultPrevented`為true。 //直到事件監聽器的實現者采取行動之前它才會檢查`defaultPrevented`的值。 event.defaultPrevented //如果調用了`preventDefault`則為trueindex.html
<!DOCTYPE html><html ng-app="mainApp"><head> <meta charset="utf-8"> <title>My AngularJS App</title> <script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular.min.js"></script> <script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular-route.min.js"></script></head><!--首先需要在頁面引入angular和angular-route，注意要在angular-route之前引入angular這主要是因為angular-route.js需要傳入window.angular這個參數，而這個參數只有在加載完angular才會出現。--><body><!--路由功能主要是 $routeProvider服務 與 ng-view 實現。路由功能是由 routeProvider服務 和 ng-view 搭配實現，ng-view相當于提供了頁面模板的掛載點，當切換URL進行跳轉時，不同的頁面模板會放在ng-view所在的位置; 然后通過 routeProvider 配置路由的映射。--><div> <a href="#/list">列表</a></div><!--單頁Web應用由于沒有后端URL資源定位的支持，需要自己實現URL資源定位。AngularJs使用瀏覽器URL"#"后的字符串來定位資源。--><!--路由機制并非在AngularJS核心文件內，你需要另外加入angular-route.min.js腳本。并且創建mainApp模塊的時候需要添加對ngRoute的依賴。--></br><div ng-view></div><!--該 div 內的 HTML 內容會根據路由的變化而變化。有以下兩種寫法--><!-- <ng-view></ng-view> 當做標簽--><!-- <div ng-view ></div> 當做元素--><script> // 設置當前模塊依賴，“ngRoute”，用.NET的解就是給這個類庫添加“ngRoute”引用 angular.module("mainApp", ["ngRoute"]) .config(["$routeProvider", function ($routeProvider) { $routeProvider//定義一個路由表，即地址欄與視圖模板的映射。 /*when()：配置路徑和參數; otherwise：配置其他的路徑跳轉，可以想成default。*/ .when("/list", { // 指定URL為“/” 控制器：“listController”，模板：“route-list.html” controller: "listController", templateUrl: "route-list.html" }) .when("/view/:id", {// 注意“/view/:id” 中的 “：id” 用于捕獲參數ID controller: "viewController", templateUrl: "route-view.html" }) .when("/", { // 跳轉 redirectTo: "/list" }) .otherwise({redirectTo: "/list"}); }]) //創建一個提供數據的服務器 .factory("service", function () { var list = [ {id: 1, title: "博客園", url: "http://www.cnblogs.com"}, {id: 2, title: "知乎", url: "http://www.zhihu.com"}, {id: 3, title: "codeproject", url: "http://www.codeproject.com/"}, {id: 4, title: "stackoverflow", url: "http://www.stackoverflow.com/"} ]; return function (id) { //假如ID為無效值返回所有 if (!id) return list; var t = 0; //匹配返回的項目 angular.forEach(list, function (v, i) { if (v.id == id) t = i;//item的下標 }); return list[t]; } }) // 創建控制器 listController,注入提供數據服務 .controller("listController", ["$scope", "service", function ($scope, service) { $scope.list = service();//獲取所有數據 }]) // 創建查看控制器 viewController, 注意應為需要獲取URL ID參數 // 我們多設置了一個 依賴注入參數 “$routeParams” 通過它獲取傳入的 ID參數 .controller("viewController", ["$scope", "service", '$routeParams', function ($scope, service, $routeParams) { $scope.model = service($routeParams.id || 0) || {}; }]);</script></body></html>route-list
<ul ng-repeat="item in list"> <li><a href="#view/{{item.id}}">{{item.title}}</a></li></ul>route-view
<div> <div>網站ID：{{model.id}}</div> <div>網站名稱：<a href="{{model.url}}" rel="nofollow">{{model.title}}</a></div> <div>訪問地址：{{model.url}}</div></div><!--<a >訪問菜鳥教程</a>可以跳轉--><!--http://www.cnblogs.com/shuchao/archive/2009/09/19/rel-nofollow.htmlnofollow的使用nofollow有兩種用法：1.用于meta元標簽：<meta name="robots" content="nofollow" />，告訴爬蟲該頁面上所有鏈接都無需追蹤。2.用于a標簽：<a href="login.aspx" rel="nofollow">登錄</a>,告訴爬蟲該頁面無需追蹤。nofollow的作用nofollow主要有三個作用：1.防止不可信的內容，最常見的是博客上的垃圾留言與評論中為了獲取外鏈的垃圾鏈接，為了防止頁面指向一些拉圾頁面和站點。2.付費鏈接：為了防止付費鏈接影響Google的搜索結果排名，Google建議使用nofollow屬性。3.引導爬蟲抓取有效的頁面：避免爬蟲抓取一些無意義的頁面，影響爬蟲抓取的效率。-->新聞熱點
疑難解答
