站長資訊網(wǎng)這是小編的一些學(xué)習(xí)資料，理論上只是為了自己以后學(xué)習(xí)需要的，但是還是需要認真對待的
以下內(nèi)容僅供參考，請慎重使用學(xué)習(xí)
AngularJS“路由”的定義概念
AngularJS最近真的很火，很多同事啊同學(xué)啊朋友都在用，這不推薦我學(xué)習(xí)，聽到這個名字就十分火熱的去了
什么是AngularJS就不做說明了，這個東西還是很有趣的
在這里推薦一下學(xué)習(xí)網(wǎng)站，菜鳥教程，雖然里面的教程很多都很淺顯，而且好多也沒有說明，但是對于入門確實很不錯的選擇
1.什么是AngularJS的路由呢？
AngularJS 路由允許我們通過不同的 URL 訪問不同的內(nèi)容。通過 AngularJS 可以實現(xiàn)多視圖的單頁Web應(yīng)用
1 3 5
上面是它的展現(xiàn)形式，# 號之后的內(nèi)容是不是像服務(wù)端請求的樣子呢，其實在請求的時候是會被瀏覽器忽略掉的。 而我們需要的就是在客戶端實現(xiàn) # 號后面內(nèi)容的功能實現(xiàn)。 AngularJS 路由 就通過 # + 標記 幫助我們區(qū)分不同的邏輯頁面并將不同的頁面綁定到對應(yīng)的控制器上。
2.路由的配置實例
1 <html> 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 4 5 <!--導(dǎo)入angular以及路由文件angular-route.js--> 6 <script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js?1.1.11"></script> 7 <script src="https://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js?1.1.11"></script> 8 9 <script type="text/javascript">10 //把元素值（比如輸入域的值）綁定到應(yīng)用程序。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>
// // //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 //這里的加載內(nèi)容可以使本地的HTML文件鏈接，然后刪掉這部分js就好
本地的HTML文件直接建立兩個為a1.html,a2.html就好了，路徑要正確(這里是放在同目錄下)
4. 效果樣式
那么最后的樣子是如何的呢
點擊不同的標簽，下面的<div ng-view="">就會加載不同的頁面，這里的頁面可以是本地頁面。
