Copyright © 2014 by Software Craftsmanship Guild.

All rights reserved. No part of these materials may be reproduced, distributed, or transmitted in any form or by any means, including photocopying, recording, or other electronic or mechanical methods, without the prior written permission of the Software Craftsmanship Guild. For permission requests, write to the Software Craftsmanship Guild, addressed “Attention: Permissions Coordinator,” at the address below.

Software Craftsmanship Guild526 S. Main St, Suite 609Akron, OH 44311

AngularJS Fundamentals

Software Craftsmanship Guild

Lesson Goals

Learn about SPA (single page applications) and how Google’s AngularJS Framework can help with the complexity.

What is a SPA App?

Single Page Applications are pages that contain multiple views that are shown and hidden dynamically based on events.

SPAs do not do full postbacks to the server to fully reload pages. They request data via ajax in the background.

Gmail is a good example of a complex SPA application.

SPA Challenges

• DOM Manipulation• History• Module Loading• Routing

• Caching• Object Modeling• Data Binding• Ajax/Promises• View Loading

AngularJS Features

• Data Binding• MVC• Routing• Testing• View Models• Views• Controllers

• jqLite• Templates• History• Factories• Directives• Services• Dependency Injection• Validation

Download AngularJSGo to angularjs.org and download the latest version.

Place the file in the Scripts folder of an ASP.NET MVC web application.

Don’t forget to right click -> properties, and unblock the file.

You can also install it from nuget

Add angular to the layoutAdd angular to the bundleconfig.cs file and reference the bundle in the shared layout page.

DirectivesA directive is a way to wire up angular to html elements to extend their behavior.

Angular directives by convention are named ng-* where * is the directive name.

For a simple example, we’re going to add a ng-app directive to our row div and tag a text input with a ng-model directive called name.

Then anywhere in our html we can use double braces {{ name }} to bind to the value of the textbox model. This is called a “data binding expression”

The ng-repeat DirectiveThe ng-repeat directive instructs angular to repeat an html element for every item in a collection.

Here we have initialized so data (ng-init creates default data on page load) and we want to loop through that array and create a list item for each element in the array.

ng-repeat is very similar to a foreach loop.

All directives are in the angularjs documentation:

http://docs.angularjs.org/api/ng.directive:ngRepeat

Using FiltersIn a data binding expression, we can use the pipe character to use filters that are built into angularjs.

Let’s say we have an array of friend objects. We can use filters to use the value of a text input to filter the list and perform other common tasks like ordering data.

We can also put filters on data binding expressions. Try doing {{ friend.name | uppercase }}

There is a list of filters in the documentation with examples.

Views, Controllers, and Scope

So far we have been working only in views. Views contain all your formatting and data binding syntax.

Controllers are intended to contain all your calculations and business logic.

Scope, or $scope as angular calls it, is the transport object that shuttles information back and forth between the controller and view.

Creating a View and ControllerIn angular, a controller is just a function that takes a $scope as a parameter.

AngularJS uses dependency injection to pass a scope in, which starts as empty and then we can add data to it.

Notice the usage of the new ng-controller directive to bind the containing elements to fields on the SimpleController.

We can have many controllers on a page and even chain controllers within elements, overwriting or inheriting fields.

It is common to have different controllers for different parts of a view.

Modules and RoutesModules in AngularJS are responsible for configuring routes.

Routes can register views and controllers for a given URL.

Controllers often call out to factory or service classes to handle their CRUD operations.

Modules contain all these things and are referenced by name in ng-app

* Image from Dan Wahlin

Creating a ModuleThe angular.module command creates a named module and allows for passing in an array of other modules if you want to build in complex dependencies.

Now all we need to do is add the controller to the module and then reference demoApp as the ng-app.

It’s typical to have many controllers in a module, particularly in a singe page application.

Handling RoutesRoutes allow our app to dynamically load different views into our page based on what the user does.

In order to enable routing, we must download the angular-route.js files into our script folders (nuGet).

We can then reference them in our bundle config below angularjs.

Now when we declare our angular.module, we can pass in ngRoute as a dependency and configure the $routeProvider in the module .config method like so:

Notice each route takes a controller and a templateUrl that points to an html file in our project.

Handling Routes – Adding Views Part 1Let’s make two views numbered 1 and 2. (Terrible naming I know)

View1 will be responsible for adding new players to our list, and View2 will just display players.

Here is the code for view 1. Notice the link to View 2. We define route links in angular by starting them with a #.

Also new is the ng-click directive where we have named a function called addPlayer() to be called when the button gets clicked. We should also add code to our controller to handle that.

Handling Routes – Adding Views Part 2

The second view will be our standard filter text box with list of players.

Last Step

Wherever in our page we decide to inject the views, we simply use the ng-view directive as a placeholder.

Re-use in Angular

AngularJS can use Factories, Services, and Providers in order to share data between different controllers.

There are minor differences between the three. We will look at Factories.

Setting up a FactoryA factory can be added to a module using the .factory syntax.

We simply give a name to our factory and then embed all of our data calls into it.

Then any controller that is registered with our module can call any of the factory methods so long as the factory is injected into the controller function as a parameter.

You can even inject factories into other factories!

Upgrading our Factory to use AjaxAngular has a built-in $http object that handles all of the http verbs. We are going to set up a WebAPI controller to return our player list as a JSON string to be parsed on the client.

First, add an empty WebAPI controller. If we didn’t check the WebAPI box before, we’ll have to make a slight modification to our global.asax file.

Add using Sytem.Web.Http;

Above the RouteConfig.RegisterRoutes() method put the following method call:

GlobalConfiguration.Configure(WebApiConfig.Register);

Create the Ajax ViewWe will now add a new controller action to our home controller called Ajax(). The code will be similar to our other pages- we will use a module and a factory.

The difference is that we will make a call to $http.get to the Web API URL of the Player controller (/api/player/)

$http.get returns data to the .success method if successful, and .error if not, otherwise the rest of our binding code remains the same.

Posting DataPosting data is very similar, and angular does most of the heavy lifting for converting your object to JSON format, which WebAPI handles out of the box.

Simply:1. Add a post method to the WebAPI

and the angular factory that takes a player object.

2. Add a form with two fields and a button.

3. Bind them to a newPlayer object in the scope.

4. Create a function to do the post and bind it to the button click

Happy binding!