ngRoute簡介
路由是AngularJS很重要的一環(huán)，它可以把你項目的頁面串聯(lián)起來，構成一個項目，常用的路由有ngRoute和ui-route，我這里先講ngRoute。ngRoute是一個Module，提供路由和深層鏈接所需的服務和指令。
注意一點，和之前的文章不一樣，使用ngRoute之前你需要引入另外一個js文件angular-route.js：
<script src="script/angular.min.js"></script><script src="script/angular-route.min.js"></script>
ngRoute包含內(nèi)容如下：
| 名稱 | 類型 | 作用 |
|---|---|---|
| ngView | Directive | 路由的不同模板其實都是插入這個元素里 |
| $routeProvider | Provider | 路由配置 |
| $route | Service | 各個路由的url，view，controller |
| $routeParams | Service | 路由參數(shù) |
使用ngRoute的基本流程如下：
可以看下下面這個例子
color.html
<!DOCTYPE html><html><head> <meta charset="uft-8"/> <title></title></head><script src="script/angular.min.js"></script><script src="script/angular-route.min.js"></script><body ng-app="color"><p><a href="#/" rel="external nofollow" rel="external nofollow" >Main</a></p><a href="#red" rel="external nofollow" rel="external nofollow" >Red</a><a href="#green" rel="external nofollow" rel="external nofollow" >Green</a><div ng-view></div></body><script> var app = angular.module("color", ["ngRoute"]); app.config(function ($routeProvider) { $routeProvider .when("/", { templateUrl: "main.html", controller: 'mainController' }) .when("/red", { templateUrl: "red.html", controller: 'redController' }) .when("/green", { templateUrl: "green.html", controller: 'greenController' }) .otherwise('/'); }); app.controller('mainController',['$scope',function mainController($scope){ $scope.message='this is main page'; }]); app.controller('redController',['$scope',function mainController($scope){ $scope.message='this is red page'; }]); app.controller('greenController',['$scope',function mainController($scope){ $scope.message='this is green page'; }]);</script></html>
新聞熱點
疑難解答
圖片精選
