Visual Studio 2013 中的 LightSwitch 有新增功能，包括更好的团队开发支持以及在构建 HTML 客户端桌面和 Office 365 应用程序方面的改进。本文结合最新发布的Wijmo 5提供的AngularJs进行图解。

基于Visual Studio LightSwitch作为数据源，我们使用Wijmo 5控件快速的创建 AngularJS应用程序。

插入数据记录

业务规则校验

数据记录更新

选择数据记录，点击键盘上删除按键

点击列头，进行数据排序

并发性校验（由LightSwitch的后端提供）。

Wijmo 5控件集

2014年10月7日---葡萄城宣布正式发布Wijmo 5。Wijmo 5不再兼容传统浏览器（<= IE9），纯HTML5控件集。并且，发布并Wijmo 5全部的控件中将全面支持Angular JS。

为何使用Wijmo 5和LightSwitch？

为了100%控制UI：LightSwitch HTML Client基于JQuery Mobile，这导致为了控制UI不得不花费大量时间。

为了实现安全性：安全策略一般在Server端实现。无法通过AngularJs前端技术实现。LightSwitch使得安全性非常容易实现。

为了处理并发性：当多人同时更新DB会导致并发性，所幸，LightSwitch已经自动实现该特性。

为了用LightSwitch进行管理界面代码：基于LightSwitch，我们无需用AngularJs实现管理界面代码，LightSwitch已经实现了，故结合LightSwitch和AngularJs使得编程非常容易。

为了加快开发：当前使用LightSwitch，可以大大减少代码编写，这意味着开发进程会加速，bug会减少。

例子如下所示：

LightSwitch 业务层

在解决方案视图，在数据源DataSources右键，选择Add Table

创建ToDo表

点击写代码按钮，选择Validate方法，在生成的模板中，插入验证代码。

partialvoidToDoes_Validate(ToDoentity,EntitySetValidationResultsBuilderresults){//Donotallowatasktobecalled{NewTask]if(entity.TaskName=="[NewTask]"){results.AddEntityError("Taskcannotbenamed[NewTask]");}//Donotallowmorethan1incompleteTaskif(entity.IsComplete==false){intintCountOfIncomplete=this.DataWorkspace.ApplicationData.ToDoes.Where(x=>x.IsComplete==false).Where(x=>x.Id!=entity.Id).Count();if(intCountOfIncomplete>0){results.AddEntityError("Cannothavemorethan1incompleteTask");}}}Wijmo 5代码

Wijmo 5下载地址：输入邮箱即可获得下载URL地址

解压Wijmo样例，定位到“..\Samples\JS\Angular\OData”目录，拷贝Vendor和styles文件夹到LightSwitch Server工程的Scripts文件夹。

创建wijmo.data文件夹，下载ODataCollectionView.js，并拷贝在wijmo.data文件夹下。

AngularJs代码

在scripts文件夹下创建app.js脚本文件，并输入如下代码。

//在AngularJS声明依赖Wijmo"wj"module:varapp=angular.module('app',['wj']);在scripts文件夹下创建controllers文件夹，并创建appCtrl.js，并输入如下代码。

'usestrict';varapp=angular.module('app');app.controller('appToDoCtrl',functionappToDoCtrl($scope){//definedataserviceURLanddatatypesforspecificcolumnsvaroDataService='/ApplicationData.svc',dataTypes=[];//loadToDostable$scope.cvToDo=newwijmo.data.ODataCollectionView({serviceUrl:oDataService,entityName:'ToDoes'},['Id'],{serverSettings:{selects:['Id','RowVersion','TaskName','IsComplete','Created','Modified']}},dataTypes,loaded,true);//Displayanyerrors$scope.cvToDo.error.addHandler(function(sender,args){alert(sender.errorMsg);});//tellscopewhentablesfinishloadingfunctionloaded(){$scope.$apply();}});创建HTML页面

创建ToDo.htm页面，并输入如下代码：

<!DOCTYPEhtml><htmllang="en"ng-app="app"ng-controller="appToDoCtrl"><head><metacharset="utf-8"/><title>ToDO</title><!--ensureIEusesthelatestversionofIE(yes,yes...)--><metahttp-equiv="X-UA-Compatible"content="IE=Edge"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><!--jQuery/Angular/Bootstrap--><scriptsrc="http://code.jquery.com/jquery-2.0.0.min.js"type="text/javascript"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"type="text/javascript"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.min.js"type="text/javascript"></script><scriptsrc="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"type="text/javascript"></script><linkrel="stylesheet"href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"type="text/css"/><!--Wijmo--><scriptsrc="scripts/vendor/wijmo.min.js"type="text/javascript"></script><scriptsrc="scripts/vendor/wijmo.input.min.js"type="text/javascript"></script><scriptsrc="scripts/vendor/wijmo.grid.min.js"type="text/javascript"></script><linkhref="styles/vendor/wijmo.min.css"rel="stylesheet"/><!--appscripts--><scriptsrc="scripts/wijmo.data/ODataCollectionView.js"type="text/javascript"></script><scriptsrc="scripts/app.js"type="text/javascript"></script><scriptsrc="scripts/controllers/appCtrl.js"type="text/javascript"></script><!--Wijmo-Angularinterop--><scriptsrc="scripts/vendor/wijmo.angular.min.js"type="text/javascript"></script><!--appstyles--><linkhref="styles/app.css"rel="stylesheet"type="text/css"/></head><body><divclass="header"><divclass="container"><h2>TODOExample</h2></div></div></body></html>

在<body>内添加Wijmo Grid代码：

<divclass="container"><wj-flex-gridclass="grid"allow-add-new="true"allow-delete="true"items-source="cvToDo"><wj-flex-grid-columnbinding="TaskName"width="300"header="TaskName"></wj-flex-grid-column><wj-flex-grid-columnbinding="IsComplete"datatype="Boolean"width="200"header="IsComplete"></wj-flex-grid-column></wj-flex-grid></div>参考文章：

Microsoft Visual Studio LightSwitch 介绍

LightSwitch开发者中心

LightSwitch 团队博客

Wijmo5 中文博客