ng-scripts

ng-scripts - Create AngularJS projects quickly

Install

npm install -g ng-scripts

Usage

ng --help
 
  Usage: ng [options]
 
  Options:
 
    -h, --help        output usage information
    -V, --version     output the version number
    -n, --new         create new app
    -s, --service     create service
    -c, --controller  create controller
    -d, --directive   create directive
    -C, --component   create component

Getting Started

Create new app

ng --new your-app-name

This command creates a new app with the following structure:

.
├── README.md
├── app
│   ├── app.js
│   ├── assets
│   │   ├── config
│   │   │   └── env.json
│   │   └── index.html
│   ├── config.js
│   ├── controllers
│   │   └── controllers.js
│   ├── directives
│   │   └── directives.js
│   ├── global.js
│   ├── routes
│   │   └── routes.js
│   ├── services
│   │   ├── providers.js
│   │   └── services.js
│   └── templates
│       └── layout.tpl.html
├── bower.json
├── brunch-config.js
├── bundle.js
├── notice.txt
├── package.json
└── styles
    └── main.scss

The project is setup to use Brunch, SASS and Bower.

After the project is created, you need to install Brunch, the node packages dependencies and third-party libraries.

npm install -g brunch 

npm install

bower install

To run the project using Brunch:

brunch watch --server
15:24:44 - info: application started on http://localhost:9000/
15:24:45 - info: compiled 20 files into 4 files, copied 2 in 1.5 sec

Third-party libraries are installed in the vendor folder and included in bundle.js

module.exports = {
  files: [
    'vendor/lodash/dist/lodash.js',
    'vendor/jquery/dist/jquery.js',
    'vendor/angular/angular.js',
    'vendor/angular-bus/angular-bus.js',
    'vendor/angular-mocks/angular-mocks.js',
    'vendor/angular-ui-router/release/angular-ui-router.js'
  ]
};

Create service

Create a factory service

ng --service Accounts

Create controller

ng --controller RegisterAccount

Create directive

ng --directive sideMenu

Create component

ng --component homeContainer

Example Project

.
├── README.md
├── app
│   ├── app.js
│   ├── assets
│   │   ├── config
│   │   │   └── env.json
│   │   └── index.html
│   ├── components
│   │   └── home-container
│   │       ├── home-container.js
│   │       ├── home-container.scss
│   │       └── home-container.tpl.html
│   ├── config.js
│   ├── controllers
│   │   ├── RegisterAccount.js
│   │   └── controllers.js
│   ├── directives
│   │   ├── directives.js
│   │   └── side-menu
│   │       ├── side-menu.js
│   │       ├── side-menu.scss
│   │       └── side-menu.tpl.html
│   ├── global.js
│   ├── routes
│   │   └── routes.js
│   ├── services
│   │   ├── Accounts.js
│   │   ├── providers.js
│   │   └── services.js
│   └── templates
│       └── layout.tpl.html
├── bower.json
├── brunch-config.js
├── bundle.js
├── notice.txt
├── package.json
└── styles
    └── main.scss

License

MIT © Antonio Aguilar, 2017.