Illustrations Angularjs Wijmo5 and LightSwitch

Source: Internet
Author: User

LightSwitch in Visual Studio 2013 has new features, including better team development support and improvements in building HTML client desktops and Office 365 applications. This document is illustrated with the ANGULARJS provided by the newly released Wijmo 5.

Based on Visual Studio LightSwitch as a data source, we use WIJMO 5 controls to quickly create ANGULARJS applications.

Inserting data records

Business Rule Validation

Data record Updates

Select data Record, click on Keyboard to delete button

Click on the column header to sort the data

Concurrency check (provided by the backend of the LightSwitch).

Wijmo 5 Control set

October 7, 2014---Grape City announced the official release of Wijmo 5. Wijmo 5 is no longer compatible with the traditional browser (<= IE9), the pure HTML5 control set. Also, angular JS will be fully supported in the release and Wijmo of all 5 controls.

Why use Wijmo 5 and LightSwitch?
    • for the 100% control UI: The LightSwitch HTML client is based on jquery Mobile, which results in a significant amount of time spent in order to control the UI.
    • to achieve security : Security policies are typically implemented on the server side. cannot be achieved through ANGULARJS front-end technology. LightSwitch makes security very easy to implement.
    • in order to handle concurrency : When multiple people update the DB at the same time results in concurrency, fortunately, LightSwitch has implemented this feature automatically.
    • in order to use LightSwitch to manage the interface code : Based on LightSwitch, we do not need to use ANGULARJS to implement the management interface code, LightSwitch has been implemented, So combining LightSwitch and Angularjs makes programming very easy.
    • to speed up development : The current use of LightSwitch can greatly reduce code writing, which means that the development process accelerates and bugs are reduced.

The examples are as follows:

LightSwitch Business Layer

In the solution view, in the data source datasources right-click, select Add Table

Create a Todo table

Click the Write Code button, select the Validate method, and in the generated template, insert the validation code.

Partial voidtodoes_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)            {                intIntcountofincomplete = This. DataWorkspace.ApplicationData.ToDoes. Where (x= = X.iscomplete = =false)                    . Where (x= = X.id! =entity. ID).                Count (); if(Intcountofincomplete >0) {results. Addentityerror ("cannot has more than 1 incomplete Task"                        ); }            }        }
Wijmo 5 Code

Wijmo 5: Enter your email address to get the download URL

Unzip the Wijmo sample and navigate to the ".. \samples\js\angular\odata"directory, copy the vendor and styles folders to the Scripts folder of the LightSwitch Server project.

Create the Wijmo.data folder, download the odatacollectionview.js, and copy it under the Wijmo.data folder.

Angularjs Code

Create the App.js script file under the Scripts folder and enter the following code.

// the Angularjs declaration relies on the Wijmo "WJ" module: var app = Angular.module (' app ', [' WJ ']);
Create the Controllers folder under the Scripts folder and create the Appctrl.js, and enter the following code.
' Use strict ';varApp = Angular.module (' app '); App.controller (' Apptodoctrl ',functionApptodoctrl ($scope) {//Define data Service URL and data types for specific columns    varOdataservice = '/applicationdata.svc ', datatypes = []; //Load ToDos Table$scope. Cvtodo =NewWijmo.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    functionloaded () {$scope. $apply (); }});
Creating HTML pages

Create the Todo.htm page and enter the following code:

<! DOCTYPE html>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" href= "https://netdna.bootstrapcdn.com/bootstrap/ 3.1.1/css/bootstrap.min.css "type= "Text/css"/> <!--Wijmo and <script src= "Scripts/vendor/wijmo.min.js" type= "Text/javascript" ></s cript> <script src= "scripts/vendor/wijmo.input.min.js" type= "Text/javascript" ></script> <script S Rc= "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/odatacollectionv Iew.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"/>To do Example

Add Wijmo Grid code within <body>:

<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>
Reference article:
    • Microsoft Visual Studio LightSwitch Introduction
    • LightSwitch Developer Center
    • LightSwitch Team Blog
    • Wijmo5 Chinese Blog

Illustrations Angularjs Wijmo5 and LightSwitch

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.