generator-ngbegin

NgBegin
=====

This is a yeoman generator to create Angular.js applications.

This generator uses Stylus as the CSS preprocessor, NgRoute or ui-router, and optionally AngularFire.

The build process is handled by gulp

Getting Started
=====
To get started type

yo ngbegin

This will ask you if you would like to use NgRoute or ui-router for routing.

It will also ask if you would like to use AngularFire to connect to firebase.

You will end up with an application structure like this

- NgBegin
- app
- fonts
- images
- partials
index.html // initial partial to be loaded
- scripts
module.js // Main module used by ng-app
- styles
main.styl
index.html // Main page to be served
- bower_components
- node_modules
.bowerrc
bower.json
gulpfile.js
package.json

Now you have a fully functioning (although very simple) angular app!

Lets check it out. Run this

gulp serve

This command does a lot.

1. Processes your scripts
* Concatenate
* Runs them through NgAnnotate
* minifies
* writes sourcemaps
2. Compiles main.styl
* Runs through stylus
* Runs through autoprefixer. No more -webkit or -moz
* As a side note, only main.styl gets processed. I recommend using multiple stylus files per application module and using

@import

to include them at build time.

3. Compiles partials into js to be used in angular's $templateCache
4. Wires bower dependencies into the index.html
5. Minifies your images
6. Adds a watcher to rebuild all your source files on change
7. Serves the built files
* Once the serve is started it using BrowserSync to stream changes to the client
* No more refreshing!

Adding modules
=====

To add modules run this command

yo ngbegin:module moduleName

This will add the following files

- NgBegin
- app
...
- partials
- moduleName
index.html
...
- scripts
-moduleName
module.js // new module that can be imported in the main module.js
moduleName.controllers.js // controllers for the new module
moduleName.directives.js // directives for the new module
moduleName.filters.js // filters for the new module
moduleName.services.js // services for the new module
...