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. 如何提升 service 等级，不被kill（整合）

    (1)在应用退到后台后,另起一个只有1像素的页面停留在桌面上,让自己保持前台状态,保护自己不被后台清理工具杀死. (2)用Foreground Service. 参考地址:Android Servic ...

  2. Android MuPDF 阅读PDF文件

    MuPDF是一款轻量级的开源软件,可以用来阅读PDF文件.下载完源代码以后,想要运行成功,除了Android SDK之外,还需要Android NDK环境,因此有点麻烦. 但是一旦安装完必须的环境以后 ...

  3. 树莓派（Raspberry Pi）修改时区

    1.安装ntp sudo apt-get install ntpdate 2.修改时区 tzselect 3.选择自己的时区 1)选择大洲 2)选择国家 3)选择城市 4)选择YES 5)或者使用命令 ...

  4. github的git.exe的目录所在

    github的git.exe位于 C:\Users\[username]\AppData\Local\GitHub\PortableGit_25d850739bc178b2eb13c3e2a9faaf ...

  5. Lamp下安全配置随笔

    Apache方面: 1.apache有两个指令可以输出服务器的细节,即ServerSignature和ServerTokens. 当这两个指令一起使用时,会输出apache的版本号,php的版本号,i ...

  6. NeuSoft(2)添加系统调用

    1.下载内核 apt-get install linux-source 在/usr/src下 2.解压内核 cd /usr/src tar -jxvf linux-source-3.2.0.tar.b ...

  7. JSON与DataTable(DataSet)相互转化

    public static string CreateJsonParameters(DataTable dt)        {            /* /******************** ...

  8. sql 错误提示

    今天在登录SqlServer2005的MicroSoft Sql Server Managerment Studio的时候,系统提示:在建立与服务器的连接时出错.在连接到SQL Server 2005 ...

  9. java之数组（笔记）

    1.与c++不同的声明 int[] i, j; int i[], j; 这两种声明在c++中是同等的,但是在Java中,前者是声明两个,后者是只有i是数组. 2.数组可以看作是特殊的类 3.数组的cl ...

  10. Tomcat热部署方法（3种）【转】

    热部署是指在你修改项目BUG的时候对JSP或JAVA类进行了修改在不重启WEB服务器前提下能让修改生效.但是对配置文件的修改除外! 1.直接把项目web文件夹放在webapps里. 2.在tomcat ...