什麼是AngularJS的路由呢？AngularJS 路由允許我們通過不同的 URL 訪問不同的內容。通過 AngularJS 可以實現多視圖的單頁Web應用 AngularJS 路由 就通過 # + 標記 幫助我們區分不同的邏輯頁面並將不同的頁面綁定到對應的控制器上。 ...
這是小編的一些學習資料，理論上只是為了自己以後學習需要的，但是還是需要認真對待的
以下內容僅供參考，請慎重使用學習
AngularJS“路由”的定義概念
AngularJS最近真的很火，很多同事啊同學啊朋友都在用，這不推薦我學習，聽到這個名字就十分火熱的去了
什麼是AngularJS就不做說明瞭，這個東西還是很有趣的
在這裡推薦一下學習網站，菜鳥教程，雖然裡面的教程很多都很淺顯，而且好多也沒有說明，但是對於入門確實很不錯的選擇
1.什麼是AngularJS的路由呢？
AngularJS 路由允許我們通過不同的 URL 訪問不同的內容。通過 AngularJS 可以實現多視圖的單頁Web應用
1 http://mibear.com/#/first 3 http://mibear.com/#/second 5 http://mibear.com/#/third
上面是它的展現形式，# 號之後的內容是不是像服務端請求的樣子呢，其實在請求的時候是會被瀏覽器忽略掉的。 而我們需要的就是在客戶端實現 # 號後面內容的功能實現。 AngularJS 路由 就通過 # + 標記 幫助我們區分不同的邏輯頁面並將不同的頁面綁定到對應的控制器上。
2.路由的配置實例
1 <html> 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 4 5 <!--導入angular以及路由文件angular-route.js--> 6 <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> 7 <script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script> 8 9 <script type="text/javascript"> 10 //把元素值（比如輸入域的值）綁定到應用程式。 11 angular.module('ngRouteExample', ['ngRoute']) 12 .controller('a1', function ($scope, $route) { $scope.$route = $route;}) 13 .controller('a2', function ($scope, $route) { $scope.$route = $route;}) 14 .config(function ($routeProvider) { 15 $routeProvider. 16 when('/a1', { 17 templateUrl: 'a1.html', 18 controller: 'a1' 19 }). 20 when('/a2', { 21 templateUrl: 'a2.html', 22 controller: 'a2' 23 }). 24 otherwise({ 25 redirectTo: '/a2' 26 }); 27 }); 28 </script> 29 30 31 </head> 32 33 <body ng-app="ngRouteExample" class="ng-scope"> 34 <script type="text/ng-template" id="a1.html"> 35 <h1> Home </h1> 36 </script> 37 38 <script type="text/ng-template" id="a2.html"> 39 <h1> About </h1> 40 </script> 41 42 <div> 43 <div id="navigation"> 44 <a href="#/a1">這是a1</a> 45 <a href="#/a2">這是a2</a> 46 </div> 47 48 <div ng-view=""> 49 </div> 50 </div> 51 </body> 52 </html>
3.解析
1 //包含了ngRoute 模塊的 2 angular.module('routingDemoApp',['ngRoute'])
1 //使用 ngView 指令，用來顯示路由切換的頁面 2 <div ng-view></div>
1 //路由配置設置其中之一 2 .config(function ($routeProvider) { 3 $routeProvider. 4 when('/a1', { 5 templateUrl: 'a1.html', 6 controller: 'a1' 7 }). 8 when('/a2', { 9 templateUrl: 'a2.html', 10 controller: 'a2' 11 }). 12 otherwise({ 13 redirectTo: '/a2' 14 }); 15 }); 16 17 //templateUrl，在 ng-view 中插入 HTML 模板文件的地址
18 //controller，function、string或數組類型，在當前模板上執行的controller函數，生成新的scope。
20 //redirectTo，重定向的地址，可以是你想最開始載入的頁面
1 <script type="text/ng-template" id="a1.html"> 2 <h1> Home </h1> 3 </script> 4 5 <script type="text/ng-template" id="a2.html"> 6 <h1> About </h1> 7 </script> 8 //這裡的載入內容可以使本地的HTML文件鏈接，然後刪掉這部分js就好
本地的HTML文件直接建立兩個為a1.html,a2.html就好了，路徑要正確(這裡是放在同目錄下)
4. 效果樣式
那麼最後的樣子是如何的呢
點擊不同的標簽，下麵的<div ng-view="">就會載入不同的頁面，這裡的頁面可以是本地頁面。
