Using Angular.js in Visual Studio LightSwitch Part 1

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

 

 

• Step 2: Right-click on the Data Sources folder and select Add Table.

 

 

 Create a table called Products and save it. The table will be pluralized to Store.

 

 

• Step 3: Now let's add Nuget components.

Go to "Tools" and select "Library Package Manager" and then select "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

 

 

• Step 4 Create a folder named "App_Start" in the server application and add the following 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:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;

namespace LightSwitchApplication
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}

 Also, (in the same App_Start directory) create a file called "RouteConfig.cs" and use the following implementation:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace LightSwitchApplication
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            // This rule is required to allow the LightSwitch OData service to
            // be accessed when WebAPI is also enabled
            routes.IgnoreRoute("{*allsvc}", new { allsvc = @".*\.svc(/.*)?" });
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }
    }
}

 Again, (in the same App_Start directory) create a file called "FilterConfig.cs" and use the following code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace LightSwitchApplication
{
    public class FilterConfig
    {
        public static void RegisterGlobalFilters(GlobalFilterCollection filters)
        {
            filters.Add(new HandleErrorAttribute());
        }
    }
}

Also, (in the same App_Start directory) create a file called "BundleConfig.cs" and use the following code:

using System.Web;
using System.Web.Optimization;

namespace LightSwitchApplication
{
    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {

        }
    }
}