标签：view .config cnp angular event ges span template bsp
下载模块包
cnpm install angular-route --save
导包
<script src="../node_modules/angular-route/angular-route.js"></script>
基本使用
项目放到wamp www目录
http://localhost/automation/src/index.html#
路由功能是由 routeProvider服务 和 ng-view 搭配实现，ng-view相当于提供了页面模板的挂载点，当切换URL进行跳转时，不同的页面模板会放在ng-view所在的位置; 然后通过 routeProvider 配置路由的映射。
效果：
<body ng-app="myApp"> <ul> <li><a href="#/a">a页面</a></li> <li><a href="#/b">b页面</a></li> </ul> <!-- 将操作结果放到这里 --> <div ng-view></div> <script> //在自己的模块添加模块依赖 var app = angular.module(‘myApp‘, [‘ngRoute‘]); //路由配置： //规则指的是 什么样的请求 找什么控制器 //[{templateUrl: ‘/‘, controller: ‘appController‘}] app.config([‘$routeProvider‘,function($routeProvider) { $routeProvider .when(‘/a‘, { controller: ‘aController‘, templateUrl: ‘./views/a.html‘ }) .when(‘/b‘, { controller: ‘bController‘, templateUrl: ‘./views/b.html‘ }); }]); app.controller(‘aController‘, [‘$scope‘, function($scope){ $scope.title = "A控制器"; }]); app.controller(‘bController‘, [‘$scope‘, function($scope){ $scope.title = "B控制器"; }]); </script> </body>
<!-- 模板 --> <script id="template" type="text/ng-template"> {{title}} </script> <script> //在自己的模块添加模块依赖 var app = angular.module(‘myApp‘, [‘ngRoute‘]); //路由配置： //规则指的是 什么样的请求 找什么控制器 //[{templateUrl: ‘/‘, controller: ‘appController‘}] app.config([‘$routeProvider‘,function($routeProvider) { $routeProvider .when(‘/a‘, { controller: ‘aController‘, templateUrl: ‘template‘ }) .when(‘/b‘, { controller: ‘bController‘, templateUrl: ‘template‘ }) //默认做什么 .otherwise({ //跳转默认页 redirectTo:‘/a‘ }); }]); app.controller(‘aController‘, [‘$scope‘, function($scope){ $scope.title = "A控制器"; }]); app.controller(‘bController‘, [‘$scope‘, function($scope){ $scope.title = "B控制器"; }]); </script> </body>
某一类地址的情况
//某一类地址 :匹配后面的值 ?这个位置可以省略
$routeProvider
.when(‘/views/:name?‘, {
controller: ‘aController‘,
templateUrl: ‘template‘
})
.when(‘/a‘, {
controller: ‘aController‘,
templateUrl: ‘template‘
})
.when(‘/b‘, {
controller: ‘bController‘,
templateUrl: ‘template‘
})
//默认做什么
.otherwise({
//跳转默认页
redirectTo:‘/a‘
});
//路由配置：
//规则指的是 什么样的请求 找什么控制器
//[{templateUrl: ‘/‘, controller: ‘appController‘}]
app.config([‘$routeProvider‘,function($routeProvider) {
//某一类地址 :匹配后面的值 ?这个位置可以省略
$routeProvider
.when(‘/views/:name?‘, {
controller: ‘aController‘,
templateUrl: ‘template‘
})
.when(‘/a‘, {
controller: ‘aController‘,
templateUrl: ‘template‘
})
.when(‘/b‘, {
controller: ‘bController‘,
templateUrl: ‘template‘
})
//默认做什么
.otherwise({
//跳转默认页
redirectTo:‘/a‘
});
}]);
//注入新对象 $routeParams
app.controller(‘aController‘, [‘$scope‘,‘$routeParams‘, function($scope, $routeParams){
$scope.title = "我是"+$routeParams.name+"A控制器";
}]);
app.controller(‘bController‘, [‘$scope‘, function($scope){
$scope.title = "B控制器";
}]);
$routeChangeStart：这个事件会在路由跳转前触发
$routeChangeSuccess：这个事件在路由跳转成功后触发
$routeChangeError：这个事件在路由跳转失败后触发
.controller("myCtrl",function($scope,$location){
$scope.$on("$viewContentLoaded",function(){
console.log("ng-view content loaded!");
});
$scope.$on("$routeChangeStart",function(event,next,current){
//event.preventDefault(); //cancel url change
console.log("route change start!");
});
})
标签：view .config cnp angular event ges span template bsp
原文地址：http://www.cnblogs.com/UFO-NO1/p/6061376.html
