ngRoute简介
路由是AngularJS很重要的一环，它可以把你项目的页面串联起来，构成一个项目，常用的路由有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包含内容如下：
| 名称 | 类型 | 作用 |
|---|---|---|
| ngView | Directive | 路由的不同模板其实都是插入这个元素里 |
| $routeProvider | Provider | 路由配置 |
| $route | Service | 各个路由的url，view，controller |
| $routeParams | Service | 路由参数 |
使用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>
新闻热点
疑难解答
图片精选
