AngularJS「路由」的簡介及用法介紹

這是小編的一些學習資料，理論上只是為了自己以後學習需要的，但是還是需要認真對待的

以下內容僅供參考，請慎重使用學習

AngularJS「路由」的定義概念

#AngularJS最近真的很火，很多同事啊同學啊朋友都在用，這不推薦我學習，聽到這個名字就十分火熱的去了

什麼是AngularJS就不做說明了，這個東西還是很有趣的

在這裡推薦一下學習網站，菜鳥教程，雖然裡面的教學很多都很淺顯，而且好多也沒有說明，但是對於入門確實很不錯的選擇

#1.什麼是AngularJS的路由呢？

AngularJS 路由允許我們透過不同的 URL 存取不同的內容。透過AngularJS 可以實現多視圖的單頁Web應用

1 3 5

上面是它的展現形式，# 號之後的內容是不是像服務端請求的樣子呢，其實在請求的時候是會被瀏覽器忽略的。 而我們需要的就是在客戶端實作 # 號後面內容的功能實作。  AngularJS 路由 就透過 # + 標記 幫助我們區分不同的邏輯頁面並將不同的頁面綁定到對應的控制器上。

2.路由的設定實例

## 

 1  2  3 <meta> 4  5 <!--导入angular以及路由文件angular-route.js--> 6 <script></script> 7 <script></script> 8  9     <script>10         //把元素值（比如输入域的值）绑定到应用程序。11         angular.module(&#39;ngRouteExample&#39;, [&#39;ngRoute&#39;])12         .controller(&#39;a1&#39;, function ($scope, $route) { $scope.$route = $route;})13         .controller(&#39;a2&#39;, function ($scope, $route) { $scope.$route = $route;})14         .config(function ($routeProvider) {15             $routeProvider.16             when(&#39;/a1&#39;, {17                 templateUrl: &#39;a1.html&#39;,18                 controller: &#39;a1&#39;19             }).20             when(&#39;/a2&#39;, {21                 templateUrl: &#39;a2.html&#39;,22                 controller: &#39;a2&#39;23             }).24             otherwise({25                 redirectTo: &#39;/a2&#39;26             });27         });28 </script>29 30   31 32 33     34           <script>35               <h1> Home 36           </script>37     38           <script>39               <h1> About 40           </script>41     42           <div> 43             <div>  44               <a>这是a1</a>45               <a>这是a2</a>46             </div>47               48             <div>49             </div>50           </div>51     52 

 

3.解析

#

1 //包含了ngRoute 模块的2 angular.module('routingDemoApp',['ngRoute'])

1 //使用 ngView 指令，用来显示路由切换的页面2 <div></div>

 //                // //redirectTo，重定向的地址，可以是你想最开始加载的页面

#

1  <script>2               <h1> Home 3           </script>4     5           <script>6               <h1> About 7           </script>8 //这里的加载内容可以使本地的HTML文件链接，然后删掉这部分js就好

本地的HTML檔案直接建立兩個為a1.html,a2.html就好了，路徑要正確(這裡是放在同目錄下)

 

4. 效果樣式

那麼最後的樣子是如何的呢

點擊不同的標籤，下面的

ng-view="">就會載入不同的頁面，這裡的頁面可以是本地頁面。

 

 

# ## 

以上是AngularJS「路由」的簡介及用法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！