angular入门-路由控制
前端根据url做路由控制，主要用到angular中route模块$routeProvider
遇到的问题：引入angualar按照教程所说一步步的进行，总是调试不出来和各种报错，报错原因无非就是$routeProvider 未定义
主要是引入的angular.js没有包含angular-route这个模块需要我们自己额外的进行引用
app.js
1、定义模块
2、定义路由规则
controller.js
定义控制器，不同的路由对应不同templateUrl 和controller
index.html
加载app.js controller.js
view文件下放模块文件
list.html
detail.html
代码部分：
app.js
//app.js
var routeApp = angular.module('routeApp',['ngRoute']);
routeApp.config(['$routeProvider',function ($routeProvider) {
$routeProvider
.when('/list', {
templateUrl: 'views/list.html',
controller: 'RouteListCtl'
})
.when('/list/:id/:content', {
templateUrl: 'views/detail.html',
controller: 'RouteDetailCtl'
})
.otherwise({
redirectTo: '/list'
});
}]);
controller.js
//controller.js
routeApp.controller('RouteListCtl',function($scope) {
});
routeApp.controller('RouteDetailCtl',function($scope, $routeParams) {
$scope.id = $routeParams.id;
$scope.content = $routeParams.content;
console.log($routeParams)
});
index.html
<!doctype html> <html ng-app="routeApp"> <head> </head> <body> <div ng-view></div> <script src="angular.js"></script> <script src="angular-route.js"></script> <script src="app.js"></script> <script src="controller.js"></script> </body> </html>
view/list.html
1 <hr/> 2 <h3>Route : List.html</h3> 3 <ul> 4 <li ng-repeat="id in [1, 2, 3 ]"> 5 <a href="#/list/{{ id }}/asdfsfdsf"> ID{{ id }}</a> 6 </li> 7 </ul>
view/detail.html
<hr/> <h3>Route <span style="color: red;">{{id}}</span>: detail.html </h3> <small>{{content}}</small>
