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;
  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;
  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;
  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;
  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. {
  12. }
  13. }
  14. }