Using Angular.js in Visual Studio LightSwitch Part 5

Rama Sagar
Posted by in LightSwitch category on for Beginner level | Points: 250 | Views : 5210 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.

Introduction


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



Objective


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">
<head>
    <title>AngularJS-WebApi-EF</title>
    @Styles.Render("~/content/bootstrap/base")
    @Styles.Render("~/content/toastr")
    @Styles.Render("~/content/css")
    @Styles.Render("~/content/angular")
</head>
<body>
    <h1>Products</h1>
    <div crud-grid table='AngularProduct'
         columns='[
		    {"name":"Id", "class":"col-md-1", "autoincrement": "true"},
		    {"name":"ProductName"},
		    {"name":"ProductManufacturer"},
		    {"name":"ManufacturerDate"}
	    ]'></div>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/angular")
    @Scripts.Render("~/bundles/toastr")
    @Scripts.Render("~/bundles/bootstrap")
</body>
</html>

BundleConfig.cs



 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 http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));
            bundles.Add(new ScriptBundle("~/bundles/angular").Include(
                        "~/Scripts/angular.js", "~/Scripts/angular-resource.js",
                        "~/Scripts/App/app.js",
                        "~/Scripts/App/Services/*.js",
                        "~/Scripts/App/Directives/*.js", "~/Scripts/App/Directives/Services/*.js"));
            bundles.Add(new ScriptBundle("~/bundles/toastr").Include(
                        "~/Scripts/toastr.js"));
            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));
            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));
            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));
            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(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));
        }
    }
}
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


Conclusion

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

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)