Using Angular.js in Visual Studio LightSwitch Part 5

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

AngularJS is a JavaScript framework that embraces extending HTML into a more expressive and readable format.
It decreases emphasis on directly handling DOM manipulation from the application logic, allowing for easier
testing. It employs efficient two-way data binding and sensible MVC implementation, reducing the server load
of applications. It features directives, which are incredibly robust tools that are significant contributors
to Angular’s ubiquity.


In this article we will see creation of model,and controller............

Please check previous articles on Light switch by visiting following links.

Using Angular.js in Visual studio Light switch Part1
Using Angular.js in Visual studio Light switch Part2


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

 Step 1:Now lets add the Angular Grid control 

 Insert the folders and files into the Scripts folder as shown below.

 Note, we have to create the folders and import each file into each folder one by one using Add, then Existing Item.

Angular Grid Control

Replace the contents of Index.cshtml (in the Views/Home folder) with the following

<!doctype html>
<html ng-app="app">
    <div crud-grid table='AngularProduct'
		    {"name":"Id", "class":"col-md-1", "autoincrement": "true"},


 Update the file called BundleConfig.cs (in the App_Start directory) and add the following implementation

using System.Web;
using System.Web.Optimization;
namespace LightSwitchApplication
    public class BundleConfig
        // For more information on Bundling, visit
        public static void RegisterBundles(BundleCollection bundles)
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            bundles.Add(new ScriptBundle("~/bundles/angular").Include(
                        "~/Scripts/angular.js", "~/Scripts/angular-resource.js",
                        "~/Scripts/App/Directives/*.js", "~/Scripts/App/Directives/Services/*.js"));
            bundles.Add(new ScriptBundle("~/bundles/toastr").Include(
            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
            bundles.Add(new StyleBundle("~/Content/angular").Include("~/Scripts/App/Directives/Content/*.css"));
            bundles.Add(new StyleBundle("~/Content/toastr").Include("~/Content/toastr.css"));
            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
Run the application and navigate to the Home directory

Note :Here i didn't defined any home screen in Light switch...

You will find the following output

The source can be downloaded from here


In this article we have learned how to use Angular.js in Lightswitch Application


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