Use AngularJS In SharePoint -- Hosted Apps illustrated

Prerequisite

The Napa Development tool app is already installed on SharePoint site.

Hands-on with SharePoint hosted app.

1. Open Office 365 SharePoint site. Go to site contents section. Click on “Napa” Office 365 Development Tools as shown below.

2. Add a new project using Add New Project button.

3. Below screen will be displayed with options of what type of app you want to build. Choose SharePoint Add-in option and enter a project name in the text box provided. Click on Create.

4. Below screen with the explorer window will be opened.

By default you will see the default.aspx page will open up.

We will be adding a reference to Angular.js file, html code to default.aspx file for displaying the data from host web (which is the SharePoint site where SharePoint add-in is added). Set permissions to the app and then code to app.js file for adding csom and code to bind data.

• Add reference to the Angular.min.js file
  
  Download the angular.min.js file from https://angularjs.org
  
  By default the project solution will have the below files.
  
  
  
  Right click on scripts file and choose option “Upload files" to add angular.min.js file from your computer.
  
  
  
  Now add script reference in the default.aspx page using the below code.
  
  
  
  
• Html code to default.aspx page,
  
  1. <div ng-app="employeesApp"> Displaying Employee data
  2. <div ng-controller="EmployeesController">
  3. <table><tr ng-repeat="emp in employees"> <td> {{ emp.title }} </td></tr></table>
  4. </div>
  5. </div>
  In theabove code we are adding an application “employeesApp" directive followed by a controller named “EmployeesController”.
  
  Using ‘ng-repeat’ directive we are iterating through list of employers and displaying the names of employers.
  
  
  
  
• In the host web. Create a list, name employee, and add some data in the list.
  
  
  
  
• Now go to SharePoint add-in the properties section as shown in the following screen and click on Permissions.
  
  
• Select full control for web as we are reading data from Employee list, which is hosted on the host web. Our app will need permissions to read data.
  
  Web
  
  Set this property if the add-in needs to request permission to access resources in the host web, such as lists and document libraries.
  
  
  
  
  
  
• Now go to app.js file and add the following code. This code is to read data form SharePoint and bind data to AngularJS controller.
  
  1. 'use strict';
  2. var hostweburl;
  3. var appweburl;
  5. var employeesApp = angular.module('employeesApp', []);
  6. employeesApp.controller('EmployeesController',
  7. function($scope, $http) {
  8. hostweburl = decodeURIComponent($.getUrlVar("SPHostUrl"));
  9. appweburl = decodeURIComponent($.getUrlVar("SPAppWebUrl"));
  10. $scope.employees = [];
  11. var scriptbase = hostweburl + "/_layouts/15/";
  12. $.getScript(scriptbase + "SP.Runtime.js",
  13. function() {
  14. $.getScript(scriptbase + "SP.js",
  15. function() {
  16. $.getScript(scriptbase + "SP.RequestExecutor.js", function() {
  17. var context = new SP.ClientContext(appweburl);
  18. var factory = new SP.ProxyWebRequestExecutorFactory(appweburl);
  19. context.set_webRequestExecutorFactory(factory);
  20. var appContextSite = new SP.AppContextSite(context, hostweburl);
  21. var web = appContextSite.get_web();
  22. context.load(web);
  24. var list = web.get_lists().getByTitle("Employee");
  25. var camlQuery = SP.CamlQuery.createAllItemsQuery();
  26. this.listItems = list.getItems(camlQuery);
  27. context.load(this.listItems);
  29. context.executeQueryAsync(
  30. Function.createDelegate(this, function() {
  31. var ListEnumerator = this.listItems.getEnumerator();
  32. while (ListEnumerator.moveNext()) {
  33. var currentItem = ListEnumerator.get_current();
  34. $scope.employees.push({
  35. title: currentItem.get_item('Title')
  36. });
  39. $scope.$apply();
  41. }
  42. }),
  43. Function.createDelegate(this, function(sender, args) {
  44. alert('exception occured');
  45. })
  46. );
  48. });
  49. }
  50. );
  51. }
  52. );
  53. }
  54. );
  55. jQuery.extend({
  56. getUrlVars: function() {
  57. var vars = [],
  58. hash;
  59. var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
  60. for (var i = 0; i < hashes.length; i++) {
  61. hash = hashes[i].split('=');
  62. vars.push(hash[0]);
  63. vars[hash[0]] = hash[1];
  64. }
  65. return vars;
  66. },
  67. getUrlVar: function(name) {
  68. return jQuery.getUrlVars()[name];
  69. }
  70. });
• We use csom code to read SharePoint list data (Employee) and iterating through list data and binding it using $scope and Employee array.
  
  
• $scope apply method is used for forcing the Scope to update the data while looping.
  
  
• Next step is to package the project and deploy to SharePoint.
  
  
• Click on fourth button in the left navigation and the following screen will appear.
  
  
  
  
• Once successfully packaged you will see the following screen.
  
  
  
  
• We can navigate to the next screen either by opening the link in a new tab or by navigating to the site contents page and clicking on the app directly.
  
  *app directly
  
  
  
  
• Click on “Trust it" button and you will see the app page with the Employee list data displayed.
  
  

Hope you enjoyed reading this article.