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. windows开机启动项

    原来就一个命令呀:msconfig 1.在开始菜单中输入 msconfig 命令,回车 2.在弹出的对话框中取消不想启动的程序 3.点击应用->确定->不启动

  2. C# Double保留小数点后面位数

    C# Double保留小数点后面位数 有的时候我们要对一些数据进行百分比的操作.一般的数据我们只要用 .ToString("P")就可以得到小数点后2位的百分比.而且是自动 加上% ...

  3. AE唯一值符号化的流程以及过程

    唯一值符号化的流程以及过程(转)   一.获取ServerStyle库中的符号       Style符号库在ArcGIS Engine开发中对应的是ServerStyle符号库,可以通过专门的转换程 ...

  4. 延迟加载图片插件LazyLoad.js的使用方法

    我们常常会见到很多网页的图片并不是一打开页面就全部加载的,而是浏览到当前的图片位置才显示出来.这是怎么实现出来的呢? 其实这就是目前较为流行的“延迟加载”(Lazy Load)技术,灵感来自Matt ...

  5. silverlight Canvas、StackPanel、Grid三者之间的关系

    学习 silverlight   首先Canvas.StackPanel.Grid 博客园里看到jailu的这篇文章整理得很好 贴下来: Silverlight提供了非常灵活的布局管理系统,让程序员和 ...

  6. [CareerCup] 17.4 Maximum of Two Numbers 两数中的较大值

    17.4 Write a method which finds the maximum of two numbers. You should not use if-else or any other ...

  7. hive中导入json格式的数据（hive分区表）

    hive中建立外部分区表,外部数据格式是json的如何导入呢? json格式的数据表不必含有分区字段,只需要在hdfs目录结构中体现出分区就可以了 This is all according to t ...

  8. Javascript杂记(一)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. mpdf部署到linux环境中遇到的问题

    首先遇到的问题未:Error - mPDF requires mb_string functions. Ensure that PHP is compiled with php_mbstring.dl ...

  10. sql替换指定字段指定字符串

    REPLACE ('字段','string','newstring') UPDATE dw_site SET username =REPLACE (username,'凯鋆','韩优')