Angular RequireJS Seed

This project is a base for modular project with AngularJS.

• Application

  • AngularJS - Superheroic JavaScript MVW Framework.
  • RequireJS - App module loader and optimizer for javascript application files
  • $script.js - An asynchronous JavaScript loader used to load all libraries.
  • Sass - Powerful professional grade CSS extension language.
  • Bootstrap - The most popular HTML, CSS, and JS framework.
  • Gulp - The streaming build system.
  • Bower - A package manager for the web.

• Testing

  • KarmaJS - Spectacular Test Runner for Javascript.
  • Jasmine 2.0 - Behavior-driven development framework for testing JavaScript code.

Instructions

Usage

Directory Layout

build/                                  - folder with compile or build app
    css/
        style.css
    vendor/
        angularjs/
    app.js
    boot.js
    index.html
src/                                    - application source files
    modules/                            
        home/                           - module folder
            controllers/
                homeController.js
            models/
            services/
            views/
                index.tpl.html
            homeModule.js               - main file of module with declaration all of dependency 
            homeRoute.js                - routing for module
        users/                          
    styles/                             - folder for all sass styles
        style.scss
    vendor/                             - folder for libraries
        angularjs/
        angular-mocks/
    app.js                              - main file of application with declaration / registration all of modules
    boot.js                             - READONLY - file to load libraries asynchronous and run app with requirejs
    config.js                           - configuration file - config to RequireJS and vendors
    index.html                          
test/                                   
    config/
        karma.conf.js
        karmaBoot.js
    specs/
        modules/                        - test specs group by modules
            home/
                homeControllersSpec.js
            users/
Gulpfile.js
bower.json
package.json

Example main file for module src/modules/home/homeModule.js

(function (define) {
    'use strict';

    define([
            'home/controllers/homeController',
            'home/services/homeService',
            'home/homeRoute'
        ],
        function (HomeController, HomeService, homeRoute) {
            var moduleName = 'Home';

            angular.module(moduleName, [])
                .config(homeRoute)
                .controller('HomeController', HomeController)
                .service('HomeService', HomeService);

            return moduleName;
        });

}(define));

Example app.js with register homeModule

(function (define) {
    "use strict";

    define([
            'home/homeModule',
        ],
        function (homeModule) {
            var app, appName = 'app.Name';

            var depen = [
                'ngRoute',
                'templatescache',

                homeModule
            ];

            app = angular
                .module(appName, depen);

            angular.bootstrap(document.getElementsByTagName("body")[0], [appName]);

            return app;
        }
    );

}(define));

Example src/config.js

if (typeof define !== 'function') {
    var define = require('amdefine')(module);
}

define({
    vendors: {
        main: [
            'vendor/requirejs/require.js',
            'vendor/angular/angular.js',
        ],
        library: [
            'vendor/angular-route/angular-route.js',
            'vendor/jquery/dist/jquery.js'
        ],
        testLibrary:[
            'vendor/angular-mocks/angular-mocks.js'
        ]
    },
    requirejs: {
        baseUrl: '',
        paths: {
            'home': 'modules/home'
        },
        shim: {}
    }
});

Install

• Install all tools using in the application directory npm install.
• Run bower bower install to install all front-end dependencies.
• Go to start application!

Start the Application

Compile version - compile, concat, minify and optimized application.
Build version - unminified and not optimized version used to local debug.

• Create build version using gulp build.
• Create compile version using gulp compile.

Run tests

Before run test compile or build application and then using gulp test.

Local server

Start application with local server with default configuration http://localhost:8080

• Create build version and start local server gulp run-build-server
• Create compile and start local server gulp run-compile-server