02
2020
06

angular应用常用哪些路由库,各自的区别是什么?

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'


})

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。