代码改变世界

AngularJS Best Practices: ngRoute

2015-12-01 06:18  zhangpengc  阅读(333)  评论(0)  编辑  收藏  举报

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.