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/