AngularJS「路由」的簡介及用法介紹
- 巴扎黑原創
- 2017-07-21 14:05:301318瀏覽
這是小編的一些學習資料，理論上只是為了自己以後學習需要的，但是還是需要認真對待的
以下內容僅供參考，請慎重使用學習
AngularJS「路由」的定義概念
#AngularJS最近真的很火，很多同事啊同學啊朋友都在用，這不推薦我學習，聽到這個名字就十分火熱的去了
什麼是AngularJS就不做說明了，這個東西還是很有趣的
在這裡推薦一下學習網站，菜鳥教程，雖然裡面的教學很多都很淺顯，而且好多也沒有說明，但是對於入門確實很不錯的選擇
#1.什麼是AngularJS的路由呢？
AngularJS 路由允許我們透過不同的 URL 存取不同的內容。透過AngularJS 可以實現多視圖的單頁Web應用
1 3 5
上面是它的展現形式，# 號之後的內容是不是像服務端請求的樣子呢，其實在請求的時候是會被瀏覽器忽略的。 而我們需要的就是在客戶端實作 # 號後面內容的功能實作。 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?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 //把元素值（比如输入域的值）绑定到应用程序。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 //这里的加载内容可以使本地的HTML文件链接，然后删掉这部分js就好本地的HTML檔案直接建立兩個為a1.html,a2.html就好了，路徑要正確(這裡是放在同目錄下)
4. 效果樣式
那麼最後的樣子是如何的呢點擊不同的標籤，下面的
# ##
以上是AngularJS「路由」的簡介及用法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn