首页 > Web开发 > 详细

AngularJS Best Practices: $routeProvider

时间:2015-12-01 07:09:50      阅读:318      评论:0      收藏: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‘, [
            ‘ngRoute‘,
            "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.

AngularJS Best Practices: $routeProvider

原文:http://www.cnblogs.com/zhangpengc/p/5009002.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!