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.