溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

圖解AngularJS Wijmo5和LightSwitch

發(fā)布時間：2020-07-09 15:42:51 來源：網(wǎng)絡(luò) 閱讀：5176 作者：powertoolsteam 欄目：web開發(fā)

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

圖解AngularJS Wijmo5和LightSwitch

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

圖解AngularJS Wijmo5和LightSwitch

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

圖解AngularJS Wijmo5和LightSwitch

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

圖解AngularJS Wijmo5和LightSwitch

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

圖解AngularJS Wijmo5和LightSwitch

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

圖解AngularJS Wijmo5和LightSwitch

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

圖解AngularJS Wijmo5和LightSwitch

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

Wijmo 5控件集

圖解AngularJS Wijmo5和LightSwitch

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不得不花費大量時間。

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

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

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

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

 

例子如下所示：

圖解AngularJS Wijmo5和LightSwitch

 

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

圖解AngularJS Wijmo5和LightSwitch

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

圖解AngularJS Wijmo5和LightSwitch

創(chuàng)建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

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

AngularJs代碼

圖解AngularJS Wijmo5和LightSwitch

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

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

圖解AngularJS Wijmo5和LightSwitch

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

圖解AngularJS Wijmo5和LightSwitch

創(chuàng)建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>內(nèi)添加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開發(fā)者中心

  • LightSwitch 團隊博客

  • Wijmo5 中文博客


向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手