#Application Core ##Angular + Browserify + Gulp template (Bookshelf project) This is core part of project, that contains build-system and simple example of AngularJs application for testing.

Application and build based on:

• AngularJS
• SASS
• Angular Material
• Font Awesome
• Color Me Sass
• Gulp
• Babel
• Browserify
• EsLint

##Getting started ###Required setup To run build system, globally installed Gulp is needed:

$ npm install gulp -g

or a bit newer version:

$ npm install gulp-cli -g

###How to start? At first you should download all required NodeJs modules:

$ npm install

and then, to run development process, just type:

$ gulp

or if you want to obtain result build:

$ gulp --build

##Application ###Structure Current required structure:

┏━┳━ app                  //root development directory
┃ ┣━ compiled             //autogenerated directory with development application version
┃ ┣━ fonts                //Bootstrap and FontAwesome fonts
┃ ┣━ vendors              //optional directory. all non imported scripts and styles should be here
┃ ┣━┳━ sass               //application styles (SASS)
┃ ┃ ┣━ partials           //directory for your .scss files
┃ ┃ ┗━ main.scss          //entry point for styles build. Here should be all import of your and any other styles
┃ ┗━┳━ scripts            //all application script should be here
┃   ┣━ core               //required. !Do not change without strong need!
┃   ┣━ configs            //required. App configuration files. Read AngularJs/Configs part to get more info.
┃   ┣━ all other folders  //optional, as autoload is implemented. Read more in AngularJs part
┃   ┗━ app.main.js        //main entry point to build application
┗━ dist                   //autogenerated directory with build result

//TODO: add possibility of structure configuration. If appears any need. If possible. ##AngularJs part ###@App(configurationObject) Should be imported from: 'core/app'.

#####configurationObject Type: object Object that defines root module. Required.

####configurationObject.name Type: string Define root module name. Required.

####configurationObject.modules Type: Array of strings

Represents all external angular modules, like: ngRoute, ui.bootstrap or any other; Each external module also should be imported to app.main.js as it allows Browserify to collect it from node_modules. Otherwise - provide required module_name.js file in vendors directory. Required if any external module presents.

Module 'main.templates' contains all compiled to $templateCache .html files from app/scripts directory. Better to have

Usage decorator @App(obj) to define you application main modules:

import App from 'core/app';
import 'angular-ui-router';

@App({
    name: 'main',
    modules: ['main.templates', 'ui.router']
})
export class MainApp { }

####exported class Minimal requirement:

@App(...)
export class SomeName { }

Also, if any run on start is needed:

@App(...)
export class SomeName {
    run(/* required injections */){
        'ngInject';
        // do some stuff...
    }
}

###@Controller(name, module='main.controllers') Should be imported from: 'core/controllers'; ####name string Name of controller. Same rule as for typical angular controller. Like 'myCustomController'. Required #####module string Optional parameter. Default value: 'main.controllers'. You can redefine it... But why could you need that?

Required to define angular controller with used 'controllerAs' property. On view you can use it via vm.whateverYouNeed

Example:

import Controller from 'core/controller';

@Controller('main')
export class Main{
    constructor($timeout, or any required injection){
        'ngInject'; // <- !!! Required for work of minified build!!!
        this.someProperties = 'someValue';
    }
}

Usage in html:

<div>
    {{vm.someProperties}}
</div>

#To be continued...