Angular Boilerplate

about.js

(function(app) {

    app.config(['$stateProvider', function ($stateProvider) {
        $stateProvider.state('about', {
            url: '/about',
            views: {
                "main": {
                    controller: 'AboutController',
                    templateUrl: 'about/about.tpl.html'
                }
            },
            data:{ pageTitle: 'About' }
        });
    }]);

    app.controller('AboutController', ['$scope', function ($scope) {

        var init = function() {
            // A definitive place to put everything that needs to run when the controller starts. Avoid
            //  writing any code outside of this function that executes immediately.
        };

        init();
    }]);

}(angular.module("myProject.about", [
    'ui.router'
])));

app.js

(function(app) {

    app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/home');
    }]);

    app.run(function () {});

    app.controller('AppController', ['$scope', function ($scope) {

    }]);

}(angular.module("myProject", [
    'myProject.home',
    'myProject.about',
    'templates-app',
    'templates-common',
    'ui.router.state',
    'ui.router',
])));

app.spec.js

describe('AppController', function () {
    describe('isCurrentUrl', function () {
        var AppCtrl, $location, $scope;

        beforeEach(module('myProject'));

        beforeEach(inject(function ($controller, _$location_, $rootScope) {
            $location = _$location_;
            $scope = $rootScope.$new();
            AppCtrl = $controller('AppController', { $location: $location, $scope: $scope });
        }));

        it('should pass a dummy test', inject(function () {
            expect(AppCtrl).toBeTruthy();
        }));
    });
});

home.js

/**
 * Each section of the site has its own module. It probably also has
 * submodules, though this boilerplate is too simple to demonstrate it. Within
 * 'src/app/home', however, could exist several additional folders representing
 * additional modules that would then be listed as dependencies of this one.
 * For example, a 'note' section could have the submodules 'note.create',
 * 'note.delete', 'note.edit', etc.
 *
 * Regardless, so long as dependencies are managed correctly, the build process
 * will automatically take take of the rest.
 */
(function(app) {

    app.config(['$stateProvider', function ($stateProvider) {
        $stateProvider.state('home', {
            url: '/home',
            views: {
                "main": {
                    controller: 'HomeController',
                    templateUrl: 'home/home.tpl.html'
                }
            },
            data:{ pageTitle: 'Home' }
        });
    }]);

    // As you add controllers to a module and they grow in size, feel free to place them in their own files.
    //  Let each module grow organically, adding appropriate organization and sub-folders as needed.
    app.controller('HomeController', ['$scope', function ($scope) {

        var init = function() {
            // A definitive place to put everything that needs to run when the controller starts. Avoid
            //  writing any code outside of this function that executes immediately.
        };

        $scope.someVar = 'blue';
        $scope.someList = ['one', 'two', 'three'];
        $scope.someFunctionUsedByTheHomePage = function () {
            alert('Congratulations');
        };

        init();
    }]);

// The name of the module, followed by its dependencies (at the bottom to facilitate enclosure)
}(angular.module("myProject.home", [
    'ui.router'
])));

home.spec.js

/**
 * Tests sit right alongside the file they are testing, which is more intuitive
 * and portable than separating 'src' and 'test' directories. Additionally, the
 * build process will exclude all '.spec.js' files from the build
 * automatically.
 */
describe('home section', function () {
    beforeEach(module('myProject.home'));

    it('should have a dummy test', inject(function() {
        expect(true).toBeTruthy();
    }));
});

home.tpl.html

<h1>Home of My project</h1>

<p>Code it up</p>

<p>
    <span ng-bind="someVar" />
    <ul>
        <li ng-repeat="item in someList">{{item}}</li>
    </ul>
    <button class="btn btn-primary" ng-click="someFunctionUsedByTheHomePage()">Click Me</button>
</p>

index.html

<!DOCTYPE html>
<html ng-app="myProject" ng-controller="AppController">
<head>
    <title ng-bind="pageTitle"></title>

    <!-- font awesome from BootstrapCDN -->
    <link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

    <!-- compiled CSS --><% styles.forEach( function ( file ) { %>
    <link rel="stylesheet" type="text/css" href="<%= file %>" /><% }); %>

    <!-- compiled JavaScript --><% scripts.forEach( function ( file ) { %>
    <script type="text/javascript" src="<%= file %>"></script><% }); %>
</head>
<body>
    <header>
        <nav class="container navbar-default">
            <ul class="nav navbar-nav">
                <li ui-sref-active="active">
                    <a ui-sref="home">Home</a>
                </li>
                <li ui-sref-active="active">
                    <a ui-sref="about">About</a>
                </li>
            </ul>
        </nav>
    </header>

    <div class="container" ui-view="main"></div>

    <footer class="container">
        (c) <%= date %> <%= author %>
    </footer>
</body>
</html>