Using the angular webapp generator

Setup

First, globally install the generator using npm :

npm install generator-angular-webapp -g

Make sure gulp, bower and yeoman are also globally installed :

npm install gulp -g

npm install bower -g

npm install yeoman -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.

Scaffolding a new controller

Let's create a controller which exposes an action that pops an alert box. We'll call it alertController. Use the following options for the controller subgenerator, to keep things consistent:

• path : src/app/main
• Don't inject any items ( leave the list blank )
• Add a single method to be declared on the scope : showAlert
• Do not create a template
• Use $scope Keeping those recommended config parameters in mind call :

yo angular-webapp:controller alertController

You will notice that two files have been created. A controller file and a controller.spec file. Have a look at the spec file. You will notice that testing has been scaffolded for the showAlert method. The gulp output should now print that 5 tests are passing, since this new controller had 2 tests scaffolded.

Let's open up the main.html template now, and add the following HTML snippet, which uses our newly generated controller:

<div ng-controller="alertController">
 <button ng-click="showAlert()">Show Alert</button>
</div>

Save the file and the live-reload server should reload your app page, now showing the button inside the main template ( which sits behind the main route, which is why it shows on the root of your app / ).

Clicking on the Show Alert button, won't do anything ... that's right ... We have the method scaffolded but we need to implement the logic. Let's open the alertController.controller.js file and turn our stub method :

$scope.showAlert = function showAlert() {

};

Into a method with the planned behaviour:

$scope.showAlert = function showAlert() {
  alert("Hello World");
};

After saving this file, the live-reload server should reload the app page, and now the alert message should be displaying when clicking on the button.

We didn't discuss about the fact that when scaffolding any new files, or adding any new ones by hand, the gulp inject plugin is setup to automatically inject these new files into index.html and karma.conf.js, making the new code available for the app page and tests.

Scaffolding a new Route

Theoretically the step above was not necessary, since we already have a main controller, sitting under the main route and main template. But for the purpose of illustrating the controller sub generator, it made a decent example.

The controller subgenerator uses the template subgenerator to generate templates, when the option is set to do so. Likewise the route subgenerator uses the controller ( which in turn uses the template ) subgenerator, to provide a complete route consisting of a template html file, a index.js file to define the route, and a controller.js file defining the controller ( and not to forget, a controller.spec.js file to test the controller )

Understanding this let's generate a new route called test.

yo angular-webapp:route test

• select the path for this route to be src/app/test. It makes sense for a route to have it's own directory.
• add no injections to the controller. note that the $scope is always injected by default
• add no methods to the controller for now
• use $scope again
• select to create a template ( this should always be created for a route )

As expected, the files have been created. Navigating your app to the route /test, should now display the scaffolded template. Let's replace the context of the test.html template with the following code :

Today's date is {{today}}

Let's also update the test.controller.js file to include the today variable which is expected by the template

$scope.today = new Date();

Refreshing your app with the address http://localhost:8000/test should now print a hard to read, date string, indicating today's date.