转自:https://www.cnblogs.com/best/tag/Angular/
AngularJS 路由也可以通过不同的模板来实现。
$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则,第二个参数为路由配置对象。
路由配置对象语法规则如下:
$routeProvider.when(url, {
template: string,
templateUrl: string,
controller: string, function 或 array,
controllerAs: string,
redirectTo: string, function,
resolve: object<key, function>
});
参数说明:
-
template:
如果我们只需要在 ng-view 中插入简单的 HTML 内容,则使用该参数:
.when('/computers',{template:'这是电脑分类页面'})
-
templateUrl:
如果我们只需要在 ng-view 中插入 HTML 模板文件,则使用该参数:
$routeProvider.when('/computers', { templateUrl: 'views/computers.html', });
以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。
-
controller:
function、string或数组类型,在当前模板上执行的controller函数,生成新的scope。
-
controllerAs:
string类型,为controller指定别名。
-
redirectTo:
重定向的地址。
-
resolve:
指定当前controller所依赖的其他模块。
实例
1 <html> 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 4 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> 5 <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script> 6 7 <script type="text/javascript"> 8 angular.module('ngRouteExample', ['ngRoute']) 9 .controller('HomeController', function ($scope, $route) { $scope.$route = $route;}) 10 .controller('AboutController', function ($scope, $route) { $scope.$route = $route;}) 11 .config(function ($routeProvider) { 12 $routeProvider. 13 when('/home', { 14 templateUrl: 'embedded.home.html', 15 controller: 'HomeController' 16 }). 17 when('/about', { 18 templateUrl: 'embedded.about.html', 19 controller: 'AboutController' 20 }). 21 otherwise({ 22 redirectTo: '/home' 23 }); 24 }); 25 </script> 26 27 28 </head> 29 30 <body ng-app="ngRouteExample" class="ng-scope"> 31 <script type="text/ng-template" id="embedded.home.html"> 32 <h1> Home </h1> 33 </script> 34 35 <script type="text/ng-template" id="embedded.about.html"> 36 <h1> About </h1> 37 </script> 38 39 <div> 40 <div id="navigation"> 41 <a href="#/home">Home</a> 42 <a href="#/about">About</a> 43 </div> 44 45 <div ng-view=""> 46 </div> 47 </div> 48 </body> 49 </html>
转载于:https://www.cnblogs.com/sharpest/p/8177048.html