zoukankan      html  css  js  c++  java
  • AngularJS Best Practices: ngRoute

    app/
    ----- components/
    ---------- users/
    --------------- controllers/
    -------------------- users.controller.js
    --------------- views/
    -------------------- user-list.tpl.html
    --------------- app.users.js
    --------------- app.users.routes.js
    ---------- roles/
    --------------- controllers/
    -------------------- roles.controller.js
    --------------- views/
    -------------------- role-list.tpl.html
    --------------- app.roles.js
    --------------- app.roles.routes.js
    ----- app.js
    assets/
    ----- libs/
    ---------- angular/
    index.html

    index.html

    <!DOCTYPE html>
    <html ng-app="app">
        <head>
            <title></title>
            <meta charset="utf-8" />
        </head>
        <body>
            <ul>
                <li>
                    <a href="#/users">Users</a>
                </li>
                <li>
                    <a href="#/roles">Roles</a>
                </li>
            </ul>
    
            <ng-view></ng-view>
    
            <script type="text/javascript" src="/assets/libs/angular/angular.min.js"></script>
            <script type="text/javascript" src="/assets/libs/angular/angular-route.min.js"></script>
            <script type="text/javascript" src="/app/app.js"></script>
            <script type="text/javascript" src="/app/components/users/app.users.js"></script>
            <script type="text/javascript" src="/app/components/users/app.users.routes.js"></script>
            <script type="text/javascript" src="/app/components/users/controllers/user.controller.js"></script>
            <script type="text/javascript" src="/app/components/roles/app.roles.js"></script>
            <script type="text/javascript" src="/app/components/roles/app.roles.routes.js"></script>
            <script type="text/javascript" src="/app/components/roles/controllers/role.controller.js"></script>
        </body>
    </html>

    app.js

    (function() {
        'use strict';
    
        angular
            .module('app', ["app.users",
                "app.roles"
            ]);
    
    })();

    app.users.js

    (function() {
        'use strict';
    
        angular
            .module('app.users', [
                'ngRoute'
            ]);
    
    })();

    app.users.routes.js

    (function() {
        'use strict';
    
        angular
            .module('app.users')
            .config(['$routeProvider', function($routeProvider) {
                $routeProvider.
                    when('/users', {
                        templateUrl: '/app/components/users/views/user-list.tpl.html',
                        controller: 'UserController'
                    });
            }]);
    
    })();

    user-list.tpl.html

    <h2>Users</h2>

    user.controller.js

    (function() {
        'use strict';
    
        angular
            .module('app.users')
            .controller('UserController', function() {
            });
    
    })();

    The "use strict" Directive

    The "use strict" directive is new in JavaScript 1.8.5 (ECMAScript version 5).

    It is not a statement, but a literal expression, ignored by earlier versions of JavaScript.

    The purpose of "use strict" is to indicate that the code should be executed in "strict mode".

    With strict mode, you can not, for example, use undeclared variables.

  • 相关阅读:
    Vue.config.productionTip = false;
    Node学习笔记
    Redux学习笔记------容器组件与展示组件分离
    Redux学习笔记------数据流
    Redux学习笔记------store
    Redux学习笔记------reducer
    Redux学习笔记------action
    Redux学习笔记------基础介绍
    过滤emoji表情
    textarea自适应高度
  • 原文地址:https://www.cnblogs.com/zhangpengc/p/5009002.html
Copyright © 2011-2022 走看看