最后一个结束的AngularJS模块使用 LightSwitch OData作为后端

分享于 

18分钟阅读

Web开发

  繁體
一个使用 LightSwitch OData作为后端的End-to-End AngularJS SharePoint MODULE

image

你可以使用 AngularJS 和 LightSwitch 创建收费的SharePoint 提供程序应用程序。 这将使你能够更快更轻松地创建应用程序。

image

本文中创建的应用程序将显示任务列表,以及创建任务的用户。 要编辑已有的任务,我们点击任务。 要创建新的任务,我们单击添加新 button。

image

要保存新的任务或者编辑现有的任务,我们输入数据并单击保存按钮,。 如果我们想为现有的任务,我们将点击 Remove。

image

应用程序还演示了如何实现业务规则和安全。

为什么要在LightSwitch中使用 AngularJS?
  • 你需要的是对 UI的100%控制LightSwitch的HTML HTML HTML对 JQuery Mobile 服务的依赖。 在大多数情况下,这是很好的,但是你可以使用像素设计规范一个像素的。
  • 你需要在服务器端实现安全安全 你不能实现安全 inside ,因为它是客户端技术。 安全性,我们将在本示例中演示。
  • 管理屏幕 AngularJS AngularJS屏幕take比标准的LightSwitch屏幕花费。 但是,不需要将所有屏幕中的所有屏幕编码为 这个例子将展示,你可以在同一个应用程序中混合使用 screens screens。
  • 为了与其他应用程序一起使用,你希望构建一个服务层- LightSwitch是创建服务的最简单最可靠的方法。
  • 如果你想用的代码,那么你想加速开发。 这意味着开发更快,Bug 更少。
  • 直接使用 Web API vs 调用 OData

You Web API 使用 Visual-Studio-LightSwitch创建 AngularJS-CRUD应用程序,可以用 结构如下所示:

image

但是,你可以使用 / ( 在本文中演示) 直接使用 backend services服务使用JayData在AngularJS的CRUD应用程序中使用 Visual-Studio-LightSwitch业务层。 这将节省大量开发时间,并减少编写代码所需的代码。 结构如下所示:

image

在本文的示例中,我们将直接调用服务层服务层。

创建项目

image

Visual Studio 我们创建一个收费的新项目

image

我们创建了一个收费的云商务应用。

image

我们将提示输入一个 SharePoint开发站点。

image

单击完成

image

将创建该项目。

image

解决方案将显示。

添加数据源和业务逻辑

image

项目,右击右键单击的数据源文件夹,然后选择添加表。

image

创建待办事项表。

image

写代码菜单中,选择验证方法。

将以下代码用于该方法:


partial void ToDoes_Validate(ToDo entity, EntitySetValidationResultsBuilder results)


{


 if (entity.Details.EntityState == EntityState.Modified)


 {


 if (entity.CreatedByInfo.Id!= this.Application.User.Id)


 {


 results.AddEntityError(


 "Task can only be modified by" + entity.CreatedByInfo.Identity.Name


 );


 }


 }



 // 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).Count();



 if (intCountOfIncomplete > 0)


 {


 results.AddEntityError(


 "Cannot have more than 1 incomplete Task"


 );


 }


 }




image

designer中,选择 Write Deleting Deleting Deleting Deleting method method method。

将以下代码用于该方法:


partial void ToDoes_Deleting(ToDo entity)


{


 if (entity.CreatedByInfo.Id!= this.Application.User.Id)


 {


 throw new ValidationException("Task can only be deleted by"


 + entity.CreatedByInfo.Identity.Name);


 }


}




创建LightSwitch客户端屏幕

image

HTMLClient项目,右击 Screens文件夹and并选择添加屏幕。

image

使用普通屏幕集模板创建ToDo实体的屏幕。

image

将创建屏幕

image

运行项目。

image

你将需要登录到你的SharePoint 开发者网站。

image

应用程序将被加载到你的收费 development。

image

web浏览器将打开,你需要登录到收费的SharePoint开发人员站点。

image

你将需要为应用程序提供的信任。

image

应用程序将加载,你将有能力添加和编辑 items项目。

你将注意到,验证和业务规则被强制。

关闭网页浏览器并返回的Visual Studio

创建AngularJS应用程序

image

右键单击服务器项目,并选择管理NuGet软件包。

image

安装

image

安装 JayData

image

的服务器项目中创建一个文件夹名为页面。

右键点击页面 folder,添加一个新的JavaScript文件。

image

将文件命名为 JayDataCRUD

将下面的代码添加到文件中,以创建 Angular 应用程序:





(function () {


 "use strict";


 // Create a app and inject jaydata


 var app = angular.module('app', ['jaydata']);


})();



将控制器代码添加到 file:


(function () {


 // Create a ToDoEditorController injecting $scope and $data (for JayData)


 angular.module('app')


. controller('ToDoEditorController', ['$scope', '$data',


 function ToDoEditorController($scope, $data) {


 // Create an empty ToDoes collection


 $scope.ToDoes = [];


 // Set the selectedToDo to nothing for now


 $scope.selectedToDo = null;



 // Call the/ApplicationData.svc LightSwitch OData service


 $data.initService('/ApplicationData.svc').then(function (ApplicationData) {


 $scope.ApplicationData = ApplicationData;


 $scope.ToDoes = ApplicationData.ToDoes.toLiveArray();


 });



 // This will be called when the collection changes


 Object.defineProperty($scope, "colToDoes", {


 get: function () {


 return $scope.ApplicationData


. ToDoes


. toLiveArray();


 }


 });



 $scope.save = function () {


 if ($scope.selectedToDo.Id) {


 // Save an existing ToDo item


 $scope.ApplicationData.ToDoes.attach($scope.selectedToDo, true);


 $scope.selectedToDo.entityState = $data.EntityState.Modified;


 }


 else {


 // Save a new ToDo item


 $scope.ApplicationData.ToDoes.add($scope.selectedToDo, true);


 }


 $scope.saveChanges();


 };



 // Save any changes


 $scope.saveChanges = function () {


 $scope.ApplicationData.saveChanges()


. then(function () {


 $scope.selectedToDo = null;


 }, function (error) {


 // Get the validation error messages from LightSwitch


 var xml = error.message,


 xmlDoc = $.parseXML(xml),


 $xml = $(xmlDoc),


 $ValidationResults = $xml.find("ValidationResults");



 if ($ValidationResults[0].childNodes.length == 0) {


 // This is a simple error


 $MessageError = $xml.find("Message")[0].childNodes['0'].data;


 alert($MessageError);


 } else {


 // This is a entity validation error


 angular.forEach($ValidationResults, function (ValidationResult) {


 angular.forEach(ValidationResult.childNodes, function (childNode) {


 alert(childNode.childNodes[0].textContent);


 });


 });


 }



 $scope.ApplicationData.stateManager.reset();


 });


 };



 $scope.remove = function () {


 // Remove the ToDo item


 $scope.ApplicationData.ToDoes.remove($scope.selectedToDo);


 $scope.saveChanges();


 };



 $scope.newToDo = function () {


 var ctx = $scope.ApplicationData;


 // Add a new ToDo item


 $scope.selectedToDo = new ctx.ToDoes.elementType({


 // Set the default value for the Task Name


 TaskName: "[New Task]"


 });


 };


 }]);


})();



image

右键点击页面 ,然后添加一个新的Web表单file文件。

你可以使用普通的页面,但是你必须配置本地的IIS Express来在这个上下文中运行页面,这样我们就避免了使用Web表单页面来解决这个问题。 我们还可以使用MVC页面,但是我们又避免了在项目中实现的额外步骤( enable在项目中启用 MVC )

image

将文件命名为 JayDataCRUD

image

将创建该文件。

将标记中的代码更改为以下内容:


<%@ Page Language="C#"



    AutoEventWireup="true"



    CodeBehind="JayDataCRUD.aspx.cs"



    Inherits="LightSwitchApplication.Pages.JayDataCRUD" %>



<!DOCTYPE html>



<html>


<head>


 <meta charset="utf-8" />


 <meta http-equiv="X-UA-Compatible" content="IE-8" />


 <script src="../Scripts/jquery-1.8.0.js"></script>


 <script src="../Scripts/angular.js"></script>


 <script src="../Scripts/datajs-1.0.3.js"></script>


 <script src="../Scripts/jaydata.js"></script>


 <script src="../Scripts/jaydatamodules/angular.js"></script> 


 <script src="https://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"



        type="text/javascript"></script>


 <script src="JayDataCRUD.js"></script>


 <title>JayDataCRUD</title>


</head>


<body ng-cloak class="ng-cloak" data-ng-app="app">


 <!-- Chrome control placeholder -->


 <div id="chrome_ctrl_placeholder"></div>


 <div id="MainContent" data-ng-controller="ToDoEditorController">


 <table>


 <tr data-ng-repeat="ToDo in colToDoes">


 <td>


 <input id="checkbox" type="checkbox"



                        data-ng-model="ToDo.IsComplete" disabled="disabled"></td>


 <td>


 <a href="#"



                        data-ng-click="$parent.selectedToDo = ToDo">{{ToDo.TaskName}}</a>


 </td>


 <td>[{{ToDo.CreatedBy}}]</td>


 </tr>


 </table>


 <p>


 <button class="button normaltext" data-ng-click="newToDo()">add new</button></p>


 <form data-ng-if="selectedToDo">


 <fieldset style="width: 300px;">


 <legend>{{selectedToDo.TaskName}}</legend>


 <br />


 <label>


 <span><strong>Id:</strong></span>


 <span>{{selectedToDo.Id}}</span>


 <span>


 <br />


 <strong>Task Name:</strong>


 </span>


 <input data-ng-model="selectedToDo.TaskName" size="20" />


 <span>


 <br />


 <strong>Is Complete:</strong>


 </span>


 <input type="checkbox" data-ng-model="selectedToDo.IsComplete" />


 <br />


 <br />


 </label>


 <button data-ng-click="save()">Save</button>


 <button data-ng-click="remove()">Remove</button>


 </fieldset>


 </form>


 </div>


</body>


</html>



将AngularJS页面配置为加载

image

项目中,双击double双击 AppManifest.xml 以打开它。

image

选择的JayDataCRUD.aspx 页面作为的开始页面。

运行AngularJS应用程序

image

运行应用程序时,我们将再次收取信任

image

的AngularJS 应用程序将加载。

image

将实施安全和业务规则。

匹配SharePoint站点的样式

要将应用程序样式设置为 MATCH SharePoint网站,我们将下列内容添加到收费的JayDataCRUD.aspx file:


<script type="text/javascript">


 // Set the style of the client web part page


 // to be consistent with the host web.


 (function () {


 'use strict';



 var hostUrl = '';


 if (document.URL.indexOf('?')!= -1) {


 var params = document.URL.split('?')[1].split('&');


 for (var i = 0; i <params.length; i++) {


 var p = decodeURIComponent(params[i]);


 if (/^SPHostUrl=/i.test(p)) {


 hostUrl = p.split('=')[1];


 document.write('<link rel="stylesheet" href="'


 + hostUrl + '/_layouts/15/defaultcss.ashx"/>');


 break;


 }


 }


 }


 if (hostUrl == '') {


 document.write('<link rel="stylesheet"'


 + 'href="https://www.codeproject.com/_layouts/15/1033/styles/themable/corev15.css"/>');


 }


 })();


</script>




image

现在当我们运行应用程序时,样式匹配。

添加 SharePoint Chrome ( logo 和工具栏)

要创建一个收费的SharePoint Chrome ( 标题栏 logo 帮助 icon 和"gear"包含指向应用程序中其他页的链接的icon ),我们将为的脚本目录(。在 JayDataCRUD.aspx 文件中添加对它的引用) 添加一个名为 ChromeLoader.js。

我们对 file: 使用下面的代码


var hostweburl;



//load the SharePoint resources 


$(document).ready(function () {


 //Get the URI decoded URL. 


 hostweburl =


 decodeURIComponent(


 getQueryStringParameter("SPHostUrl")


 );



 // The SharePoint js files URL are in the form: 


 // web_url/_layouts/15/resource 


 var scriptbase = hostweburl + "/_layouts/15/";



 // Load the js file and continue to the 


 // success handler 


 $.getScript(scriptbase + "SP.UI.Controls.js", renderChrome)


});



//Function to prepare the options and render the control 


function renderChrome() {



 // The Help, Account and Contact pages receive the 


 // same query string parameters as the main page 


 var options = {


 "appIconUrl": hostweburl + "/_layouts/15/images/siteicon.png",


 "appTitle": "AngularJS CRUD App",


 "appHelpPageUrl": "JayDataCRUD.aspx?"


 + document.URL.split("?")[1],


 "settingsLinks": [


 {


 "linkUrl": "../HTMLClient/default.htm?"


 + document.URL.split("?")[1],


 "displayName": "LightSwitch Application"


 }


 ]


 };



 var nav = new SP.UI.Controls.Navigation(


 "chrome_ctrl_placeholder",


 options


 );


 nav.setVisible(true);


}



// Function to retrieve a query string value. 


function getQueryStringParameter(paramToRetrieve) {


 var params =


 document.URL.split("?")[1].split("&");


 var strParams = "";


 for (var i = 0; i < params.length; i = i + 1) {


 var singleParam = params[i].split("=");


 if (singleParam[0] == paramToRetrieve)


 return singleParam[1];


 }


}



image

应用程序现在已经完成。

image

点击"gear"icon 将显示一个链接,将我们带到我们创建的 LightSwitch pages页面。

发布和部署

image

尽管我们增加了项目,但它仍然是一个 LightSwitch 项目。 因此,要部署,请按照以下说明操作:

将一个LightSwitch应用程序部署到 Office 365/SharePoint 在线应用程序。

链接- 微软

如何:使用应用程序中的客户端 Chrome 控件进行SharePoint应用程序。

:在托管的应用程序应用程序中使用控件

链接- JayData

Jaydata和 AngularJS

Jaydata和AngularJS继续运行。

链接- LightSwitch帮助网站

将一个LightSwitch应用程序部署到 Office 365/SharePoint 在线应用程序。

创建SharePoint联机测试网站。

浏览 SharePoint-2013-Visual-Studio 云业务应用程序( LightSwitch )

创建了一个LightSwitch多租户托管应用程序应用程序

在 SharePoint 2013云业务应用程序( LightSwitch ) 中实现文档


angular  Light  模块  SHA  分享  lights