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

1. 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.

1. Compiles partials into js to be used in angular's $templateCache
2. Wires bower dependencies into the index.html
3. Minifies your images
4. Adds a watcher to rebuild all your source files on change
5. 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
            ...