zoukankan      html  css  js  c++  java
  • AngularJS Best Practices: ui-router

    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);
            }]);
    
    })();
  • 相关阅读:
    9.11 eventbus
    9.10,,,实现new instanceof apply call 高阶函数,偏函数,柯里化
    9.9 promise实现 写完了传到gitee上面了,这里这个不完整
    9.5cors配置代码
    9.5 jsonp 实现
    9.5 http tcp https总结
    9.3 es6 class一部分 and es5 class 发布订阅
    8.30 cookie session token jwt
    8.30vue响应式原理
    warning: LF will be replaced by CRLF in renard-wx/project.config.json. The file will have its original line endings in your working directory
  • 原文地址:https://www.cnblogs.com/zhangpengc/p/5011854.html
Copyright © 2011-2022 走看看