You are here:   Blog
Register   |  Login

Oct 25

Written by: Michael Washington
10/25/2013 5:02 AM  RssIcon

image

You can consume your backend OData Visual Studio LightSwitch services in AngularJs. Coding your business layer in LightSwitch will save you a lot of development time and reduce the code you will be required to write.

image

This example uses JayData,  a unified data access library for JavaScript that will be used to allow AngularJs to read and write to the LightSwitch OData layer.

The Application

image

Tasks are displayed in a list.

image

Clicking the add new button will display the form to allow a new task to be created.

image

The task can be entered and saved.

image

New tasks will appear immediately.

image

Clicking on an existing task will open it in a form so that it can be edited.

Clicking the remove button deletes a task.

image

Business rules created in the LightSwitch business layer are enforced.

Creating The LightSwitch Application

image

Use Visual Studio 2013 (or higher), create a New Project.

image

Create a new LightSwitch application.

image

Right-click on the Data Sources folder and select Add Table.

image

Create a table called ToDo and save it.

image

The table will be pluralized to ToDoes.

image

Select Write Code then ToDoes Validate.

Use the following code for the method:

 

        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).Count();
                if (intCountOfIncomplete > 0)
                {
                    results.AddEntityError(
                        "Cannot have more than 1 incomplete Task"
                        );
                }
            }
        }

 

image

We can create LightSwitch HTML Client screens to allow us to enter sample data.

(see: Visual Studio LightSwitch 2013–Hello World! for directions on creating LightSwitch screens)

image

We also see that the LightSwitch business rules are enforced.

 

Create the Entity Context

JayData tracks the changes of the entities using an entity context. Adding, updating, deleting entities happen through the context, which holds the reference to the added, updated and deleted objects and dispatches the operations (HTTP requests) to the OData endpoint after calling context.saveChanges(). Entity contexts can be defined manually or generated the JaySvcUtil.exe . You can download the latest version from JaySvcUtil CodePlex page.

image

When we run the application we note the url.

image

If we change the path to ApplicationData.svc we see the OData service.

image

We use the JayScvUtil tool to create the entity context using the format:

JaySvcUtil.exe -m http://{domain}:{port}/ApplicationData.svc/$metadata -o ApplicationData.js

image

We add the resulting file to the project.

 

Creating The AngularJs View Page

image

We will first make a simple page that displays data.

Right-click on the Server project and Add a new HTML page.

image

Name the page JayDataView.

Use the following code for the page:

 

<html>
<head>
    <title>JayData.org Sample</title>
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
    <script src="http://include.jaydata.org/datajs-1.0.3.js"></script>
    <script src="http://include.jaydata.org/jaydata.js"></script>
    <script src="http://include.jaydata.org/jaydatamodules/angular.js"></script>
    <script src="JayDataView.js"></script>
    <script src="ApplicationData.js"></script>
</head>
<body data-ng-app="app">
    <div ng-controller="ToDoesController">
        <ul>
            <li ng-repeat="ToDo in ToDoes">
                <input id="checkSlave" type="checkbox" ng-model="ToDo.IsComplete">
                {{ToDo.TaskName}}
            </li>
        </ul>
    </div>
</body>
</html>

 

Create a JavaScript file called JayDataView.js and use the following code:

 

// Create an Angular app and inject JayData
var app = angular.module('app', ['jaydata']);
// Define a controller
function ToDoesController($scope, $data) {
    // Make a empty collection for ToDoes
    $scope.ToDoes = [];
    var ApplicationData = new LightSwitchApplication.ApplicationData({
        name: 'oData',
        oDataServiceHost: '/ApplicationData.svc'
    });
    ApplicationData.onReady(function () {
        // Connect the ToDoes collection to the
        // JayData toLiveArray()
        $scope.ToDoes = ApplicationData.ToDoes.toLiveArray();
    });
}

 

image

Run the application.

image

Navigate to the JayDataView page in the root of the website and the tasks will show.

 

Create The AngularJs CRUD Page

Create a new page called JayData.html and use the following code:

 

<html>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<script src="http://include.jaydata.org/datajs-1.0.3.js"></script>
<script src="http://include.jaydata.org/jaydata.js"></script>
<script src="http://include.jaydata.org/jaydatamodules/angular.js"></script>
<script src="JayData.js"></script>
<script src="ApplicationData.js"></script>
<body>
    <div data-ng-app="app" ng-controller="ToDoEditorController">
        <ul>
            <li ng-repeat="ToDo in colToDoes">
                <input id="checkbox" type="checkbox" ng-model="ToDo.IsComplete" disabled="disabled">
                <a href="#" ng-click="$parent.selectedToDo = ToDo">{{ToDo.TaskName}}</a>
            </li>
        </ul>
        <button ng-click="newToDo()">add new</button>
        <p>
            <form ng-if="selectedToDo">
                <fieldset style="width: 300px; background-color: #FFFFCC;">
                    <legend>{{selectedToDo.TaskName}}</legend>
                    <br />
                    <label>
                        <span><strong>Id:</strong></span>
                        <span>{{selectedToDo.Id}}</span>
                        <span>
                            <br />
                            <strong>Task Name:</strong>
                        </span>
                        <input ng-model="selectedToDo.TaskName" size="20" />
                        <span>
                            <br />
                            <strong>Is Complete:</strong>
                        </span>
                        <input type="checkbox" ng-model="selectedToDo.IsComplete" />
                        <br />
                        <br />
                    </label>
                    <button ng-click="save()">Save</button>
                    <button ng-click="remove()">Remove</button>
                </fieldset>
            </form>
        </p>
    </div>
</body>
</html>

 

 

Use the following code for the JayData.js file:

 

var app = angular.module('app', ['jaydata']);
function ToDoEditorController($scope, $data) {
    $scope.ToDoes = [];
    $scope.selectedToDo = null;
    var ApplicationData = new LightSwitchApplication.ApplicationData({
        name: 'oData',
        oDataServiceHost: '/ApplicationData.svc'
    });
    ApplicationData.onReady(function () {
        $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");
            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]"
        });
    };
}

 

JayData Links

Jaydata and AngularJS

Jaydata and AngularJS continued

JaySvcUtil CodePlex page

 

Download Code

The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx

(you must have Visual Studio 2013 (or higher) installed to run the code)

3 comment(s) so far...


Gravatar

Re: Using JayData to Consume the Visual Studio LightSwitch OData Business Layer in a AngularJs CRUD Application

Using the downloaded LS project, I get an error:
Unhandled exception at line 16043, column 13 in http://include.jaydata.org/jaydata.js
0x800a1391 - JavaScript runtime error: 'XSLTProcessor' is undefined

when clicking either JayData links in the application.

By lkbreth on   10/25/2013 5:48 PM
Gravatar

Re: Using JayData to Consume the Visual Studio LightSwitch OData Business Layer in a AngularJs CRUD Application

@lkbreth - Are you using IE11 on Windows 8.1? I get that error too. I reported it to JayData: http://jaydata.org/forum/viewtopic.php?f=3&t=313&sid=8c580322642381920ef1fb26cf386b3c
They gave me a solution and I updated the code.

By Michael Washington on   10/26/2013 6:32 AM
Gravatar

Re: Using JayData to Consume the Visual Studio LightSwitch OData Business Layer in a AngularJs CRUD Application

It was IE11/8.1, and now the updated code works fine. Thanks.

By lkbreth on   10/28/2013 6:36 PM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 

Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation