ng-route路由详解

一个网页是通过布局展示在我们眼前,一个应用是由一组不同的页面形成,在这些页面中会有一些头部,尾部并不是随着页面变化面发生变化的, angularJS中的一个模块就是为了实现这样的功能的,首行在页面中引入ng-route

    <script src="js/angular-1.5.8/angular.js"></script>
    <script src="js/angular-1.5.8/angular-route.js"></script>

要创建一个布局模板,需要修改html以告诉angularJS把模板渲染到何处,这时就是需要用ng-view指令来配合,它与路由组合到一起,我们就可以指定当前路由所对应的模板在DOM中的渲染位置

<div ng-view></div>

这个相当 于一个切入点,也就是说配合路由,带有ng-view标识的DOM元素这里就是配合路由要渲染的页面。
常见的路由配置代码:

angular.module('MyApp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'views/home.html'
})
.when('/inbox/:name', {
controller: 'InboxController',
templateUrl: 'views/inbox.html'
})
.otherwise({redirectTo: '/'});
}]);

when() 方法用于配置路由的基本参数,一个路径字符串,和一个配置参数对象 ,otherwise()方法可以理解成default,也就是没有路由请求或是请求的路由不存在时,应该指向的位置

推荐阅读更多精彩内容