Generator-ng-voi NPM

generator-ng-voi

Let us worry about the application structure so that you can focus on development :)

About

ng-voi has been developed to give you some relaxation in maintaining the application structure, it creates structure which is pre-configured with the tools that you might need in developing your dream project.

Other Pre-configured Tools

UI-Router
Restangular
Angular Messages
Bootstrap
Font Awesome
Local Storage (ngStorage)
SCSS

Setup

Prerequisites

NOTE: Make sure you have latest versions of these tools Node.js and npm - Install node and npm from their website Yeoman, Gulp and Bower - Run this command with ADMIN rights to avoid any error during installation

npm install -g yo gulp bower

Compass for SCSS - Install ruby from link and then install compass with this command

gem install compass

Generator

npm install -g generator-ng-voi

Development

Generate your project

Create an empty directory - create and change directory

mkdir projectName && cd projectName

Start the magic - Initiate the generator

yo ng-voi

Answer the questions asked, once the setup is completed, you are ready to code! :)

Run the project

gulp

This will open the browser with your project hosted at http://localhost:3000

Files Structure

Application Files

├──app/
|  ├──fonts/
|  |  └──...                                        # some font files
|  ├──src/                                          # source files
|  |  ├──common/                                    # common module folder, contains global factories/services/other components
|  |  |  ├──exceptions/                             # exceptions interceptor folder
|  |  |  |  └──exceptions.factory.js/               # http interceptor
|  |  |  └──common.module.js                        # common module file
|  |  ├──components/                                # components module folder, contains global directives
|  |  |  └──components.module.js                    # components module file
|  |  ├──core/                                      # core module folder, mostly contains third party components configs
|  |  |  ├──core.constant.js                        # a constant file
|  |  |  ├──core.module.js                          # core module file
|  |  |  ├──httpStatus.constant.js                  # some predefined http status codes
|  |  |  ├──restangular.config.js                   # restangular config file
|  |  |  └──router.config.js                        # router config file
|  |  ├──layouts/                                   # layouts module folder, a test module created by default
|  |  |  ├──header.html/                            # application header html
|  |  |  ├──home.html/                              # application home page html
|  |  |  ├──layouts.controller.js/                  # a controller
|  |  |  ├──layouts.html/                           # html page contains named UI views
|  |  |  └──layouts.module.js                       # layouts module file
|  |  ├──app.module.js/                             # main module file, contains all other app modules
|  ├──styles/                                       # styles
|  |  ├──css/                                       # this folder will contain the converted css
|  |  |  └──...                                     # converted css file and folder
|  |  ├──scss/                                      # this folder will contain the scss
|  |  |  ├──partials/                               # contains some individual scss files
|  |  |  |  ├──globals.scss                         # global scss
|  |  |  |  └──home.scss                            # home.html's scss
|  |  |  └──main.scss                               # contains imported scss statements
|  └──index.html                                    # main index.html file
└──...

Configuration Files

├──.bowerrc                                         # bower config file
├──.gitignore                                       # gitignore
├──bower.json                                       # bower components details
├──gulp.config.js                                   # gulp config file
├──gulpfile.js                                      # gulp tasks
└──package.json                                     # node packages details

Sub-generators

We have added many sub-generators to ease you during development, just run any sub-generator and it will add the required component in the project.

yo ng-voi:module <moduleName>                       # creates a new module
yo ng-voi:controller <moduleName>.<controllerName>  # creates a controller in a module
yo ng-voi:factory <moduleName>.<factoryName>        # creates a factory in a module
yo ng-voi:directive <moduleName>.<directiveName>    # creates a directive in a module
yo ng-voi:filter <moduleName>.<filterName>          # creates a filter in a module
yo ng-voi:value <moduleName>.<valueName>            # creates a value in a module
yo ng-voi:constant <moduleName>.<constantName>      # creates a constant in a module
yo ng-voi:view <moduleName>.<viewName>              # creates a view in a module

The above commands can also be run without the arguments, and we will take care of that. e.g:

Only component name - if you run the controller sub-generator with only component name

yo ng-voi:controller <controllerName>

The generator will ask you the module name later during component creation

No argument - if you run the controller sub-generator with no argument

yo ng-voi:controller

The generator will ask you the module name and controller name later during component creation

Multi-level Directory Support

Though we are following Module based approach for structuring, but in case you need to create multi level directories, it's also supported by modifying the command as follows

yo ng-voi:controller <moduleName>.<directoryPath>/<controllerName>

This will put the controller in a directory path specified in the command. e.g:

yo ng-voi:view moduleA.models/viewA

The output will be like this

src/
   ├──moduleA/
   |  ├──moduleA.module.js
   |  ├──moduleA.controller.js
   |  ├──moduleA.html
   |  └──models/                    # the directory, specified in the command
   |     └──viewA.html              # the new view, just added
   └──...

Gulp Tasks & Production Build

Development Tasks

You may only want to run this single command during development as it loads the project in browser and also watch for any change in the files and of course the scss to css conversion

gulp                                # or gulp serve

The other useful commands are

gulp watch                          # watch for changes
gulp sass                           # scss to css conversion

Production Tasks

We have already covered the production build configurations

gulp build                          # prepares a production ready build of the project inside /build folder
gulp serve-build                    # open the production build in browser