Post
Ask Question

Using Angular.js in Visual Studio LightSwitch : Part 2

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.

 Add Global Application class
  1.  using System;  
  2.   
  3. using System.Collections.Generic;  
  4.   
  5. using System.Linq;  
  6.   
  7. using System.Web;  
  8.   
  9. using System.Web.Mvc;  
  10.   
  11. using System.Web.Optimization;  
  12.   
  13. using System.Web.Routing;  
  14.   
  15. using System.Web.Http;  
  16.   
  17.    
  18.   
  19. namespace LightSwitchApplication  
  20.   
  21. {  
  22.   
  23.     public class Global : System.Web.HttpApplication  
  24.   
  25.     {  
  26.   
  27.         protected void Application_Start()  
  28.   
  29.         {  
  30.   
  31.             WebApiConfig.Register(GlobalConfiguration.Configuration);  
  32.   
  33.             AreaRegistration.RegisterAllAreas();  
  34.   
  35.             FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);  
  36.   
  37.             RouteConfig.RegisterRoutes(RouteTable.Routes);  
  38.   
  39.             BundleConfig.RegisterBundles(BundleTable.Bundles);  
  40.   
  41.         }  
  42.   
  43.     }  
  44.   
  45. } 
 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.
 

 create a page

Step 3: Right-click on the Controllers folder and select Add Class name the file HomeController.cs and use the following code.
 
 Controllers folder
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6.   
  7. namespace LightSwitchApplication.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.         //    
  12.         // GET: /Home/    
  13.         public ActionResult Index()  
  14.         {  
  15.             return View();  
  16.         }  
  17.     }  
  18. }  

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.
 
 MVC 5 View Page
 
 Name
 
  1.  @{ Layout = null; }  
  2. <!DOCTYPE html>  
  3. <html>  
  4. <head>  
  5.     <meta name="viewport" content="width=device-width" />  
  6.     <title></title>  
  7. </head>  
  8. <body>  
  9.     <div>  
  10.         <h1>  
  11.             Content</h1>  
  12.     </div>  
  13. </body>  
  14. </html> 

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

 
 Add web configure file

  1.  <?xml version="1.0"?>    
  2. <configuration>  
  3.     <configSections>  
  4.         <sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup,     
  5.                   System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">  
  6.             <section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection,     
  7.                System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"  =""  
  8.                requirePermission="false" =""/>    
  9.             <section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection,     
  10.                System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"  =""  
  11.                requirePermission="false" =""/>    
  12.           </sectionGroup>            
  13.     </configSections>    
  14.     <system.web.webPages.razor>  
  15.         <host factoryType  
  16.           System.Web.Mvc, Version=""5.0.0.0, Culture=""neutral, PublicKeyToken=31BF3856AD364E35" =""/>    
  17.         <pages pageBaseType="System.Web.Mvc.WebViewPage">  
  18.             <namespaces>  
  19.                 <add namespace="System.Web.Mvc" =""/>    
  20.                 <add namespace="System.Web.Mvc.Ajax" =""/>    
  21.                 <add namespace="System.Web.Mvc.Html" =""/>    
  22.                 <add namespace="System.Web.Optimization"/>    
  23.                 <add namespace="System.Web.Routing" =""/>                  
  24.       </namespaces>    
  25.           </pages>            
  26.     </system.web.webPages.razor>    
  27.     <appSettings>  
  28.         <add key="webpages:Enabled" value="false" =""/>          
  29.   </appSettings>    
  30.     <system.web>  
  31.         <httpHandlers>  
  32.             <add path="*" verb="*" type="System.Web.HttpNotFoundHandler"/>              
  33.     </httpHandlers>           
  34.         <pages>  
  35.               validateRequest="false"  =""              pageParserFilterType="System.Web.Mvc.ViewTypeParserFilter,     
  36.               System.Web.Mvc, Version=5.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"  =""  
  37.               pageBaseType="System.Web.Mvc.ViewPage,     
  38.               System.Web.Mvc, Version=5.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"  =""  
  39.               userControlBaseType="System.Web.Mvc.ViewUserControl,     
  40.               System.Web.Mvc, Version=5.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">  
  41.             <controls>  
  42.                 <add assembly="System.Web.Mvc, Version=5.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"  =""  
  43.              namespace="System.Web.Mvc" tagPrefix="mvc" =""/>                  
  44.       </controls>              
  45.     </pages>            
  46.   </system.web>    
  47.     <system.webServer>  
  48.         <validation validateIntegratedModeConfiguration="false" =""/>    
  49.         <handlers>  
  50.             <remove name="BlockViewHandler"/>    
  51.             <add name="BlockViewHandler" path="*" verb="*"  =""  
  52.            preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" =""/>              
  53.     </handlers>          
  54.   </system.webServer>    
  55. </configuration>   

 Run (using F5) the application; we will see the following error since we didn't have a Lightswitch page.

 
 Run
 
 Summary
 
 In this part 2 article we created Views controllers. In the next part we will see the coding part of controller.


Similar Articles