Using Angular.js in Visual Studio LightSwitch Part 2

Rama Sagar
Posted by in LightSwitch category on for Beginner level | Points: 250 | Views : 3788 red flag

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment browser-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier. For more info click http://en.wikipedia.org/wiki/AngularJS

Introduction


In this article we will see how to use Angular.js in Light switch Application and performing CRUD operations. Please check previous articles on Lightswitch by visiting following links.

Using Angular.js in Visual studio Light switch Part1


Objective


The objective of the article is to explain how to use Angular.js in Lightswitch Applications and perform CRUD operations.

 In Part 1 article we have seen the creation of table and adding required packages..

Lets continue after that 

 
  •  Step 1 create a folder named App_Start in server Application and add the following class files.

       

Right-click on the App_Start folder and select Add then select Add then New Item.

Create a file called WebApiConfig.cs and add the below implementation


WebApiConfig.cs



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

RouteConfig.cs



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


FilterConfig.cs


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

BundleConfig.cs



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

        }
    }
}



  •  Step 2 Add Global Application class and add the following implementation
        Right-click on the Server project and select Add then New Item




Global.asax.cs 


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;
using System.Web.Http;
namespace LightSwitchApplication
{
    public class Global : System.Web.HttpApplication
    {
        protected void Application_Start()
        {
            WebApiConfig.Register(GlobalConfiguration.Configuration);
            AreaRegistration.RegisterAllAreas();
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }
    }
}

Bulid the solution...It should build without errors.




you may get the build failed if not installed the packages and the updates correctly

Mostly you may get system.web.optimization not found error

to get rid of it install the following package via Package Manager Console and rebuild the application


PM> Install-Package Microsoft.Web.Optimization -Version 1.0.0-beta2 -Pre


Conclusion


In this article we have seen adding the web API code In next part  we will see creation of home page and controllers

Reference

http://angularjs.org/

Page copy protected against web site content infringement by Copyscape

About the Author

Rama Sagar
Full Name: RamaSagar Pulidindi
Member Level: Silver
Member Status: Member,MVP
Member Since: 12/30/2012 1:51:40 AM
Country: India
ramasagar
http://www.ramasagar.com
A Software Profesional working in Microsoft .NET technologies since year 2008, and I work for Dake ACE. I am passionate about .NET technology and love to contribute to the .NET community at Dot Net Funda

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)