Using the angular webapp generator

Setup

First, globally install the generator using npm :

npm install generator-angular-webapp -g

Make sure gulp and bower are also globally installed :

npm install gulp -g

npm install bower -g

Then create a director for your project and cd into it:

mkdir my-new-project && cd $

Finally run the main generator to scaffold your application

yo angular-webapp

Usage

Once the main generator finishes scaffolding your app you can now run gulp. Gulp must be running at all times during your development process, so that it's watchers can run your tests, inject your new files into karma.conf.js and index.html, and run your dist and deploy tasks automatically.

gulp

You will notice that the initially scaffolded tests are passing. As you're adding things to the project, the tests may be failing. This is ok, it's a regular step of the TDD process, just track down the error and fix it. A very common error will be wiring errors, when objects are injected into other objects before they exist.

Creating a new partial

Let's create a footer partial. First we'll run the template generator to create a new html partial :

yo angular-webapp:template footer

When asked about the path enter src/app/main, indicating that the footer partial should be created as :

./src/app/main/footer.html

This in fact, reflects exactly what this partial is supposed to do : provide the main footer for your app ...

We are now ready to add this footer to all the pages. Since it should be shown in all the pages, it should go in index.html, around your ng-view, meaning that will remain even when the route changes. In index.html add the following at the bottom of the body tag :

<footer ng-include="'app/main/footer.html'"></footer>

If gulp was running, the live-reload server should have reloaded your application in the browser, and your application should now show the default scaffolding text for the template.