這篇文章主要介紹了AngularJS路由用法,簡單分析了AngularJS路由的概念、功能及基本使用方法,需要的朋友可以參考下
本文實例講述了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'> <h2>AngularJS 路由应用</h2> <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> <p ng-view></p> <script src="angular.min.js"></script> <script src="angular-route.min.js"></script> <script src="test.js"></script> </body> </html>
list.html：
<p>
<h1>HI,这里是list.html</h1>
<h2>{{name}}</h2>
</p>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入門教學（1）-路由用法簡單介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
