Using AngularJS in SharePoint 2013

In the previous article we saw how to use KnockoutJS (KO) in SharePoint 2013. In this article we will see how to use AngularJS in SharePoint 2013. As in KO, you can perform this in client-side coding and you do not need server-side coding nor Visual Studio nor SharePoint designer to build this user interface (UI). Only knowledge of AngularJS is required. Before going into details, I am pasting the screenshot of how the UI will look once this sample is built.



I am building a very simple page here that is just scratching the surface of the vast functionality available within AngularJS. But the point is that it is easy to build fancy user interfaces once the nitty gritty of this language is understood. We will need to refer to the js libraries. I have uploaded them in the style library but as a best practice create a different JavaScript library for them, jquery-2.0.3.min.js and angular.min.js. The angular.min.js file can be downloaded from www.angularjs.org.  Some SharePoint data types such as images and hyperlinks need special processing to provide correct results that we will see how to handle.

We will use a simple example of a product list. Build a SharePoint list, ProductList, with the following columns and add a few records in this list.


.
Create a Site Page and insert a Script Editor Web Part from Media and Content category onto the page.



Click on "Edit Snippet" and paste the code as below:

<div ng-app><b>Welcome to AngularJS world in SharePoint 2013!</b>
 <div ng-controller="MyController"  class="ng-scope">
     <div ng-repeat="p in Products">
               <table style="background-color:#f07432">
               <tr><td align = "center"><b>Product Name: {{p.ProductName}}</b> </td></tr>
               <tr><td align = "center"><img ng-src={{p.ProductImage}} /> </td></tr>
               <tr><td align = "center"><b> Rate: Rs. {{p.ProductRate}}.</b></td></tr>
              
               </table>
               <hr />
               </div>
   </div>
 </div>
 <script type="text/javascript">
                              function MyController($scope)
                              {              $scope.loadREST = function () {
                              jQuery.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + "/_vti_bin/listdata.svc/ProductList?$select=ProductName,ProductRate,ProductImage",
        type: "GET",
        dataType: "json",
        async: "true",
        headers: { "Accept": "application/json;odata=verbose" },
        success: function (data) {
            var newData = [];
            jQuery.each(data.d.results, function(index,value) {            
                var pImage = value.ProductImage;
                prImage = pImage.substring(0, pImage.indexOf(','));
                 newData.push({ProductName: value.ProductName, ProductRate: value.ProductRate, ProductImage: prImage});
            });
            $scope.$apply(function(){
                $scope.Products = newData;
            });
        },
        error: function () {
            alert("error");
        }

    });

};
 $scope.loadREST(); 
}
</script>
<script src="http://win-4f44sec6iug:34480/sites/ts/Style Library/angular.min.js"></script>
<script src="http://win-4f44sec6iug:34480/sites/ts/Style Library/jquery-2.0.3.min.js"></script>

Click on "Insert and Stop Editing". If all goes well then you will see the results as shown in the first screenshot.

A couple of things to note:

1. _spPageContextInfo.webAbsoluteUrl + "/_vti_bin/listdata.svc/ProductList?$select=ProductName,ProductRate,ProductImage"
   is the main call from which the SharePoint list data is returned. Change to your list name and you can add filters at the JSON request to get specific records.

2. For hyperlink fields you need to perform special processing, such as:
   
   var pImage = value.ProductImage;
   prImage = pImage.substring(0, pImage.indexOf(','));
   
   We need to extract the URL since it comes twice in the JSON data.

3. Note the usage of ng-app, ng-controller, ng-src and ng-repeat elements. Proper usage of <div> tags is required for the variables to be in scope. Else you will see {} brackets in the output which means the variable is not being populated with values.

This program can be extended for many other visual effects and checking boundary conditions. This is one of the powerful ways to write a UI without requiring server-side coding and without Visual Studio and SharePoint Designer.