溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Visual Studio 2013 中的 LightSwitch 有新增功能，包括更好的團隊開發支持以及在構建 HTML 客戶端桌面和 Office 365 應用程序方面的改進。本文結合最新發布的Wijmo 5提供的AngularJs進行圖解。
基于Visual Studio LightSwitch作為數據源，我們使用Wijmo 5控件快速的創建 AngularJS應用程序。
插入數據記錄
業務規則校驗
數據記錄更新
選擇數據記錄，點擊鍵盤上刪除按鍵
點擊列頭，進行數據排序
并發性校驗（由LightSwitch的后端提供）。
2014年10月7日---葡萄城宣布正式發布Wijmo 5。Wijmo 5不再兼容傳統瀏覽器（<= IE9），純HTML5控件集。并且，發布并Wijmo 5全部的控件中將全面支持Angular JS。
為了100%控制UI：LightSwitch HTML Client基于JQuery Mobile，這導致為了控制UI不得不花費大量時間。
為了實現安全性：安全策略一般在Server端實現。無法通過AngularJs前端技術實現。LightSwitch使得安全性非常容易實現。
為了處理并發性：當多人同時更新DB會導致并發性，所幸，LightSwitch已經自動實現該特性。
為了用LightSwitch進行管理界面代碼：基于LightSwitch，我們無需用AngularJs實現管理界面代碼，LightSwitch已經實現了，故結合LightSwitch和AngularJs使得編程非常容易。
為了加快開發：當前使用LightSwitch，可以大大減少代碼編寫，這意味著開發進程會加速，bug會減少。
例子如下所示：
在解決方案視圖，在數據源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下載地址：輸入郵箱即可獲得下載URL地址
解壓Wijmo樣例，定位到“..\Samples\JS\Angular\OData”目錄，拷貝Vendor和styles文件夾到LightSwitch Server工程的Scripts文件夾。
創建wijmo.data文件夾，下載ODataCollectionView.js，并拷貝在wijmo.data文件夾下。
在scripts文件夾下創建app.js腳本文件，并輸入如下代碼。
// 在AngularJS 聲明依賴 Wijmo "wj" module:var app = angular.module('app', ['wj']);
'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();
}
});
創建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" 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" > <h2> TO DO Example </h2> </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>
Microsoft Visual Studio LightSwitch 介紹
LightSwitch開發者中心
LightSwitch 團隊博客
Wijmo5 中文博客
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
