文档章节

图解AngularJS Wijmo5和LightSwitch

葡萄城技术团队
 葡萄城技术团队
发布于 2015/01/07 11:03
字数 948
阅读 1375
收藏 20

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

image

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

image

插入数据记录

image

业务规则校验

image

数据记录更新

image

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

image

点击列头,进行数据排序

image

并发性校验(由LightSwitch的后端提供)。

Wijmo 5控件集

image

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会减少。

 

例子如下所示:

image

 

LightSwitch 业务层

image

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

image

创建ToDo表

image

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

               (entity.TaskName ==               (entity.IsComplete ==  intCountOfIncomplete =                     => x.IsComplete == => x.Id != (intCountOfIncomplete >

Wijmo 5代码

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

image

 

image

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

image

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

AngularJs代码

image

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

  app = angular.module('app', ['wj']);

image

在scripts文件夹下创建controllers文件夹,并创建appCtrl.js,并输入如下代码。

'use strict' app = angular.module('app''appToDoCtrl',       oDataService = '/ApplicationData.svc', dataTypes =     $scope.cvToDo = 'ToDoes''Id''Id', 'RowVersion', 'TaskName''IsComplete', 'Created', 'Modified'     $scope.cvToDo.error.addHandler(

创建HTML页面

image

创建ToDo.htm页面,并输入如下代码:

<!DOCTYPE html> <html 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"="text/javascript"></script>     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"="text/javascript"></script>     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.min.js"="text/javascript"></script>     <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"="text/javascript"></script>     <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"="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>         <div style="position:relative">             <h1></h1>         </div>     </div> </body> </html>

 

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

<div>         <wj-flex-grid-add-="true"-="true"-source="cvToDo">             <wj-flex-grid-="TaskName"="300"="Task Name">             </wj-flex-grid-column>             <wj-flex-grid-="IsComplete"="Boolean"="200"="IsComplete">             </wj-flex-grid-column>         </wj-flex-grid>     </div>

 

参考文章:

© 著作权归作者所有

葡萄城技术团队

葡萄城技术团队

粉丝 387
博文 546
码字总数 793300
作品 17
西安
高级程序员
私信 提问
Mobile first! Wijmo 5 + Ionic Framework之:Hello Wor

本教程中,我们用Wijmo 5 和 Ionic Framework实现一个Mobile的工程:Hello World。 Ionic是什么? Ionic是一个HTML5框架、免费、开源,用于帮助生成hybird mobile Apps (混合移动应用)。 Ioni...

葡萄城控件技术团队
2014/10/28
0
2
angular.js 1.3.17/1.4.2 发布

其中:1.3.17 更新内容如下: Bug Fixes +- **$browser:** prevent infinite digest if changing hash when there is no hashPrefix + ([61a3fb67](https://github.com/angular/angular.js/......

oschina
2015/07/07
2.6K
9
OSChina 技术专题之 AngularJS 更新版(201412)

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

OSC编辑部
2014/10/17
11.1K
26
给 Web 开发者的 25 款最有用的 AngularJS 工具

AngularJS 是一种新 JavaScript 框架,目的是降低要求,加快开发速度。AngularJS 是让 HTML 标记动态,使其对 web 开发者更有帮助,同时从大量的分段中给定一个标准结构,使开发速度更快更高...

oschina
2015/03/05
67.5K
19
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

4.01、Linux异常

1、无法连接虚拟设备ide1:0,因为主机上没有响应的设备 解决方法:找到“虚拟机” —— 打开“虚拟机设置” —— 单击“CD/DVD(IDE)”,右侧选中“使用ISO映像文件”,然后选中自己的镜像,重启...

静以修身2025
27分钟前
1
0
不允许有匹配 "[xX][mM][lL]" 的处理指令目标

Bug解决方案:org.xml.sax.SAXParseException; lineNumber: 1; columnNumber: 8; 不允许有匹配 "[xX][mM][lL]" 的处理指令目标 Caused by: org.xml.sax.SAXParseException; lineNumber: 1; c......

我叫小糖主
31分钟前
1
0
Mysql InnoDB 行锁和表锁介绍

mysql 的 InnoDB引擎支持行锁,与Oracle不同,mysql的行锁是通过索引加载的,即是行锁是加在索引响应的行上的,要是对应的SQL语句没有走索引,则会全表扫描,行锁则无法实现,取而代之的是表...

嘴角轻扬30
31分钟前
2
0
springboot+jpa 错误信息org.springframework.beans.factory.BeanCreationException

报错信息 org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'entityManagerFactory' defined in class path resource [org/springframework/boot/a......

冥焱
49分钟前
1
0
威胁快报|新兴挖矿团伙借助shodan作恶,非web应用安全再鸣警钟

近日,阿里云安全发现了一个使用未授权访问漏洞部署恶意Docker镜像进行挖矿的僵尸网络团伙。我们给这一团伙取名为Xulu,因为该团伙使用这个字符串作为挖矿时的用户名。 Xulu并不是第一个攻击...

迷你芊宝宝
56分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部