AngularJS in SharePoint 2013: Part 1

Article

Introduction

AngularJS is perfect for Single Page Applications (SPAs) that extend HTML with new attributes. AngularJS is a JavaScript framework and it can be added to an HTML page with a <script> tag. AngularJS extends HTML attributes with Directives and binds data to HTML with Expressions. To learn more about AngularJS please refer to https://angularjs.org/.

AngularJS Directives

The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application.

The ng-model directive binds the value of the input field to the application variable name.

The ng-controller directive defines the application controller.

The $scope of the controller is the application (the HTML element) it is referred from.

AngularJS expressions are written inside double braces as in {{expression }} and they can contain literals, operators and variables.

Example

<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-controller="controller">
First Name: <input type="text" ng-model="user.firstName"><br>
Last Name: <input type="text" ng-model="user.lastName"><br>
<br>
Welcome {{fullName()}}
</div>
<script>
function controller($scope) {
// $scope.user is the property for controller object
// firstName & lastName are the properties for user object
$scope.user = { firstName: "", lastName: "", };
$scope.fullName = function () {
var x = $scope.user;
return x.firstName + " " + x.lastName;
}
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

Output

In this article you will see how to use AngularJS in a SharePoint 2013 page. I have created a custom list named “Contact Details” that contains the following fields.

We will create a page with HTML form and update the preceding list item using AngularJS and the JavaScript object model.

Create a page

1. Navigate to the SharePoint site.
2. Click on Settings and then click on Add a page.

3. Enter the page name and then click on the Create button.

4. The Page is created successfully.

Use the following to add a Script Editor Webpart:

1. Navigate to the newly created page.
2. Click on the Page tab and then click on the Edit button in the ribbon interface.

3. Click on the Insert tab and then click on Web Part.

4. Select the Script Editor web part and then click on the Add button.

5. Edit the web part and then click on Edit Snippet.

6. Copy and paste the following code snippet and then click on the Insert button.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
function ContactsCtrl($scope) {
$scope.contact = { firstName: "", lastName: "", location: "" };
$scope.addContact = function ($event) {
var x = $scope.contact;
$event.preventDefault();
var clientContext = new SP.ClientContext.get_current();
var web = clientContext.get_web();
var list = web.get_lists().getByTitle('Contact Details');
// create the ListItemInformational object
var listItemInfo = new SP.ListItemCreationInformation();
// add the item to the list
var listItem = list.addItem(listItemInfo);
// Assign Values for fields
listItem.set_item('Title', x.firstName);
listItem.set_item('LastName', x.lastName);
listItem.set_item('FullName', x.firstName + " " + x.lastName);
listItem.set_item('Location', x.location);
listItem.update();
clientContext.executeQueryAsync(
Function.createDelegate(this, onQuerySucceeded),
Function.createDelegate(this, onQueryFailed)
);
};
onQuerySucceeded = function () {
alert('Successfully updated the contact');
}
onQueryFailed = function (sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
}
</script>
<h1>Contact Information:</h1>
<br />
<div ng-app="">
<div ng-controller="ContactsCtrl">
<strong>First Name</strong>
<input type="text" ng-model="contact.firstName" /><br />
<br />
<strong>Last Name</strong>
<input type="text" ng-model="contact.lastName" /><br />
<br />
<strong>Location </strong> <input type="text" ng-model="contact.location" /><br />
<br />
<input type="submit" value="Submit" ng-click="addContact($event)" />
</div>
</div>

7. Click on the Ok button in the web part properties window.
8. Click on the Save button in the ribbon interface.
9. You can see in the following HTML form, enter the values and then click on Submit.

10. The item is inserted successfully in the SharePoint list.