Angular1.x中常用ngRoute和ui.router,还有一种为Angular2设计的new router(面向组件)。后面那个没在实际项目中用过,就不讲了。
无论是ngRoute还是ui.router,作为框架额外的附加功能,都必须以 模块依赖 的形式被引入。
区别
ngRoute模块是Angular自带的路由模块,而ui.router模块是基于ngRoute模块开发的第三方模块。
ui.router是基于state(状态)的,ngRoute是基于url的,ui.router模块具有更强大的功能,主要体现在视图的嵌套方面。
使用ui.router能够定义有明确父子关系的路由,并通过ui-view指令将子路由模版插入到父路由模板的
中去,从而实现视图嵌套。而在ngRoute中不能这样定义,如果同时在父子视图中 使用了
会陷入死循环。
示例
//ngRoute
var app = angular.module('ngRouteApp', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/main', {
templateUrl: "main.html",
controller: 'MainCtrl'
})
.otherwise({ redirectTo: '/tabs' });
// ui.router
var app = angular.module("uiRouteApp", ["ui.router"]);
app.config(function($urlRouterProvider, $stateProvider){
$urlRouterProvider.otherwise("/index");
$stateProvider
.state("Main", {
url: "/main",
templateUrl: "main.html",
controller: 'MainCtrl'
})