ui-router is a 3rd-party module and is very powerful. It supports everything the normal ngRoute can do as well as many extra functions.

Here are some common reason ui-router is chosen over ngRoute:

  • ui-router allows for nested views and multiple named views. This is very useful with larger app where you may have pages that inherit from other sections.
  • ui-router allows for you to have strong-type linking between states based on state names. Change the url in one place will update every link to that state when you build your links with ui-sref. Very useful for larger projects where URLs might change.
  • There is also the concept of the decorator which could be used to allow your routes to be dynamically created based on the URL that is trying to be accessed. This could mean that you will not need to specify all of your routes before hand. states allow you to map and access different information about different states and you can easily pass information between states via $stateParams.
  • You can easily determine if you are in a state or parent of a state to adjust UI element (highlighting the navigation of the current state) within your templates via $state provided by ui-router which you can expose via setting it in $rootScope on run.

In essence, ui-router is ngRouter with more features, under the sheets it is quite different. These additional features are very useful for larger applications.

More Information:

Github: https://github.com/angular-ui/ui-router
Documentation:
API Reference: http://angular-ui.github.io/ui-router/site/#/api
Guide: https://github.com/angular-ui/ui-router/wiki
FAQs: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions
Sample Application: http://angular-ui.github.io/ui-router/sample/#/

_Layout.cshtml

<!DOCTYPE html>

<html ng-app="app">

<head>

    <title></title>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width" />

    <base href="/">

</head>

<body>

    <!--<ul>

        <li>

            <a href="#/users">Users</a>

        </li>

        <li>

            <a href="#/roles">Roles</a>

        </li>

    </ul>-->

    <ul>

        <li>

            <a ui-sref="users">Users</a>

        </li>

        <li>

            <a ui-sref="roles">Roles</a>

        </li>

    </ul>

    <ul>

        <li>

            <a href="/users">Users</a>

        </li>

        <li>

            <a href="/roles">Roles</a>

        </li>

    </ul>

    @RenderBody()

    <script type="text/javascript" src="/Scripts/libs/angular/angular.min.js"></script>

    <!--<script type="text/javascript" src="/Scripts/libs/angular/angular-route.min.js"></script>-->

    <script type="text/javascript" src="/Scripts/libs/angular-ui/ui-router/angular-ui-router.min.js"></script>

    <script type="text/javascript" src="/Scripts/app/app.js"></script>

    <script type="text/javascript" src="/Scripts/app/components/users/app.users.js"></script>

    <script type="text/javascript" src="/Scripts/app/components/users/app.users.routes.js"></script>

    <script type="text/javascript" src="/Scripts/app/components/users/controllers/user.controller.js"></script>

    <script type="text/javascript" src="/Scripts/app/components/roles/app.roles.js"></script>

    <script type="text/javascript" src="/Scripts/app/components/roles/app.roles.routes.js"></script>

    <script type="text/javascript" src="/Scripts/app/components/roles/controllers/role.controller.js"></script>

</body>

</html>

app.users.routes.js

(function() {

    'use strict';

    angular

        .module('app.users')

        .config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {

            $stateProvider

                .state('users', {

                    url: '/users',

                    templateUrl: '/Scripts/app/components/users/views/user-list.tpl.html',

                    controller: 'UserController'

                });

            $locationProvider.html5Mode(true);

        }]);

})();

AngularJS Best Practices: ui-router的更多相关文章

  1. angularjs ngRoute和ui.router对比

    ngRoute模块是angularjs自带的路由模块,ui.router是一个第三方路由模块,接下来将对两者进行一个对比: ng-router(angular-router.js) ng-view n ...

  2. angularjs的路由ui.router

      <!-- 引入路由插件 --> <script src="vendor/angular-ui-router/release/angular-ui-router.min. ...

  3. AngularJS学习之 ui router

    1.安装 bower install --save angular_ui-router 2.在项目主页面 index.html中添加 <div ui-view="">& ...

  4. AngularJS 使用 UI Router 实现表单向导

    Today we will be using AngularJS and the great UI Router and the Angular ngAnimate module to create ...

  5. [转]AngularJS 使用 UI Router 实现表单向导

    本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...

  6. [转]AngularJS+UI Router(1) 多步表单

    本文转自:https://www.zybuluo.com/dreamapplehappy/note/54448 多步表单的实现   在线demo演示地址https://rawgit.com/dream ...

  7. angularJS ui router 多视图单独刷新问题

    场景:视图层级如下 view1 --view11 --view111 需求:view11的一个动作过后,单独刷新view12 解决方式:修改层级设计 view1 --view11 --view111 ...

  8. ngRoute 和 ui.router 的使用方法和区别

    在单页面应用中要把各个分散的视图给组织起来是通过路由机制来实现的.本文主要对 AngularJS 原生的 ngRoute 路由模块和第三方路由模块 ui.router 的用法进行简单介绍,并做一个对比 ...

  9. AngularJS Best Practices: resource

    A factory which creates a resource object that lets you interact with RESTful server-side data sourc ...

  10. 【原创】ui.router源码解析

    Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ...

随机推荐

  1. android NDK入门 windows下安装cygwin

    一.Android NDK环境简介 Android NDK 是运行于Android 平台上的Native Development Kit 的缩写. Android 应用开发者可以通过NDK 调用C 或 ...

  2. xenu工具介绍

    Xenu Link Sleuth 也许是你所见过的最小但功能最强大的检查网站死链接的软件了.你可以打开一个本地网页文件来检查它的链接,也可以输入任何网址来检查.它可以分别列出网站 的活链接以及死链接, ...

  3. [题解+总结]NOI2015

    // 此博文为迁移而来,写于2015年7月20日,不代表本人现在的观点与看法.原始地址:http://blog.sina.com.cn/s/blog_6022c4720102w6u7.html 1.总 ...

  4. 【ZOJ】3329 One Person Game

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=3754 题意:有三个色子,分别有k1.k2.k3个面,权值分别是1-k1, 1~ ...

  5. not only ... but also

    轉載自http://210.240.55.2/~t311/moe/engb6/b6grammar/b6notonly.htm not only ... but also ... 是「不僅‧‧‧也是‧‧ ...

  6. Spring MVC中处理静态资源的多种方法

    处理静态资源,我想这可能是框架搭建完成之后Web开发的”头等大事“了. 因为一个网站的显示肯定会依赖各种资源:脚本.图片等,那么问题来了,如何在页面中请求这些静态资源呢? 还记得Spring MVC中 ...

  7. mongodb数据导入导出以及备份恢复

    昨日在公司收到游戏方发来一个1G多的数据文件,要求导入联运账号中.细细一看,纳尼!文件竟然是BSON格式. 哇塞,这不是去年给大家分享的NoSql中的MongoDB的备份文件吗? 于是搭好环境 1.启 ...

  8. 全浏览器收藏网站javascript

    function MyFavorite(sURL, sTitle) { var ctrl = (navigator.userAgent.toLowerCase()).indexOf('mac') != ...

  9. Android-----工程文件目录介绍

  10. js封装

    方法一: function Tetrio(singleW){ if(singleW == undefined){ singleW = 18; } this.x = 0; this.y = 0;} Te ...