Reading SharePoint List Data Using REST-API in AngularJS Modular Pattern

In this blog you will learn how to Read ShaePoint List data using REST API in Angular JS Modular Pattern ( Module, Service, Controller).

Include necessary JS files:

<script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>

<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>

<script type="text/javascript" src="/_layouts/15/sp.js"></script>

<script type="text/javascript" src="../Scripts/angularPlugin/angular.js"></script>

Create 3 JS files for angular modular pattern. 

1. module.js
2. service.js
3. controller.js

module.js

• In this file, define angular JS app.
  

  var appModule = angular.module("appModule", []);

service.js

• In these files, defines the http services for need to access.
  
  
• The following method is a common REST-API method for reading data from SharePoint List.
  

  appModule.service("appService", function ($q, $http)
  {
      //defines the http header
      $http.defaults.headers.common.Accept = "application/json;odata=verbose";
      //method for reading data from SharePoint list using REST-API
      this.getListInfo = function (listTitle)
      {
          var dfd = $q.defer();
          var restUrl = _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listTitle + "')/items";
          $http.get(restUrl).success(function (data)
          {
              dfd.resolve(data.d.results);
          }).error(function (data)
          {
              dfd.reject("error getting tasks");
          });
          return dfd.promise;
      };
  });

controller.js

• This file defines the angular JS controller.
  
  
• The angular JS controller controls the Angular JS application.
  
  
• The following code calls http method from angular JS custom services, and get the SharePoint List data.
  

  appModule.controller('appController', function ($scope, appService)
  {
      $scope.empInfo = [];
      //reading specified SharePoint list info from angular js Custom Service
      var promiseList = appService.getListInfo("EmployeeInfo");
      promiseList.then(function (result)
      {
          $scope.empInfo = result;
      });
  });

The HTML code as follows:

<div ng-app="appModule" ng-controller="appController">
    <h1>Angular JS - Sharepoint List Example</h1>
    <h2>Employee Info</h2>
    <table border="1" cellpadding="10">
        <tr>
            <th>Employee ID</th>
            <th>Employee Name</th>
        </tr>
        <tr ng-repeat="emp in empInfo">
            <td>{{emp.EID}}</td>
            <td>{{emp.EmpName}}</td>
        </tr>
    </table>
</div>

SharePoint List Details

List Name: EmployeeInfo
 

Column Name	Type
EID	Single line of Text
EmpName	Single line of Text