Using Angular.js in Visual Studio LightSwitch : Part 2

RamaSagar Pulidindi
10y
9.6k
0
0
100
Article

Introduction

In this article we will see how to use Angular.js in a LightSwitch application. Please check the previous article on LightSwitch by visiting the following links.

Using Angular.js in Visual Studio LightSwitch Part 1

Now let's continue with further steps.

Step 1: Add a Global Application class and add the following implementation.

Right-click on the server project and select Add then New Item.

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.

Bulid the solution

You may get the build failed if the packages are and the updates not installed correctly. Usually 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

Step 2: Now let's create a page called Home (and an associated controller) so that we have a page to load our Angular grid.

Step 3: Right-click on the Controllers folder and select Add Class name the file HomeController.cs and use the following code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace LightSwitchApplication.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
}
}

Step 4: Create a folder named Views and a folder named Home under it.

Right-click on the Home folder and select Add then MVC 5 View Page (Razor) as shown.

@{ Layout = null; }
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
</head>
<body>
<div>
<h1>
Content</h1>
</div>
</body>
</html>

Step 5: Add a file called Web.config under the Views folder.

<?xml version="1.0"?>
<configuration>
<configSections>
<sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup,
System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
<section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection,
System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" =""
requirePermission="false" =""/>
<section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection,
System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" =""
requirePermission="false" =""/>
</sectionGroup>
</configSections>
<system.web.webPages.razor>
<host factoryType
System.Web.Mvc, Version=""5.0.0.0, Culture=""neutral, PublicKeyToken=31BF3856AD364E35" =""/>
<pages pageBaseType="System.Web.Mvc.WebViewPage">
<namespaces>
<add namespace="System.Web.Mvc" =""/>
<add namespace="System.Web.Mvc.Ajax" =""/>
<add namespace="System.Web.Mvc.Html" =""/>
<add namespace="System.Web.Optimization"/>
<add namespace="System.Web.Routing" =""/>
</namespaces>
</pages>
</system.web.webPages.razor>
<appSettings>
<add key="webpages:Enabled" value="false" =""/>
</appSettings>
<system.web>
<httpHandlers>
<add path="*" verb="*" type="System.Web.HttpNotFoundHandler"/>
</httpHandlers>
<pages>
validateRequest="false" ="" pageParserFilterType="System.Web.Mvc.ViewTypeParserFilter,
System.Web.Mvc, Version=5.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" =""
pageBaseType="System.Web.Mvc.ViewPage,
System.Web.Mvc, Version=5.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" =""
userControlBaseType="System.Web.Mvc.ViewUserControl,
System.Web.Mvc, Version=5.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
<controls>
<add assembly="System.Web.Mvc, Version=5.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" =""
namespace="System.Web.Mvc" tagPrefix="mvc" =""/>
</controls>
</pages>
</system.web>
<system.webServer>
<validation validateIntegratedModeConfiguration="false" =""/>
<handlers>
<remove name="BlockViewHandler"/>
<add name="BlockViewHandler" path="*" verb="*" =""
preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" =""/>
</handlers>
</system.webServer>
</configuration>