Complimentary Webcast: Add Angular to your Web Applications for Better Performance

Free Webcast on Angular

On June 30, 2016 at 10:00am PST. PDSA will present a complimentary webcast on how add AngularJS to your web applications. Learn how Angular can help speed up your web applications and how easy it is to use this popular client-side framework.

There is no experience with Angular needed to attend. You will see an example of taking a real MVC web page and slowly add some Angular code to replace a whole section of the MVC page.

To sign up, please contact David Lefort at Davidl@pdsa.com or call him at (714) 734-9792 x222.

Best Ways to Reduce Software Bugs

Reduce Bugs

Recently I had a mentoring client of mine ask me, what he thought was a simple question. “How do I make sure I don’t have bugs in my code?” That seems like such a simple question, but as we all know, there is no single answer to this question, if any answer at all. After all, we are all human, and we make mistakes. However, I did try to give him a little bit of advice from things that I have learned over the years. In this special report, I exam some of the ways to avoid bugs in our applications.

Read our special report entitled Best Ways to Reduce Software Bugs.

Things You Need to Know to Survive any Project

AngularWe have been involved in project management related activities for over 30 years. Our special report is a collection of things you need to know to help you survive any project. This list is not exhaustive, but has many important recommendations that you can begin using today.

We have divided the discussion into 5 key areas: customer, people, process, technology and communication. All of these areas are closely integrated in any project, and the glue that holds them all together is you.

Read our special report entitled Project Manager's Survival Guide or Deliver On-Time and On-Budget.

Call the Web API from Angular

This is the 3rd blog post in our series on Angular. The first part entitled Get Started with Angular shows you how to add Angular to a project. The second part, Build Lists of Data Using Angular, showed you how to build lists of data using hard-coded arrays of object literals. You should read those two blog entries first if you are not familiar with adding Angular to a project, don’t know what a module or a controller is, or want to understand basic data binding.

In this blog post, you will take the product page with the HTML table and call a Web API to retrieve product data. The data returned from the Web API builds the HTML table of products using the ng-repeat directive.

To prepare for calling a Web API from your Angular controller, you need to do a little setup. For purposes of this blog post, you will be doing the following things.

  1. Build Product classes to hold product data
  2. Add a Web API Controller to your Project
  3. Ensure you have configured ASP.NET to use the Web API
  4. Call the Web API from Angular

Build Product Classes

Instead of using JavaScript object literals to populate an HTML table, you want to retrieve a set of objects from some data store on a server. Web API will take one of your classes and serialize it into a JSON object. To start, create a class named TrainingProduct that contains all of the properties to represent a product object. Create the class shown below in your web project.

public class TrainingProduct
{
  public int ProductId { get; set; }
  public string ProductName { get; set; }
  public DateTime IntroductionDate { get; set; }
  public string Url { get; set; }
  public decimal Price { get; set; }
  public int CategoryId { get; set; }
}

Next, build a class named TrainingProductManager that is responsible for building a collection of TrainingProduct objects. You could use the Entity Framework, Haystack or any other data layer you want to retrieve data from a Product table in a database. To keep things simple in this post, I am just going to create some mock data as shown in the code below.

public class TrainingProductManager
{
  public List<TrainingProduct> Get()
  {   
    List<TrainingProduct> ret = new List<TrainingProduct>();
    // TODO: Add your own data access method here
    ret = CreateMockData();
      
    return ret;
  }
  protected List<TrainingProduct> CreateMockData()
  {
    List<TrainingProduct> ret = new List<TrainingProduct>();
    ret.Add(new TrainingProduct()
    {
      ProductId = 1,
      ProductName = "Extending Bootstrap with CSS, 
                    JavaScript and jQuery",
      IntroductionDate = Convert.ToDateTime("6/11/2015"),
      Url = "http://bit.ly/1SNzc0i",
      Price = Convert.ToDecimal(29.00),
      CategoryId = 1
    });
    ret.Add(new TrainingProduct()
    {
      ProductId = 2,
      ProductName = "Build your own Bootstrap Business
                     Application Template in MVC",
      IntroductionDate = Convert.ToDateTime("1/29/2015"),
      Url = "http://bit.ly/1I8ZqZg",
      Price = Convert.ToDecimal(29.00),
      CategoryId = 1
    });
    // MORE ENTRIES HERE
}

Once you have a generic List of TrainingProduct objects, it is this data that is returned from the Web API. As I stated previously, Web API will automatically serialize this generic List into an array of JSON objects and return that to your Angular controller.

Add Web API to your Project

Depending on how you built your project you may or may not have the appropriate DLLs and other necessary artifacts to support an ASP.NET Web API controller class. I am going to assume that you have not used a Web API in your project and show you how to add them to your project.

Add a new folder \Controllers-Api. While it is not necessary to add a new folder to contain your Web API controller classes, I like keeping them separate from my MVC controllers.

Right mouse click on your Visual Studio project and select Add | New Folder from the content-sensitive menu. Set the name to Controllers-Api and press the enter key.

Add a new controller by right-mouse clicking on the new folder you just added and select Add | Web API Controller Class (v2.1). NOTE: If this option does not show up on your Add menu, select New Item…, drill into the Web | Web API folder on the dialog and select Web API Controller Class (v2.1). Set the name to ProductController and click the OK or the Add button.

Within the ProductController class locate the following method stub created for you by Visual Studio.

// GET api/<controller>
public IEnumerable<string> Get() {
  return new string[] { "value1", "value2" };
}

Replace this method with the following code. NOTE: You may need to include the Namespace in which you created the TrainingProduct and TrainingProductManager classes.

[HttpGet()]
public IHttpActionResult Get() {
  IHttpActionResult ret = null;
  TrainingProductManager mgr =
    new TrainingProductManager();
  List<TrainingProduct> list;
  // Get all Products
  list = mgr.Get();
  if (list.Count > 0) {
    ret = Ok(list);
  }
  else {
    ret = NotFound();
  }
  return ret;
}

In the code above you create an instance of the TrainingProductManager class as you use that to get a collection of TrainingProduct objects. The return value from your Web API should always be an instance of an IHttpActionResult. This message includes an HTTP status code such as 200 or 404 plus any data you wish to send. In this case you use the Ok() method that is part of the ApiController class. This method accepts any data you wish to send, in this case the list of products, and sets a 200 status code. This is where the Web API framework automatically serializes your data into JSON. If there are no products to return use the NotFound() method to return a 404 status code to inform the front end that no data was found.

Configure Web API Routes

If you did not have any Web API features in your project before, you may need to register your intent to use the Web API with ASP.NET. This means that you have to configure the route that MVC should follow to locate any Web API controller so MVC knows they are different from a page controller. To do this, create a different prefix for calling your API controllers such as “api”. The easiest method to accomplish this registration is to create a class called WebApiConfig. Add this class to the \App_Start folder in your project. Type the following code into this new class. NOTE: Check to make sure this class does not already exist in your \App_Start folder.

using System.Web.Http;
public static void Register(
       HttpConfiguration config)
{
  // Web API routes
  config.MapHttpAttributeRoutes();
  // Add route for our API calls
  config.Routes.MapHttpRoute(
      name: "DefaultApi",
      routeTemplate: "api/{controller}/{id}",
      defaults: new { id =
                  RouteParameter.Optional }
  );
}

The above code first configures the ASP.NET runtime to allow for Web API calls by calling the MapHttpAttributeRoutes method. Next, it adds a new HttpRoute and sets up a new template with the “api” prefix. When you make a call to your Web API controllers you always prefix them with “api” to distinguish them from a normal MVC page controller. You can use any prefix you desire, but “api” is an industry convention.

Now that you have this class and method defined you need to call it from the Application_Start method in the Global.asax. Open the Global.asax file and add two new using statements. The first will be to the System.Web.HTTP namespace. This is needed to access the GlobalConfiguration class that is responsible for configuring the ASP.NET runtime with your new Web API template. The second namespace will the name of your project, followed by App_Start which is the folder name used when you create a class within that folder.

using System.Web.HTTP;
using [YOUR PROJECT NAME].App_Start;

Locate the Application_Start() method and add the line of code GlobalConfiguration.Configure() above the RouteConfig.RegisterRoutes() method call as shown in the code below.

protected void Application_Start() {
  AreaRegistration.RegisterAllAreas();
  FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
  GlobalConfiguration.Configure(WebApiConfig.Register);
  RouteConfig.RegisterRoutes(RouteTable.Routes);
  BundleConfig.RegisterBundles(BundleTable.Bundles);
}

Call Web API from your Controller

Now that you have all the classes in place for a Web API call, you are now ready to call it from your Angular code. Open up the productController.js file and modify the beginning of the function PTCController. Add one more core service that Angular provides, namely the data service that communicates with remote HTTP servers via a browser’s built-in mechanism such as XMLHttpRequest or JSONP. The name of this core Angular service is passed to your controller as $http. Just like you did with your $scope variable, let’s assign this to your own variable. Use the name dataService in this sample.

function PTCController($scope, $http) {
  var vm = $scope;
  var dataService = $http;

Locate where you declared the vm.products variable in the previous blog post and modify the variable to be an empty array instead of hard-coded object literals as shown in the code below.

// Expose a 'products' collection
vm.products = [];

In future posts I will cover how to deal with exceptions that come back from Web API calls, but for now, let’s just create a function to handle any exceptions by grabbing the data.ExceptionMessage property that comes back from the Web API calls.

function handleException(error) {
  alert(error.data.ExceptionMessage);
}

Write a function called productList() to make the Web API call using the data service passed into our controller. The data service provided by Angular exposes several shortcut methods corresponding to the appropriate HTTP verbs, namely; get, post, put, delete and a few others. Since we are performing a GET to retrieve our product data from our Web API, call the get() method on the data service.

function productList() {
  dataService.get("/api/Product")
    .then(function (result) {
      vm.products = result.data;
    }, function (error) {
      handleException(error);
    });
}

Let’s break down the various components of the get() method. Here is an overview of this function.

$http.get("URL TO WEB API")
     .then(success function (result){}, 
           error   function (error) {});

The parameter you pass to the get() method is the URL to your Web API controller. This method returns a “promise” which is nothing more than an object that takes care of making an asynchronous call for you. The chained method then() is used to inform the promise of what function to call if the Web API is successful and which function to call if an error is returned. In each case an object is passed back to you with some properties that you can query to see what happened. The objects are the same for both success and failure and contain the following properties:

data = Either a string or object containing data from your Web API call
status = An HTTP status code number such as 200 or 404
headers = A function to allow you to get the headers from the call
config = A configuration object that was used for sending the request
statusText = An HTTP status text returned from the call

Look at the productList() function you wrote and see that in the success function, you take the data property from the result parameter and assign that to your array named vm.products. By doing this, you allow the data binding of Angular to take over and update any bound items on the page. In this case the ng-repeat attached to the <tr> on your HTML table causes a redrawing of your HTML table based on the new data in the array.

Now that you have the function productList() written, you need to call it when you enter your controller. Immediately after declaring all your variables on your scope, call the productList() function. Below is what the complete productController.js file should now look like.

(function () {
  'use strict';
  angular.module('ptcApp')
    .controller('PTCController', PTCController);
  function PTCController($scope, $http) {
    var vm = $scope;
    var dataService = $http;
    // Expose a 'product' object
    vm.product = {
      ProductName: 'Pluralsight Subscription'
    };
    // Create a list of categories
    vm.categories = [
      { CategoryName: 'Videos' },
      { CategoryName: 'Books' },
      { CategoryName: 'Articles' }
    ];
    vm.products = [];
    productList();
    function handleException(error) {
      alert(error.data.ExceptionMessage);
    }
    function productList() {
      dataService.get("/api/Product")
        .then(function (result) {
          vm.products = result.data;
        }, function (error) {
          handleException(error);
        });
    }
  }
})();

The last thing you need to do is to modify the building of the product table data. Let’s add a couple more columns to our HTML table using the following code:

<tr ng-repeat="product in products">
  <td>{{product.ProductName}}</td>
  <td>{{product.IntroductionDate | date: mm/dd/yyyy }}</td>
  <td>{{product.Url}}</td>
  <td class="text-right">{{product.Price | currency: $ }}</td>
</tr>

In this new ng-repeat you are adding the IntroductionDate and Url to the table. Notice the use of the “date” filter that assists you in formatting the IntroductionDate data.  Figure 1 shows you what the final HTML product table looks like after running this sample.


Figure 1: A list of products retrieved via the Web API.

Summary

The $http data service is built-in to Angular. All you need to do is to add an additional parameter in your controller function. It is recommended you assign the $http variable to your own variable name for flexibility. Also in this post you learned to configure your web project to make calls to a Web API.

More Angular Blog Posts

PDSA has www.pluralsight.com courses on Angular. Check out The Journey from MVC to Angular.

Sample Code

You can download the code for this sample at www.pdsa.com/downloads. Choose the category “PDSA Blog”, then locate the sample PDSA Blog Sample: Call the Web API from Angular.

Build Lists of Data with Angular

AngularThis is the 2nd blog post in our series on Angular. The first part entitled Get Started with Angular shows you how to add Angular to a project. You should read that blog first if you are not familiar with adding Angular to a project, don’t know what a module or a controller is, or want to understand basic data binding.

In this blog post you will build a couple of different types of lists of data using the ng-repeat directive. Building unordered lists and HTML tables is very straight-forward in Angular. As with anything in Angular, you need to have a variable defined on the $scope variable that contains the data you wish to display. Use the ng-repeat directive and data binding to iterate over the data and create bulleted list items or <tr> and <td> elements.

Create an Unordered List

Start with the project from the first blog post entitled Get Started with Angular. Open the project, then locate and open the \Scripts\productController.js file. Add a new variable to the $scope variable in the controller function as shown in the code highlighted in bold below.

function PTCController($scope) {
  var vm = $scope;
  // Create a list of categories
  vm.categories = [
    { CategoryName: 'Videos' }, 
    { CategoryName: 'Books' }, 
    { CategoryName: 'Articles' }
  ];
}

This code creates an array of object literals. Each object is a category object with a single property called CategoryName. This CategoryName property is set to a string such as ‘Videos’, ‘Books’, or ‘Articles. These string values are to be displayed in an unordered list on our HTML page.

Locate the AngularSample01.html page in the root of the project. Copy and paste this HTML page back into the root of the project. Rename this newly copied file to AngularSample02.html. Replace everything within the <div class=”container”> with the following HTML.

<h3>Categories</h3>
<div class="row">
  <div class="col-xs-12">
    <ul>
      <li ng-repeat="category in categories">
        {{category.CategoryName}}
      </li>
    </ul>
  </div>
</div>

The ng-repeat (also written as ngRepeat) directive contains two variable names and the word ‘in’. The first variable name ‘category’ is a name that you are using for a local variable within this loop. Think of this like the variable name you create in a foreach statement in C#. The second variable name, ‘categories’ refers to the categories variable you created in the controller on the $scope variable. The ‘in’ word simply separates the local variable from the variable on the $scope. Again, this is just like a foreach statement in C#.

The ng-repeat directive instructs Angular to iterate over the collection of objects in the categories variable and place each object into the variable named category. You are also instructing Angular to create a new <li> for each object in the collection. Angular then looks for any data binding tokens between the <li> and the </li> tags. If it finds one, it evaluates the expression. In this case the expression says to look for a property name called CategoryName on the object just retrieved from the categories collection. If it can get the value from the CategoryName property it displays that value between the <li> and the </li> elements.

At this point you should be able to run the page. Go ahead and run the page, and if you did everything correctly, you should see a page that looks similar to Figure 1.


Figure 1: An unordered list of categories

Create an HTML Table

Let’s now use the ng-repeat directive to build an HTML table of products. Create an object literal array of product objects to build that table. Add a new variable named ‘products’ to your $scope variable in your controller function, as shown in the sample below.

function PTCController($scope) {
  var vm = $scope;
  vm.products = [
    { ProductName: 'Video 1', Price: 10 },
    { ProductName: 'Video 2', Price: 10 },
    { ProductName: 'Book 1', Price: 20 },
    { ProductName: 'Article 1', Price: 5 },
    { ProductName: 'Article 2', Price: 6 },
  ];
}

The above code creates an array of object literals where each one is a product object. These product objects contain two properties: ProductName and Price. Some default data has been filled in to give us something to display as shown in Figure 2.

Locate the AngularSample02.html page in the root of the project. Copy and paste this HTML page back into the root of the project. Rename this newly copied file to AngularSample03.html. Replace everything within the <div class=”container”> with the following HTML.

<h3>Products</h3>
<table class="table table-bordered table-striped
              table-condensed">
  <thead>
    <tr>
      <th>Product Name</th>
      <th class="text-right">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="product in products">
      <td>{{product.ProductName}}</td>
      <td class="text-right">
         {{product.Price | currency: $ }}
      </td>
    </tr>
  </tbody>
</table>

In the code above you use the ng-repeat directive to build a list of <tr> elements for each product object in the products collection. For each product object build two <td> elements. The first <td> element contains the ProductName value. The second <td> element displays the price; however, there is something a little extra in the data binding token.

This something extra is called a ‘filter’ and is used to format the data coming from the data binding expression. You place a vertical pipe after the property being bound, then add the filter named ‘currency’, followed by a colon and a US dollar sign symbol ($). This instructs Angular that it should take the price value, treat it as a decimal value, and format it according to United States currency formatting rules. There are other filters you can use in data binding: filter, number, date, json, lowercase, uppercase, limitTo, orderBy. You can learn more about these filters at https://docs.angularjs.org/api/ng/filter.


Figure 2: A table created from Angular data binding

Summary

In this blog post you learned to use the ng-repeat directive to create a list of items. You first learned to build an unordered list using an array of category objects. Next, you built an HTML table of product objects and even saw how to format a currency value using a filter.

More Angular Blog Posts

PDSA has www.pluralsight.com courses on Angular. Check out The Journey from MVC to Angular.

Sample Code

You can download the code for this sample at www.pdsa.com/downloads. Choose the category “PDSA Blog”, then locate the sample PDSA Blog Sample: Build Lists of Data with Angular.

Get Started with Angular

AngularSometimes the best way to learn a new technology is to start using it -- a little at a time. In this series of articles, I will show you how to use Angular in a step-by-step manner. You start with a simple example of adding Angular to a project and creating an Angular module and controller. Once you have the controller, you will see how to expose data so it can be bound to UI elements on your HTML page.

Adding Angular to a Project

Create a new ASP.NET Web Application project, or load one of your existing web projects. Right mouse click on the web project, not the solution, and choose Manage NuGet Packages… from the menu. You will then see a screen that looks like Figure 1.

 

Figure 1: Use the Manag NuGet Packages menu to add Angular to your project.

Click on the Browse tab (Figure 2) and type in AngularJS and press the enter key. Select AngularJS.Core from the list and click on the Install button. Visual Studio will add a few files to your project and you may now use Angular in your project.

Figure 2: Select AngularJS.Core from the list.

If you look in the \Scripts folder you should see a few files that start with “angular”. The only one you will use on your page for purposes of learning Angular is the angular.min.js.

Create a Test Page

Add a simple HTML page that you can use to test a few concepts of Angular. Right-mouse click on the project and select Add | HTML Page. Type in the name AngularSample01 and click the OK button. Drag and drop the Content\bootstrap.min.css into the <head> element on the page. Drag and drop the following script files before the </body> tag; Scripts\jquery-VER#.min.js, Scripts\bootstrap.min.js, and Scripts/angular.min.js. Type in the rest of the HTML shown below.

<!DOCTYPE html>
<html>
<head>
  <title>Angular Sample</title>
  <meta charset="utf-8" />
  <link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <div class="container">
    <div class="form-group">
      <label for="ProductName">Product Name</label>
      <input type="text" class="form-control" />
    </div>
    <div class="row">
      <div class="col-xs-12">
        <label for="ProductName">Product Name Entered</label>
        <p class="form-control-static"></p>
      </div>
    </div>
  </div>
  <script src="Scripts/jquery-1.10.2.min.js"></script>
  <script src="Scripts/bootstrap.min.js"></script>
  <script src="Scripts/angular.min.js"></script>
</body>
</html>

Create Angular Module

Right mouse click on the Scripts folder and select Add | JavaScript File from the menu. Type in app in the text box and click the OK button. In this new JavaScript file, add the following code.

(function () {
  'use strict';
  angular.module('ptcApp', []);
})();

The above code uses an Immediately Invoked Function Expression (IIFE) to access the angular framework and create a new module. The new module name is passed as a string in the first parameter of the module function. In this case, that module name is ‘ptcApp’. Feel free to name this whatever you want, for whatever is appropriate for your application. The second parameter is used to list any dependencies you wish to use in this module. The empty array signifies that there are no dependencies in this case.

Think of an Angular module as a namespace in C#. It is a wrapper, or container, for other things you create within the module. One thing you create within a module is a controller in which you define functions and variables to use from your HTML page.

Create a Controller

In a typical web page you either display data or get data from input fields. With Angular you typically use data binding to accomplish both of these tasks. To use data binding, you first must have some variable names as the source of your bindings. We create these variable names within a “controller” that you define in another JavaScript file. Angular uses the Model View Controller (MVC) design pattern. A controller is responsible for managing the data binding between the model (properties of the $scope variable) and the view (the HTML page).

Right mouse click on the Scripts folder in your project and select Add | JavaScript File from the menu. Type in productController in the text box and click the OK button. In this new JavaScript file, add the following code.

1  (function () {
2    'use strict';
3  
4    angular.module('ptcApp')
5      .controller('PTCController', PTCController);
6  
7    function PTCController($scope) {
8      var vm = $scope;
9  
10     // Expose a 'product' object
11     vm.product = {
12      ProductName: 'Pluralsight Subscription'
13     };
14   }
15 })();

Line 1 starts an IIFE. On lines 4 and 5 you reference the module named ‘ptcApp’ you created earlier. Chain the controller() function to declare your intention to use a controller with the name of ‘PTCController’. The second parameter to the controller function is a reference to a function callback named PTCController. Lines 7 through 14 is the PTCController function declaration that Angular calls when it needs to reference something from the HTML page. 

Angular passes to the controller function a parameter named $scope. The $scope variable is an object created by Angular to provide a mechanism to glue the directives you create on an HTML page with the variables defined within your controller. A good practice is to immediately assign $scope to your own variable name as you see on line 8. Many people use the variable name ‘vm’ because we think of $scope as a View Model object.

On lines 11 thru 13 you create a variable named ‘product’ that is an object literal with 1 property named ProductName. You assign a hard-coded value to this property. To display this property’s value in and input field on the HTML page, use an Angular directive called ‘ng-model’ (also written as ngModel). The value of this ng-model attribute is the name of the property defined on the $scope.

<input type="text" 
       ng-model="product.ProductName" 
       class="form-control" />

The ng-model directive says to look at the current scope of the HTML page and attempt to locate the variable named ‘product’ within that scope. Then access the ProductName property to display its value within the input field. The question is, how does the ng-model directive know the scope it is contained within, and the controller to use? That is explained in the next section.

Define the Module and Controller for a Page

So far, all you have done is to create an HTML page and a couple of JavaScript files. How do you hook them together? We need to use two more Angular directives; ng-app and ng-controller. The first step is to drag the two .js files onto your HTML page. Be sure to place them below the script tag for angular.

<script src="Scripts/angular.min.js"></script>
<script src="Scripts/app.js"></script>
<script src="Scripts/productController.js"></script>

Modify the <html> tag of your HTML page so it looks like the following:

<html ng-app="ptcApp">

Make sure the ng-app (also written as ngApp) directive has the exact same name as what you defined in the app.js file. In this case that name is ‘ptcApp’. This directive instructs Angular that it should look for a module declared with the name of ‘ptcApp’ and assign the scope of that module around all of the DOM elements within the <html> tag. The second directive, ng-controller (also written as ngController), you place on the <body> tag of your HTML page.

<body ng-controller="PTCController">

This directive gives scope to everything within the <body> tag on this HTML page to the controller function PTCController. You do not need to place this directive on the <body> tag. You may place this directive on a <div> tag around just one specific area of the page. In this way you could have different controllers for different parts of a page.

Data Binding

Now that you have the scope defined, you bind the ‘product’ variable defined in your controller function to one or more HTML elements. Open up your HTML page and modify the Product text box to look like the following:

<input type="text" 
       ng-model="product.ProductName" 
       class="form-control" />

When binding to <input> elements in HTML you use the ng-model directive. This directive enables two-way data binding. If you modify the value of the ProductName property in JavaScript code, the UI will be immediately updated with the new value. If the user modifies the input field with a new value, the ProductName property is updated immediately with the new value entered.

To show this in action, let’s bind the <p> tag to the product.ProductName property. Since you are not dealing with an <input> element, use the data binding syntax of curly braces as shown below:

<label for="ProductName">Product Name Entered</label>
<p class="form-control-static">{{product.ProductName}}</p>

Use this data binding syntax when you are simply displaying data on the HTML page. You typically see this kind of data binding when building an HTML table or a <select> list.

Run the Page

If you have followed along with this article, you can now run this HTML page. You should see something that looks similar to Figure 3. If you type into the input field, you will see the value in the <p> tag updated immediately.


Figure 3: Data binding makes working with data a breeze.

Summary

In this blog post you learned how to add Angular to an MVC project. You learned about modules, controllers and scope. You also created a variable on the scope variable and learned to bind that variable’s value to a couple of elements on the HTML page. These are the basics of using Angular. In the next series of blog posts, we will explore a lot of cool things you can do with this powerful framework.

More Angular Blog Posts

PDSA has www.pluralsight.com courses on Angular. Check out The Journey from MVC to Angular.

Sample Code

You can download the code for this sample at www.pdsa.com/downloads. Choose the category “PDSA Blog”, then locate the sample PDSA Blog Sample: Get Started with Angular.

Sitefinity - More than Content Management

Cloud Sitefinity is more than just content management. You can use it as a complete platform upon which you can build your own line-of-business web application. Here is just a sampling of what you can do with Sitefinity.

  • Customize Sitefinity master page and control templates
  • Create business application features using MVC widgets
  • Integrate Web API with business application features
  • Customize notification email templates with application-specific information
  • Create custom Sitefinity membership and role providers
  • Integrate active directory users and roles into Sitefinity

  • PDSA has successfully customized Sitefinity for many clients. Read one case study here. Contact us today to learn how we can assist you with your Sitefinity project.

    Read many other reasons in our special report at http://www.pdsa.com/Download/SpecialReports/SR-Sitefinity.pdf

    Why Move to the Cloud

    Cloud Cloud computing has gained incredible momentum over the last several years, and with good reason. As companies start looking at the cost of purchasing new hardware and new software licenses, they quickly realize that this investment is not very economical compared to paying a monthly subscription that covers all their needs. When you move your applications, databases and websites into the cloud, hardware is no longer a concern, and you are just a click away from being on the latest version of software or operating system at no additional cost. Read many other reasons in our special report at http://www.pdsa.com/Download/SpecialReports/SR-Cloud.pdf

    PDSA Announces a Complimentary Seminar on Project Planning

    PDSA announces an informative and instructive complimentary seminar on Project Planning to be presented on Tuesday, May 17. In this PDSA seminar, we will define, discuss and provide examples for creating a project plan: your key to a successful project. You will also learn each step in creating a project plan, which includes the work breakdown structure, resourcing, estimation, scheduling and resource loading. In just a quick 45 minutes you will discover or enhance your project management planning skills to begin using immediately.


    Presenter: Michael Krasowski, VP/COO PDSA Inc.

    Date/time: May 17th, Tuesday, at 10am Pacific Time.

    To sign up: send an email to David LeFort at davidl@pdsa.com or call him at 714-734-9792 x222.


    ** Space is limited so sign up now. **

     

    By the way, here are Michael’s popular seminars on Pluralsight, your best choice for online education:

    What Makes a Developer Excellent?

    Successful Developers What makes some programmers stand above the rest? How can some programmers create wildly new and useful algorithms while others struggle? What are the important traits that make an exceptional programmer? Your answers will be different depending on whether you are a programmer--OR someone who hires and manages them. In this article, I'll explore some of these questions and pose answers that will help make you a better –and more valuable—programmer.  If you hire programmers, you'll know a good one when you see them.

    Read our special report entitled Good Developers Versus Exceptional.

    Check out all of our Special Reports here.