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. 【BZOJ】2154: Crash的数字表格

    http://www.lydsy.com/JudgeOnline/problem.php?id=2154 题意:求$\sum_{i=1}^{n} \sum_{j=1}^{m} lcm(i, j)$, ...

  2. CF 7C. Line(扩展欧几里德)

    题目链接 AC了.经典问题,a*x+b*y+c = 0整数点,有些忘记了扩展欧几里德,复习一下. #include <cstdio> #include <iostream> # ...

  3. Android --SeekBar的使用

    1. 效果图

  4. spring源码学习之路---深度分析IOC容器初始化过程（四）

    作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 最近由于工作和生活,学习耽搁 ...

  5. 转载 Android快捷键 转载

    一.实用类快捷键 1 常用熟悉的快捷键 CTRL+C(复制).CTRL+X(剪切).CTRL+Z(撤销).CTRL+F(查找).CTRL+H(搜索文件或字符串).CTRL+Y(重做).CTRL+/(双 ...

  6. 再谈Jquery Ajax方法传递到action

     原始出处 :http://cnn237111.blog.51cto.com/2359144/984466  本人只是转载 原文如下: 假设 controller中的方法是如下: public Act ...

  7. SpringMVC从Controller跳转到另一个Controller

    1. 需求背景   需求:spring MVC框架controller间跳转,需重定向.有几种情况:不带参数跳转,带参数拼接url形式跳转,带参数不拼接参数跳转,页面也能显示. 本来以为挺简单的一件事 ...

  8. 如何打印出lua里table的内容

    不像开发as3时用fb有强大的断点调试功能,一般lua开发不用什么高级的ide,貌似也没有适合的,就直接用sublime.exvim等文本编辑器,直接编译运行看结果.所以不能很方便的知道变量值,特别是 ...

  9. jQuery hide()并不等于hide(0)

    在实际使用中,经常用hide()函数来隐藏HTML元素,通常是没有什么问题的,但在一次做二级下拉菜单时遇到了问题,后来才发现有时候“speed”是不能省略的,即使“speed=0”,也就是说hide( ...

  10. JS 比较日期相隔都少天&& 比较两个日期大小&&指定日期往前后推指定天数

    //这些天常接触到有关于js操作日期事 就小结了一下,希望对你有帮助 function conversionDate(a,b){ var start =a.split('-'); var end = ...