图解AngularJS Wijmo5和LightSwitch
Visual Studio 2013 中的 LightSwitch 有新增功能，包括更好的团队开发支持以及在构建 HTML 客户端桌面和 Office 365 应用程序方面的改进。本文结合最新发布的Wijmo 5提供的AngularJs进行图解。http://p_w_picpaths.cnitblog.com/blog/139239/201410/291516005033835.png
基于Visual Studio LightSwitch作为数据源，我们使用Wijmo 5控件快速的创建 AngularJS应用程序。
http://p_w_picpaths.cnitblog.com/blog/139239/201410/291516018628320.png
插入数据记录
http://p_w_picpaths.cnitblog.com/blog/139239/201410/291516029722648.png
业务规则校验
http://p_w_picpaths.cnitblog.com/blog/139239/201410/291516037532776.png
数据记录更新
http://p_w_picpaths.cnitblog.com/blog/139239/201410/291516050508046.png
选择数据记录，点击键盘上删除按键
http://p_w_picpaths.cnitblog.com/blog/139239/201410/291516060814631.png
点击列头，进行数据排序
http://p_w_picpaths.cnitblog.com/blog/139239/201410/291516071903660.png
并发性校验（由LightSwitch的后端提供）。
Wijmo 5控件集
http://p_w_picpaths.cnitblog.com/blog/139239/201410/291516099093228.png
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会减少。
例子如下所示：
http://p_w_picpaths.cnitblog.com/blog/139239/201410/291516131443641.png
LightSwitch 业务层
http://p_w_picpaths.cnitblog.com/blog/139239/201410/291516148158096.png
在解决方案视图，在数据源DataSources右键，选择Add Table
http://p_w_picpaths.cnitblog.com/blog/139239/201410/291516165032081.png
创建ToDo表
http://p_w_picpaths.cnitblog.com/blog/139239/201410/291516266441317.png
点击写代码按钮，选择Validate方法，在生成的模板中，插入验证代码。
partial void ToDoes_Validate(ToDo entity, EntitySetValidationResultsBuilder results)
{ // Do not allow a task to be called {New Task]
if (entity.TaskName == "")
{
results.AddEntityError( "Task cannot be named "
);
} // Do not allow more than 1 incomplete Task
if (entity.IsComplete == false)
{ int intCountOfIncomplete = this.DataWorkspace.ApplicationData.ToDoes
.Where(x => x.IsComplete == false)
.Where(x => x.Id != entity.Id).Count(); if (intCountOfIncomplete > 0)
{
results.AddEntityError( "Cannot have more than 1 incomplete Task"
);
}
}
}Wijmo 5代码
Wijmo 5下载地址：输入邮箱即可获得下载URL地址
http://p_w_picpaths.cnitblog.com/blog/139239/201410/291516283621759.png
http://p_w_picpaths.cnitblog.com/blog/139239/201410/291516295502828.png
解压Wijmo样例，定位到“..\Samples\JS\Angular\OData”目录，拷贝Vendor和styles文件夹到LightSwitch Server工程的Scripts文件夹。
http://p_w_picpaths.cnitblog.com/blog/139239/201410/291516304253927.png
创建wijmo.data文件夹，下载ODataCollectionView.js，并拷贝在wijmo.data文件夹下。
AngularJs代码
http://p_w_picpaths.cnitblog.com/blog/139239/201410/291516312841798.png
在scripts文件夹下创建app.js脚本文件，并输入如下代码。
// 在AngularJS 声明依赖 Wijmo "wj" module:var app = angular.module('app', ['wj']);http://p_w_picpaths.cnitblog.com/blog/139239/201410/291516323786597.png
在scripts文件夹下创建controllers文件夹，并创建appCtrl.js，并输入如下代码。
'use strict';var app = angular.module('app');
app.controller('appToDoCtrl', function appToDoCtrl($scope) { // define data service URL and data types for specific columns
var oDataService = '/ApplicationData.svc', dataTypes = []; // load ToDos table
$scope.cvToDo = new wijmo.data.ODataCollectionView(
{ serviceUrl: oDataService, entityName: 'ToDoes' },
['Id'],
{
serverSettings: {
selects: ['Id', 'RowVersion', 'TaskName', 'IsComplete', 'Created', 'Modified']
}
},
dataTypes, loaded, true); // Display any errors
$scope.cvToDo.error.addHandler(function (sender, args) {
alert(sender.errorMsg);
}); // tell scope when tables finish loading
function loaded() {
$scope.$apply();
}
});创建HTML页面
http://p_w_picpaths.cnitblog.com/blog/139239/201410/291516333622898.png
创建ToDo.htm页面，并输入如下代码：
<!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="appToDoCtrl">
<head>
<meta charset="utf-8" />
<title>To DO</title>
<!-- ensure IE uses the latest version of IE (yes, yes...) -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- jQuery/Angular/Bootstrap -->
<script src="http://code.jquery.com/jquery-2.0.0.min.js"
type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"
type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.min.js"
type="text/javascript"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"
type="text/javascript"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"
type="text/css" />
<!-- Wijmo -->
<script src="scripts/vendor/wijmo.min.js" type="text/javascript"></script>
<script src="scripts/vendor/wijmo.input.min.js" type="text/javascript"></script>
<script src="scripts/vendor/wijmo.grid.min.js" type="text/javascript"></script>
<link href="styles/vendor/wijmo.min.css" rel="stylesheet" />
<!-- app scripts -->
<script src="scripts/wijmo.data/ODataCollectionView.js" type="text/javascript"></script>
<script src="scripts/app.js" type="text/javascript"></script>
<script src="scripts/controllers/appCtrl.js" type="text/javascript"></script>
<!-- Wijmo-Angular interop -->
<script src="scripts/vendor/wijmo.angular.min.js" type="text/javascript"></script>
<!-- app styles -->
<link href="styles/app.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="header">
<div class="container" style="position:relative">
<h1>
TO DO Example </h1>
</div>
</div>
</body>
</html>
在<body>内添加Wijmo Grid代码：
<div class="container">
<wj-flex-grid class="grid"
allow-add-new="true"
allow-delete="true"
items-source="cvToDo">
<wj-flex-grid-column
binding="TaskName"
width="300"
header="Task Name">
</wj-flex-grid-column>
<wj-flex-grid-column
binding="IsComplete"
datatype="Boolean"
width="200"
header="IsComplete">
</wj-flex-grid-column>
</wj-flex-grid>
</div>
参考文章：
[*] Microsoft Visual Studio LightSwitch 介绍
[*] LightSwitch开发者中心
[*] LightSwitch 团队博客
[*] Wijmo5 中文博客
页:
[1]