图解AngularJSWijmo5和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页面，并输入如下代码：

    
    
    
    
    

    
    
    
    
    
    

    
    
    
    
    

    
    
    
    

    
    

    
    



    
        
            

                TO DO Example