再谈路由之——ng-route和ui-router

来源：互联网发布：大数据客户画像编辑：程序博客网时间：2024/05/14 03:02

上次谈到了路由，是为ng路由，是AngularJS官方提供的。路由它几乎是所有mvc框架所具有的特性，在我们项目开发中，更快速，维护起来也更加的方便。

在AngularJS中，内置的有路由模块，就是我在上篇文章中提到的ng-route。但在我们实际项目开发中，有时会遇见二级路由的配置的，使用。ngroute面对这样的问题时，实现起来较难以实现，且会有bug存在，导致项目的崩溃。这时候就要用到uirouter。

下面我们就来详细的说一下uirouter

首先，uirouter为第三方提供的路由模块。无论是我们使用那种路由，作为框架的额外附加功能，我们是都需要通过模块依赖来引入。通俗点讲就是在引入路由源文件后，在定义模块，依赖注入第三方路由是要这样写（以 ui.router 这样写）

var app = angular.module("myShop",["ui.router"]);

在这里，myShop为自定义模块，依赖第三方路由模块uirouter。

这样，在项目通过入口指令启动后，加载依赖模块uirouter，将所有挂载在uirouter路由下面的指令、服务等都进行注册，便于后面的调用。说到这里，关于uirouter和ngroute所提供的指令与服务，我们简单的说一下：

ngroute：

1、$routerProvider >>>> 服务提供者，用来进行路由的配置；

2、$route >>>>服务，用来显示路由状态、信息及路由方法（如跳转）；

3、$routeParams >>>>服务，用来存储路由匹配时的参数；

4、ng-view >>>>指令，路由模块渲染，对应的DOM相关联；

ui.router:

1、$urlRouterProvider>>>>服务提供者，用来进行路由的配置重定向；

2、$urlRouter >>>>服务

3、$stateProvider >>>>服务提供者，用来配置路由；(同$routerProvider )；

4、$state >>>>服务，用来显示路由状态、信息及路由方法（同$route；

5、$stateParams >>>>服务，用来存储路由匹配时的参数（同$routeParams）；

6、ui-view >>>>指令，路由模块渲染，对应的DOM相关联（同ng-view）；

7、ui-sref>>>>指令，用于超链接（一般不支持动态绑定）；

...

声明：服务提供者是用来提供服务实例和配置服务。

在依赖注入uirouter后，在给每个子模块进行引入自定义模块和设置。我们来通过一个单页面应用实例，来说一下

子模块完成后，就要进行路由配置。

var app = angular.module("myShop",["ui.router","main","login","regist","goodslist"]);//         这里引入自定义模块，依赖注入了  ui.router   和子模块       app.config(["$sceDelegateProvider","$stateProvider","$urlRouterProvider",        function ($sceDelegateProvider,$stateProvider,$urlRouterProvider) {        //    设置白名单            $sceDelegateProvider.resourceUrlWhitelist([                "self",                "http://datainfo.duapp.com/**"            ]);        //    一级路由设置            $stateProvider.state({  //首页                name:"index",                url:"/index",                template:"<main-comp></main-comp>"            }).state({              //二级路由                name:"index.classlist",                url:"/classlist",                template:"<list-comp></list-comp>",                params:{classID:null}            }).state({              //登录                name:"login",                url:"/login",                template:"<login-comp></login-comp>"            }).state({              //注册                name:"regist",                url:"/regist",                template:"<regist-comp></regist-comp>"            });        //    设置默认页面            $urlRouterProvider.otherwise("/index");        }]);

路由进行配置完成后，在单页面中通过UI-view来控制视图显示区域

        <div class="row content">            <div ui-view></div>        </div>

要说明一下的是，在ui-router中，一个$state下可以有多个视图，它们有各自的模块和控制器。这点是ng-route没有的，给了前端路由极大的灵活性。如下

    <div>        <div ui-view="header"></div>        <div ui-view="body"></div>        <div ui-view="footer"></div>    </div>

一个模块中包含了多个命名的ui-view，可以给他们分别设置模块和控制器。

现在我们回到主题：路由配置完成后，就可以进行模块化开放了，文件结构大致于

>>>>>>项目名称

>>>>component （模块文件夹，这里我们可以写一系列的模块文件）

>>>>main

(在子模块中，可以再建js文件，来存放子模块js文件，进行模块依赖）

var main = angular.module("main",[]);main.component("mainComp",{    templateUrl:"component/main/main.template.html",    controller:(["$scope","$http",function ($scope,$http) {        $(".head_nav li:eq(5)").children("a").css("color", "red");        $scope.tab = function ($e) {            $(".head_nav li").addClass("head_active");        };        $scope.goodslist = [];        $http({            method:"JSONP",            url:"http://datainfo.duapp.com/shopdata/getGoods.php"        }).then(            function(resp) {                console.log("请求成功", resp);                $scope.goodslist = resp.data;            },            function (resp) {                console.log("系统繁忙");            }        );    }])});

....

>>>>css

>>>>images

>>>>js

>>>>app

（这里我们进行存放配置路由的js文件）

>>>>lib

（这里存放我们需要引入的js文件）

>>>>index.html

那么ngroute和uirouter有什么区别呢？

1、ngroute是用AngularJS框架的核心部分。

2、uirouter是一个社区库，它是用来提高完善ngroute路由功能的。

3.ngRoute 和 ui-route 相比:

$when —> $state 路由状态配置的时候

$routeParams —> $stateParams 带参数的时候的配置

$routeProvider —> $stateProvider 依赖注入的模块

<div ng-view></div> —> <div ui-view></div> 页面中绑定的指令

那么我们到底用哪个，或者说是，哪个更适合可管理性和适合可扩展性？项目中选取哪个？

uirouter路由是一个第三方的模块，功能非常的强大。它支持一切正常ngroute也可以做许多额外的功能。

uiRoute中可以嵌套更深层次的路由，也就是路由中可以有路由（大致有两种情况：1.横向的 2.纵向的）。

　　　（1）嵌套路由

　　（2）多视图路由

　　ngRoute中就不能嵌套更深的路由。

可以按照自己项目的需要来进行选择，这就是我的一些心得，肯定有些不足，欢迎大家一起交流学习。

0 0