Visual Studio 2013 中的 LightSwitch 有新增功能，包括更好的團(tuán)隊開發(fā)支持以及在構(gòu)建 HTML 客戶端桌面和 Office 365 應(yīng)用程序方面的改進(jìn)。本文結(jié)合最新發(fā)布的Wijmo 5提供的AngularJs進(jìn)行圖解。

創(chuàng)新互聯(lián)公司專注于墨脫企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),成都商城網(wǎng)站開發(fā)。墨脫網(wǎng)站建設(shè)公司,為墨脫等地區(qū)提供建站服務(wù)。全流程按需定制制作，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

基于Visual Studio LightSwitch作為數(shù)據(jù)源，我們使用Wijmo 5控件快速的創(chuàng)建 AngularJS應(yīng)用程序。

插入數(shù)據(jù)記錄

業(yè)務(wù)規(guī)則校驗

數(shù)據(jù)記錄更新

選擇數(shù)據(jù)記錄，點擊鍵盤上刪除按鍵

點擊列頭，進(jìn)行數(shù)據(jù)排序

并發(fā)性校驗（由LightSwitch的后端提供）。

Wijmo 5控件集

2014年10月7日---葡萄城宣布正式發(fā)布Wijmo 5。Wijmo 5不再兼容傳統(tǒng)瀏覽器（<= IE9），純HTML5控件集。并且，發(fā)布并Wijmo 5全部的控件中將全面支持Angular JS。

為何使用Wijmo 5和LightSwitch？

• 為了100%控制UI：LightSwitch HTML Client基于JQuery Mobile，這導(dǎo)致為了控制UI不得不花費(fèi)大量時間。

• 為了實現(xiàn)安全性：安全策略一般在Server端實現(xiàn)。無法通過AngularJs前端技術(shù)實現(xiàn)。LightSwitch使得安全性非常容易實現(xiàn)。

• 為了處理并發(fā)性：當(dāng)多人同時更新DB會導(dǎo)致并發(fā)性，所幸，LightSwitch已經(jīng)自動實現(xiàn)該特性。

• 為了用LightSwitch進(jìn)行管理界面代碼：基于LightSwitch，我們無需用AngularJs實現(xiàn)管理界面代碼，LightSwitch已經(jīng)實現(xiàn)了，故結(jié)合LightSwitch和AngularJs使得編程非常容易。

• 為了加快開發(fā)：當(dāng)前使用LightSwitch，可以大大減少代碼編寫，這意味著開發(fā)進(jìn)程會加速，bug會減少。

例子如下所示：

LightSwitch 業(yè)務(wù)層

在解決方案視圖，在數(shù)據(jù)源DataSources右鍵，選擇Add Table

創(chuàng)建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文件夾。

創(chuàng)建wijmo.data文件夾，下載ODataCollectionView.js，并拷貝在wijmo.data文件夾下。

AngularJs代碼

在scripts文件夾下創(chuàng)建app.js腳本文件，并輸入如下代碼。

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

在scripts文件夾下創(chuàng)建controllers文件夾，并創(chuàng)建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();
    }
});

創(chuàng)建HTML頁面

創(chuàng)建ToDo.htm頁面，并輸入如下代碼：

    
    
    
    
    

    
    
    
    
    
    

    
    
    
    
    

    
    
    
    

    
    

    
    



    
        
            

                TO DO Example