A gentle introduction to AngularJS culminating with integration of GET/POST into a WebAPI controller.

1. 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 Guild
526 S. Main St, Suite 609
Akron, OH 44311

2. AngularJS Fundamentals
Software Craftsmanship Guild

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

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

5. SPA Challenges
• DOM Manipulation
• History
• Module Loading
• Routing
• Caching
• Object Modeling
• Data Binding
• Ajax/Promises
• View Loading

6. AngularJS Features
• Data Binding
• MVC
• Routing
• Testing
• View Models
• Views
• Controllers
• jqLite
• Templates
• History
• Factories
• Directives
• Services
• Dependency Injection
• Validation

7. Download AngularJS
Go 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

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

9. Directives
A 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”

10. The ng-repeat Directive
The 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.direct
ive:ngRepeat

11. Using Filters
In 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.

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

13. Creating a View and
Controller
In 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.

14. Modules and Routes
Modules 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

15. Creating a Module
The 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.

16. Handling Routes
Routes 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.

17. Handling Routes – Adding
Views Part 1
Let’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.

18. Handling Routes – Adding Views Part 2
The second view will be our standard filter text box with list of players.

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

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

21. Setting up a Factory
A 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!

22. Upgrading our Factory to
use Ajax
Angular 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(WebAp
iConfig.Register);

23. Create the Ajax View
We 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.

24. Posting Data
Posting 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!