标签:text 请求 路由 ngroute angular 使用 模块 csdn ase
html结构:
<body ng-app=‘rootApp‘>
<ul>
<li><a href=‘#/‘>主页</a></li>
<li><a href=‘#/floor1‘>一楼</a></li>
<li><a href=‘#/floor2‘>二楼</a></li>
</ul>
<!-- ng-view 渲染站位 -->
<div ng-view></div>
</body>
<!-- 引入angular包 -->
<script src=‘bower_components/angular/angular.js‘></script>
<!-- 引入angular-route包 -->
<script src=‘bower_components/angular-route/angular-route.js‘></script>
<!-- 下面是渲染模板 -->
<script id=‘tmpl‘ type=‘text/ng-template‘>
<h1>{{placeholder}}</h1>
</script>
js结构:
/* 此处定义模块,由于需要设定路由,所以要注入ngRoute */
var rootApp = angular.module(‘rootApp‘, [‘ngRoute‘]);
/* 定义路由表(路由规则)*/
rootApp.config([‘$routeProvider‘, function($routeProvider) {
/* $routeProvider 就相当于交通警察,根据when和otherwise指挥路由走向 */
$routeProvider
.when(‘/‘, {
// 当请求的“URL” / , 找当前定义控制器和视图
controller: ‘DefaultController‘,
/* template: ‘<h1>{{hello}}</h1>‘ */
templateUrl: ‘tmpl‘
})
.when(‘/floor1/1‘, {
controller: ‘Floor1‘,
templateUrl: ‘tmpl‘
})
/* 这里用:id这种形式来保存路由参数,以便后来用$routeParams可以取到 */
.when(‘/floor2/:id/:name/:age‘, {
controller: ‘Floor2‘,
templateUrl: ‘tmpl‘
})
.otherwise({
/* 都不匹配,定向到根目录 */
redirectTo: ‘/‘
});
}]);
标签:text 请求 路由 ngroute angular 使用 模块 csdn ase
原文地址:http://www.cnblogs.com/liangxiaoli/p/7061369.html