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.