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. javascript 返回字符长度，中文为两个字节，英文为一个字节

    //正则:用于区分中文为两个字节function getLength(str){    return String(str).replace(/[^\x00-\xff]/g,'aa').length; ...

  2. Haproxy内网连接阿里云存储OSS后提供下载

    global log 127.0.0.1 local0 maxconn #最大连接数 chroot /usr/local/haproxy uid #所属运行的用户UID gid #所属运行用用户组 d ...

  3. 20161004 NOIP 模拟赛 T1 解题报告

    第1题  小麦亩产一千八 [问题描述] “有了金坷垃,肥料一袋能顶两袋撒,小麦亩产一千八,吸收两米下的氮磷钾……”,话说HYSBZ(Hengyang School for Boys & Zy) ...

  4. SQLServer大数据优化方法若干

    1.使用ndf文件. 自从sqlserver2005后,默认不增生成ndf文件. mdf:priMary Data file ldf:Log Data File ndf:secoNdary data ...

  5. Solr资料

    Apache Solr Reference GuideCovering Apache Solr 5.5 https://archive.apache.org/dist/lucene/solr/ref- ...

  6. php 实现推技术comet(转)

    实现实时通信一般有两种方式:socket或comet.socket是比较好的解决方案,问题在于不是所有的浏览器都兼容,服务器端实现起来也稍微有点麻烦.相比之下,comet(基于HTTP长连接的&quo ...

  7. linux top 参数详解

    top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器.下面详细介绍它的使用方法. top - 01:06:48 up  1:22,   ...

  8. .net的五层架构

    原文章地址是http://www.360doc.com/content/11/1210/21/19147_171335782.shtml 我们刚开始学习架构的时候,首先会想到分层的概念,分层架构比较经 ...

  9. hdu 2102 BFS

    原题链接 思路:bfs搜一发 AC代码: #include "map" #include "queue" #include "math.h" ...

  10. [LintCode] Longest Consecutive Sequence 求最长连续序列

    Given an unsorted array of integers, find the length of the longest consecutive elements sequence. H ...