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

Include necessary JS files:

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.
  
  1. 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.
  
  1. appModule.service("appService", function ($q, $http)
  2. {
  3. //defines the http header
  4. $http.defaults.headers.common.Accept = "application/json;odata=verbose";
  5. //method for reading data from SharePoint list using REST-API
  6. this.getListInfo = function (listTitle)
  7. {
  8. var dfd = $q.defer();
  9. var restUrl = _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listTitle + "')/items";
  10. $http.get(restUrl).success(function (data)
  11. {
  12. dfd.resolve(data.d.results);
  13. }).error(function (data)
  14. {
  15. dfd.reject("error getting tasks");
  16. });
  17. return dfd.promise;
  18. };
  19. });

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.
  
  1. appModule.controller('appController', function ($scope, appService)
  2. {
  3. $scope.empInfo = [];
  4. //reading specified SharePoint list info from angular js Custom Service
  5. var promiseList = appService.getListInfo("EmployeeInfo");
  6. promiseList.then(function (result)
  7. {
  8. $scope.empInfo = result;
  9. });
  10. });

The HTML code as follows:

SharePoint List Details

List Name: EmployeeInfo

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