图解AngularJSWijmo5和LightSwitch

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

创新互联公司专注于墨脱企业网站建设,自适应网站建设,成都商城网站开发。墨脱网站建设公司,为墨脱等地区提供建站服务。全流程按需定制制作,专业设计,全程项目跟踪,创新互联公司专业和态度为您提供的服务

图解AngularJS Wijmo5和LightSwitch

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

图解AngularJS Wijmo5和LightSwitch

插入数据记录

图解AngularJS Wijmo5和LightSwitch

业务规则校验

图解AngularJS Wijmo5和LightSwitch

数据记录更新

图解AngularJS Wijmo5和LightSwitch

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

图解AngularJS Wijmo5和LightSwitch

点击列头,进行数据排序

图解AngularJS Wijmo5和LightSwitch

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

Wijmo 5控件集

图解AngularJS Wijmo5和LightSwitch

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

 

例子如下所示:

图解AngularJS Wijmo5和LightSwitch

 

LightSwitch 业务层

图解AngularJS Wijmo5和LightSwitch

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

图解AngularJS Wijmo5和LightSwitch

创建ToDo表

图解AngularJS Wijmo5和LightSwitch

点击写代码按钮,选择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地址

图解AngularJS Wijmo5和LightSwitch

 

图解AngularJS Wijmo5和LightSwitch

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

图解AngularJS Wijmo5和LightSwitch

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

AngularJs代码

图解AngularJS Wijmo5和LightSwitch

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

// 在AngularJS 声明依赖 Wijmo "wj" module:var app = angular.module('app', ['wj']);

图解AngularJS Wijmo5和LightSwitch

在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页面

图解AngularJS Wijmo5和LightSwitch

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




    
    To DO
    
    
    

    
    
    
    
    
    

    
    
    
    
    

    
    
    
    

    
    

    
    



    
        
            

                TO DO Example            

        
    

 

在内添加Wijmo Grid代码:


        
            
            
            
            
        
    

 

参考文章:


本文标题:图解AngularJSWijmo5和LightSwitch
路径分享:http://scyanting.com/article/pdijhj.html

其他资讯