溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了AngularJS中路由怎么用，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
具體如下：
目前的理解中，這個NG的路由模塊可以用于帶有多視圖的單頁面開發。
先把所有代碼貼出：
HTML:
<!doctype html> <meta charset="UTF-8"> <html> <head> <link href="self.css" rel="external nofollow" rel="stylesheet"> </head> <body ng-app='routingDemoApp'> <h3>AngularJS 路由應用</h3> <ul> <li><a href="#/" rel="external nofollow" >首頁</a></li> <li><a href="#/computers" rel="external nofollow" >電腦</a></li> <li><a href="#/user" rel="external nofollow" >用戶</a></li> <li><a href="#/blabla" rel="external nofollow" >其他</a></li> </ul> <div ng-view></div> <script src="angular.min.js"></script> <script src="angular-route.min.js"></script> <script src="test.js"></script> </body> </html>
list.html：
<div>
<h2>HI,這里是list.html</h2>
<h3>{{name}}</h3>
</div>JS:
var app = angular.module('routingDemoApp',['ngRoute']);
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'這是首頁頁面'})
.when('/computers',{
template:'這是電腦分類頁面'
})
.when('/user',{templateUrl:'list.html',controller:'listController'})
.otherwise({redirectTo:'/'});
}]);
app.controller('listController',function($scope){
$scope.name="ROSE";
});首先由于我用的是Angular1.5,所以需要額外引入angular-route.js:
<script src="angular.min.js"></script> <script src="angular-route.min.js"></script>
要使用NG里的路由，必須先在特定的模塊中定義它：
.config(['$routeProvider', function($routeProvider){
//內容
}通過when和otherwise兩個方法來進行路由的匹配。（其實就是匹配上面URL后面/的字符）。最后把匹配到的字符所對應的字段或者文件放入帶有ng-view 指令的DOM里面。
when里面有許多屬性。里面可以設置控制器，控制器會匹配給對應的字段或文件。就像上面代碼中listController控制器一樣。
ng-view指令有許多規則：
在匹配路由時：
1、創建一個新的當前作用域。
2、刪除前一個作用域。
3、將當前的模板（控制器等）與當前新建的作用域關聯起來。
4、如果有內置關聯的控制器，將其與當期作用域關聯起來。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“AngularJS中路由怎么用”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
