AngularJS Fundamentals + WebAPI

57 %
43 %
Information about AngularJS Fundamentals + WebAPI

Published on September 30, 2014

Author: EricWise2



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

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

AngularJS Fundamentals Software Craftsmanship Guild

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

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. View slide

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 AngularJS Go to 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 layout Add angular to the bundleconfig.cs file and reference the bundle in the shared layout page.

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”

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: ive:ngRepeat

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

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

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.

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.

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.

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 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!

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);

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.

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!

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Angular Course: Fundamentals | Pluralsight

This course will teach you the Angular fundamentals required to create testable, MVC-style single page applications with AngularJS.
Read more

Oscar Meszar | AngularJS WebApi OWIN Authorization ...

AngularJS WebApi OWIN Authorization/Authentication Role Based I have been using Durandal to build sites for some time now. I’ve used it both in my ...
Read more

AngularJS in 60 Minutes - Fast and Fluid

AngularJS Fundamentals in 60-ish Minutes ... AngularJS in 60 Minutes ... My names Dan Wahlin and Ill be walking you through some of the key fundamentals, ...
Read more

AngularJS — Superheroic JavaScript MVW Framework

AngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with data-binding, MVW, MVVM, MVC ...
Read more

Dan Wahlin - Video Tutorial: AngularJS Fundamentals in 60 ...

AngularJS Fundamentals in 60-ish Minutes . Watch the complete video tutorial here or choose specific sections from the video below. Jump to a Specific Section:
Read more

AngularJS Fundamentals In 60-ish Minutes - YouTube

If you like the AngularJS in 60-ish Minutes video you'll love the new AngularJS JumpStart video ... AngularJS Fundamentals In 60-ish Minutes
Read more

How to secure my AngularJS and Web Api application

How to secure my AngularJS and Web Api application. ... some key security fundamentals? ... about using Angular JS with WebAPI 2.0 token based ...
Read more

AngularJS end-to-end web app tutorial Part I - YouTube

AngularJS end-to-end web app tutorial Part I ... AngularJS Fundamentals In 60-ish Minutes - Duration: 1:10:50. Dan Wahlin 1,557,566 views.
Read more

ASP.NET Core 1.0 MVC 6 using WEB API and AngularJs ...

ASP.NET Core 1.0 MVC 6 using WEB API and AngularJs Article History ASP.NET Core 1.0 MVC 6 ... Next step is to add WEBAPI Controller.
Read more