Introduction to AngularJS in SharePoint 2013

We can try some basic stuff in SharePoint using AngularJS. Now a days AngularJs is becoming popular among web development to do client-side jobs.

It's a very handy JavaScript framework to represent the data with DOM in the HTML structure.

To learn more about AngularJs, https://angularjs.org/ and there are many videos and articles across the globe.

We will now return to our show on using the AngularJS on the SharePoint business.

The example uses the SharePoint REST API to fetch the sub-site details and using AngularJs, we will render in a simple table without much code.

Pre-Requisites

AngularJS file

The latest stable version of AngularJS available from the following location:

https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js

 
SharePoint REST API enabled environment

HTML Snippet

<style type="text/css">
.web-table th{  background-color:#ddd;  border:2px solid #fff;}
.web-table td{  background-color:#eee;  border:2px solid #fff;}
.web-heading{   padding:2px;}
</style>
<script type="text/javascript" src="/siteassets/angular.min.js"></script>
<div ng-app="spng-App">
<h2 class="web-heading">Sub Sites</h2>
<div ng-controller="spng-WebCtrl">
    <table width="100%" cellpadding="10" cellspacing="2" class="web-table">
    <thead>
    <tr>
        <th>Title</th>
        <th>Id</th>
        <th>Created</th>
        <th>Web Template</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="_web in Webs">
        <td>{{_web.Title}}</td>
        <td>{{_web.Id}}</td>
        <td>{{_web.Created | date:'medium'}}</td>
        <td>{{_web.WebTemplate}}</td>
    </tr>
    </tbody>
    </table>
</div>
</div>

JavaScript Snippet

<script type="text/javascript">
var spApp= angular.module('spng-App', []);
spApp.controller('spng-WebCtrl', function($scope, $http){
    $http(    {
        method: "GET",
        url:"https://sharepointsite/_api/web/webs",
        headers: {"Accept":"application/json;odata=verbose"}
    }
    ).success(function(data, status, headers, config)      {
        $scope.Webs = data.d.results;
      }).error(function (data, status, headers, config)      {
      });
});
</script>

I have download the angularJs file and uploaded that file to SiteAssets. Instead, we can directly refer to the CDN:

<script id="angularScript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

• ng-app attribute to define the root element to auto-bootstrap an application
• ng-controller attribute attaches the controller to the view, the controller has a method to call the REST API to fetch the results.
• ng-repeat attribute in the tr tag is an Angular repeater directive. The repeater tells Angular to create a tr element for each web (_web) in the array using the <tr> … </tr> tag as the template.
• _web.Title, _web.Id, _web.Created, _web.WebTemplate return the actual value from the REST API.

We can insert the code to the Content Editor / Script Editor Web part to have the following screenshot.

That shows the sub sites under the site https://sharepointsite