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.

查看全文

相关阅读:
策略模式
 装饰模式
 责任链模式
 算法_快速排序
 算法_二分查找
 数据结构学习笔记_表
 集合遍历remove时ConcurrentModificationException异常
 LinkedHashMap笔记
 Windows相关命令
 高效率幂运算

原文地址：https://www.cnblogs.com/zhangpengc/p/5009002.html