图解AngularJS Wijmo5和LightSwitch
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方法,在生成的模板中,插入验证代码。
partial void ToDoes_Validate(ToDo entity, EntitySetValidationResultsBuilder results) { // Do not allow a task to be called {New Task] if (entity.TaskName == "[New Task]") { results.AddEntityError( "Task cannot be named [New Task]" ); } // 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地址
解压Wijmo样例,定位到“..\Samples\JS\Angular\OData”目录,拷贝Vendor和styles文件夹到LightSwitch Server工程的Scripts文件夹。
创建wijmo.data文件夹,下载ODataCollectionView.js,并拷贝在wijmo.data文件夹下。
AngularJs代码
在scripts文件夹下创建app.js脚本文件,并输入如下代码。
// 在AngularJS 声明依赖 Wijmo "wj" module:var app = angular.module('app', ['wj']);
在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页面
创建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 中文博客
原文地址:https://www.cnblogs.com/liudianjia/p/12614192.html
- 通过shell脚本查看package的信息(r2笔记86天)
- 通过shell脚本查看procedure的信息(r2笔记85天)
- 支持中文文本数据挖掘的开源项目PyMining
- 通过分区键值发现性能问题(r2笔记84天)
- linux乱码和数据库乱码的问题简单排查(r2笔记83天)
- 一条运行了3天的"简单"的sql(r2笔记82天)
- 海量数据迁移之使用shell启用多个动态并行(r2笔记81天)
- 使用shell测试历史数据样本(r2笔记80天)
- 【专业技术】编译器的工作原理
- ORA-17500 ODM err的问题排查(r2笔记78天)
- 【专业技术】linux启动流程剖析
- 使用dbms_metadata生成建表语句(r2笔记97天)
- 海量数据迁移之使用分区并行切分导入(r2笔记79天)
- 关于oracle session的简单测试(r2笔记95天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 个人珍藏的80道多线程并发面试题(1-10答案解析)
- 理解DOM Diff算法
- 腾讯云ES集群通过COS实现跨地域备份与恢复
- Thymeleaf一篇就够了
- python scipy.stats实现各种常见的统计分布
- 操作系统基础 - 文件系统
- Linux升级OpenSSH修复高危漏洞
- Pytest之收集用例及命令行参数
- CVE-2020-14645:Weblogic远程代码执行复现
- 从0到1开发测试平台(七)后端服务添加swagger第三方类库
- leetcode - 分割数组的最大值
- leetcode - 除数博弈
- leetcode - 最小路径和
- Javascript中的数据类型
- JAVA 应用日志最佳实践