In my previous posts, I have given an intro to PnP JS Core library and basic code snippets to access SharePoint objects using PnP-JS-Core component as in the following links:

The above links give you some basic idea about PnP-JS-Core library and how to use that library in accessing the SharePoint.

In this article, we will see how to use the PnP-JS-Core library with Angular JS framework. So I took the example from my old article:

and it uses the Angular JS 1 framework to display the sub sites with basic details in a table format.

What are the things we require?

Note: Fetch JS & Promise JS files are required to run PnP methods in some browsers.

Include Script Files

I have uploaded the required script files under Site Assets library.

  1. <script type="text/javascript" src="/siteassets/scripts/fetch.js"></script>
  2. <script type="text/javascript" src="/siteassets/scripts/promise.min.js"></script>
  3. <script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>
  4. <script type="text/javascript" src="/siteassets/scripts/angular.min.js"></script>
Include HTML elements
  1. <div ng-app="spng-App">
  2. <h2 class="web-heading">Sub Sites</h2>
  3. <div ng-controller="spng-WebCtrl">
  4. <table width="100%" cellpadding="10" cellspacing="2" class="web-table">
  5. <thead>
  6. <tr>
  7. <th>Title</th>
  8. <th>Id</th>
  9. <th>Created</th>
  10. <th>Web Template</th>
  11. </tr>
  12. </thead>
  13. <tbody>
  14. <tr ng-repeat="_web in Webs">
  15. <td>{{_web.Title}}</td>
  16. <td>{{_web.Id}}</td>
  17. <td>{{_web.Created | date:'medium'}}</td>
  18. <td>{{_web.WebTemplate}}</td>
  19. </tr>
  20. </tbody>
  21. </table>
  22. <p ng-hide="Webs.length">No websites</p>
  23. </div>
  24. </div>
Include Angular JS code
  1. <script type="text/javascript">
  3. var spApp= angular.module('spng-App', []);
  5. spApp.controller('spng-WebCtrl',function($scope)
  6. {
  7. //Add PnP JS code to retrieve web details
  8. });
  9. </script>

PnP JS Code

The following PnP method webs.get() used to retrieve the collection sub sites within a parent website.

Store the array of web objects to $scope angular directive as a property to it. And we must use the $scope.apply() to apply the changes after receiving the values from web response.

  1. $pnp.sp.web.webs.get().then(function(result){
  2. $scope.Webs = result;
  3. $scope.$apply();
  4. });
Full Sample Code

Insert the below code within Script Editor or Content Editor webpart.
  1. <!-- Required Scripts -->
  2. <script type="text/javascript" src="/siteassets/scripts/fetch.js"></script>
  3. <script type="text/javascript" src="/siteassets/scripts/promise.min.js"></script>
  4. <script type="text/javascript" src="/siteassets/scripts/pnp.min.js"></script>
  5. <script type="text/javascript" src="/siteassets/scripts/angular.min.js"></script>
  6. <!-- To style table in html -->
  7. <style type="text/css">
  8. .web-table th{ background-color:#ddd; border:2px solid #fff;}
  9. .web-table td{ background-color:#eee; border:2px solid #fff;}
  10. .web-heading{ padding:2px;}
  11. </style>
  12. <!-- HTML code with Angular directives -->
  13. <div ng-app="spng-App">
  14. <h2 class="web-heading">Sub Sites</h2>
  15. <div ng-controller="spng-WebCtrl">
  16. <table width="100%" cellpadding="10" cellspacing="2" class="web-table">
  17. <thead>
  18. <tr>
  19. <th>Title</th>
  20. <th>Id</th>
  21. <th>Created</th>
  22. <th>Web Template</th>
  23. </tr>
  24. </thead>
  25. <tbody>
  26. <tr ng-repeat="_web in Webs">
  27. <td>{{_web.Title}}</td>
  28. <td>{{_web.Id}}</td>
  29. <td>{{_web.Created | date:'medium'}}</td>
  30. <td>{{_web.WebTemplate}}</td>
  31. </tr>
  32. </tbody>
  33. </table>
  34. <p ng-hide="Webs.length">No websites</p>
  35. </div>
  36. </div>
  37. <!-- PnP JS code with Angular JS -->
  38. <script type="text/javascript">
  39. var spApp = angular.module('spng-App', []);
  41. spApp.controller('spng-WebCtrl', function($scope, $http) {
  42. $pnp.sp.web.webs.get().then(function(result) {
  43. $scope.Webs = result;
  44. $scope.$apply();
  45. });
  46. });
  47. </script>
Output

Output