Using Angular.js in Visual Studio LightSwitch Part 1

In this article we will see how to use Angular.js in a LightSwitch application.

Introduction
 
In this article we will see how to use Angular.js in a LightSwitch application. Please check the previous articles on LightSwitch by visiting the following links.
 
Why AngularJS?
  1. It decreases emphasis on directly handling DOM manipulation from the application logic
  2. It employs efficient two-way data binding and sensible MVC implementation
  3. We can create our own HTML custom tags and attributes
  • Step 1: Let's start with a new LightSwitch application
Create a new project by opening Visual Studio 2013 then selecting "File" -> "New" -> "Project..." then create a new "LightSwitch HTML Application" and name it "LightSwitchAngularJs".
 
LightSwitchHTMLApplication 
  • Step 2: Right-click on the Data Sources folder and select Add Table.
 Data Sources folder
 
 Create a table called Products and save it. The table will be pluralized to Store.
 
table 
  • Step 3: Now let's add Nuget components.
Go to "Tools" and select "Library Package Manager" and then select "Package Manager Console".
 
 Package Manager Console
 
And then type one by one and install.
  1. PM> Install-Package angularjs
  2. Install-Package Microsoft.AspNet.Mvc -Version 5.0.0
  3. PM> Install-Package AspNetWebApi
 
 install
  • Step 4 Create a folder named "App_Start" in the server application and add the following class files.
 class files
 
Right-click on the "App_Start" folder and select "Add" then select "Add" -> "New Item". Create a file called "WebApiConfig.cs" and add the following implementation:
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Http;  
  6.   
  7. namespace LightSwitchApplication  
  8. {  
  9.     public static class WebApiConfig  
  10.     {  
  11.         public static void Register(HttpConfiguration config)  
  12.         {  
  13.             config.Routes.MapHttpRoute(  
  14.                 name: "DefaultApi",  
  15.                 routeTemplate: "api/{controller}/{id}",  
  16.                 defaults: new { id = RouteParameter.Optional }  
  17.             );  
  18.         }  
  19.     }  
  20. }  
 Also, (in the same App_Start directory) create a file called "RouteConfig.cs" and use the following implementation:
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using System.Web.Routing;  
  7.   
  8. namespace LightSwitchApplication  
  9. {  
  10.     public class RouteConfig  
  11.     {  
  12.         public static void RegisterRoutes(RouteCollection routes)  
  13.         {  
  14.             // This rule is required to allow the LightSwitch OData service to  
  15.             // be accessed when WebAPI is also enabled  
  16.             routes.IgnoreRoute("{*allsvc}", new { allsvc = @".*\.svc(/.*)?" });  
  17.             routes.IgnoreRoute("{resource}.axd/{*pathInfo}");  
  18.             routes.MapRoute(  
  19.                 name: "Default",  
  20.                 url: "{controller}/{action}/{id}",  
  21.                 defaults: new { controller = "Home"action = "Index"id = UrlParameter.Optional }  
  22.             );  
  23.         }  
  24.     }  
  25. }  
 Again, (in the same App_Start directory) create a file called "FilterConfig.cs" and use the following code:
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6.   
  7. namespace LightSwitchApplication  
  8. {  
  9.     public class FilterConfig  
  10.     {  
  11.         public static void RegisterGlobalFilters(GlobalFilterCollection filters)  
  12.         {  
  13.             filters.Add(new HandleErrorAttribute());  
  14.         }  
  15.     }  
  16. }  
Also, (in the same App_Start directory) create a file called "BundleConfig.cs" and use the following code:
  1. using System.Web;  
  2. using System.Web.Optimization;  
  3.   
  4. namespace LightSwitchApplication  
  5. {  
  6.     public class BundleConfig  
  7.     {  
  8.         // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725  
  9.         public static void RegisterBundles(BundleCollection bundles)  
  10.         {  
  11.   
  12.         }  
  13.     }  
  14. }