AngularJS中ngRouter和uiRouter的区别

来源：互联网发布：游戏汉化软件编辑：程序博客网时间：2024/05/29 14:55

路由(route)，几乎所有的MVC(VM)框架都应该具有的特性，因为它是前端构建单页面应用(SPA)必不可少的组成部分。
那么，对于angular而言，它自然也有内置的路由模块：做ngRoute。
不过，大家很少用它，因为它的功能太有限，往往不能满足开发需求！！
于是，一个基于ngRoute开发的第三方路由模块，叫做ui.router，受到了大家的“追捧”。

那么它们有什么不同呢？

ngRoute在路由配置时用$routeProvider。
ui-router路由配置时用 $stateProvider 和$urlRouterProvider。
ngRoute是官方路由。
ui-route是第三方路由。
ngroute是用AngularJS框架的核心部分。
ui-router是一个社区库，它是用来提高完善ngroute路由功能的。
ui-router允许嵌套视图(nested views)和多个命名视图(multiple named views)。

接下来看看ngRoute模块和ui.router模块各自都提供了哪些服务，哪些指令？

ng-router

$routeProvider–用于进行路由配置的内置服务
$routeParams–径性路由参数传递时使用的一个内置服务
ng-view–用于展示对应模板的指令

ui-router

$stateProvider–ui路由中状态的服务提供者。
$urlRouterProvider–用于默认访问位置的指定。
views–用于进行多数据展示的情况。
ui-view–主要进行目标视图模板的展示。
ui-sref–该属性主要用于替换HTML中a标签的href属性，用于指定目标路由的名称。

从上述看，其实ui.router和ngRoute大体的设计思路，对应的模块划分都是一致的！
那么ui-Router解决了原生的ng-route哪些不足呢？

多视图—页面可以显示多个动态变化的不同区块。

比如：页面一个区块用来显示页面状态，另一个区块用来显示页面主内容，当路由切换时，页面状态跟着变化，对应的页面主内容也跟着变化。

首先，我们尝试着用ngRoute来做：

html页面：

<div ng-view>区块1</div><div ng-view>区块2</div>

JS代码：

$routeProvider    .when('/', {    template: 'hello world'});

我们在html中利用ng-view指令定义了两个区块，于是两个div中显示了相同的内容，这很合乎情理，但却不是我们想要的，但是又不能为力，因为，在ngRoute中：

视图没有名字进行唯一标志，所以它们被同等的处理。
路由配置只有一个模板，无法配置多个。

针对上述两个问题，我们尝试用ui.router来做：

HTML页面：

<div ui-view></div>  <div ui-view="status"></div>

JS代码：

$stateProvider    .state('home', {        url: '/',        views: {            '': {                template: 'hello world'            },            'status': {                template: 'home page'            }        }    });

这次，结果是我们想要的，两个区块，分别显示了不同的内容，原因在于，在ui.router中：

可以给视图命名，如：ui-view=”status”。
可以在路由配置中根据视图名字(如：status)，配置不同的模板（其实还有controller等）。

嵌套视图：页面某个动态变化区块中，嵌套着另一个可以动态变化的区块。

0 0