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
Introduction
In this article we will see creation of model,and controller............
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
Conclusion
In this article we have learned how to use Angular.js in Lightswitch Application
Reference
http://angularjs.org/