专栏首页葡萄城控件技术团队图解AngularJS Wijmo5和LightSwitch

图解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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Mobile first! Wijmo 5 + Ionic Framework之:Hello World!

    本教程中,我们用Wijmo 5 和 Ionic Framework实现一个Mobile的工程:Hello World。 Ionic是什么? Ionic是一个HT...

    葡萄城控件
  • 用于 Windows8 的 Wijmo Charts 图表控件

    随着Windows 8 Developer Preview 和 Visual Studio 11 Preview的发布, 大家对Metro-style的关注也逐...

    葡萄城控件
  • Wijmo 更优美的jQuery UI部件集:在安全站点使用Wijmo控件

    通常我们总会遇到这样的问题,在安全站点(HTTPS)中使用C1Wijmo控件时,用户可能会收到脚本错误。 发生这种状况的是由于我们的CDN链接不是https链接...

    葡萄城控件
  • JavaScript性能提升学习

    不支持defer属性的浏览器:defer、script、load 支持defer属性的浏览器:script、defer、load 3.2 动态添加scr...

    csxiaoyao
  • Vue使用props和emit父子组件通信

    任我行RQ
  • Python基础 | 为什么经常会将list()转化为numpy.array()类型

    在平时用python做开发或者阅读流行的开源框架的源码的时候,经常会看到一些代码将普通的列表list()类型转化为numpy的array(),如下所示:

    算法与编程之美
  • Python3中列表的使用

    列表操作常用操作包含以下方法: 1、list.append(obj):在列表末尾添加新的对象 2、list.count(obj):统计某个元素在列表中出现的次数...

    py3study
  • 从0开始发布一个无依赖、高质量的npm

    没有发布过npm包的同学,可能会对NPM对开发有一种蜜汁敬畏,觉得这是一个很高大上的东西。甚至有次面试,面试官问我有没有发过npm包,当时只用过还没写过,我想应...

    用户2356368
  • 字符过滤下的攻击:双写绕过

    1、软件系统常用的安全防御措施包括:字符过滤技术等。将可能带来安全隐患的,带有特定含义的字符串在接收客户端输入后立即清洗过滤,避免攻击脚本在服务器或者反射回客户...

    张树臣
  • 基于情感词典、k-NN、Bayes、最大熵、SVM的情感分析比较及优缺点

    机器学习AI算法工程

扫码关注云+社区

领取腾讯云代金券