Here we will explore pure Angular JS directives (without using jQuery or other frameworks) by accessing the SharePoint REST API. The example I have taken is accessing the folder and files from the library by the following two events:
So, we will make two requests to the server and render it in a page.

The following will apply a Folder collection to the Dropdown list.

HTML Snippet:
  1. <select id="lib-folder" ng-model="libFolders" ng-options=" fldr as fldr.Title for fldr in Folders" >
  2. <option value="">--Select Folder--</option>
  3. </select>
ng-options: This directive is an alternative to the ng-repeat directive. This is used to dynamically generate the list of <option> elements for the select element using the array “$scope.Folders” obtained as the result of the SharePoint REST API.

fldr.Title This is the retrieved folder name that is rendered as a value to the dynamically generated <option> element to the dropdown.

Note: If you have not used “<option value=””>--Select Folder--</option>” code, the empty option will be dynamically generated when populating the folders to the dropdown.

Script Snippet:
  1. $http({
  2. method: "GET", url:_spPageContextInfo.webAbsoluteUrl+"/_api/web/lists/getbytitle('DocumentLibrary')/items?$select=Id,Title ,FileDirRef,FileRef,FSObjType&$filter=FSObjType%20eq%201",
  3. headers: {"Accept":"application/json;odata=verbose"}
  4. }
  5. ).success(function(data, status, headers, config){
  6. $scope.Folders = data.d.results;
  7. $scope.libFolders = $scope.Folder[0];
  8. }).error(function (data, status, headers, config){
  9. });
_spPageContextInfo.webAbsoluteUrl :_spPageContextInfo is very useful when writing JavaScript code on the SP site. This has a webAbsoluteUrl property that returns the web URL that we use to generate the REST API request URL.

REST API URL: fetches the items with the values for the following fields filtered by folder from the “DocumentLibrary” library.
_spPageContextInfo.webAbsoluteUrl+"/_api/web/lists/getbytitle('DocumentLibrary')/items

View Fields:
  1. $select=Id,Title ,FileDirRef,FileRef,FSObjType


Filter:
  1. $filter=FSObjType%20eq%201
Returns the items, if the item type is 1 (folder).
  1. $scope.Folders = data.d.results
The successful response assigns the folder collection array to the scope variable $scope.Folders.
The ng-options directive uses this array variable and dynamically generates the options.
  1. $scope.libFolders = $scope.Folders[0]
Assign the first item of Folder collection array to the default value for dropdown.

Populate files based on the selected Folder:

Now we are done with the rendering of the folder list to the dropdown. To invoke the event to request the files for the selected folder, we have a button and the function “btnGetFiles()” as in the following:
<input type="button" value="Get Files" ng-click="btnGetFiles()"/>

HTML Snippet:
  1. <!-- Populate Files based on selected Folder -->
  2. <table width="100%" cellpadding="10" cellspacing="2" class="files-table">
  3. <thead>
  4. <tr>
  5. <th>Title</th>
  6. <th>Author</th>
  7. </tr>
  8. </thead>
  9. <tbody>
  10. <tr ng-repeat="file in Files">
  11. <td><a href="{{file.ServerRelativeUrl}}">{{file.Name}}</a></td>
  12. <td>{{file.Author.Title}}</td>
  13. </tr>
  14. </tbody>
  15. </table>
Script Snippet:
  1. $scope.btnGetFiles = function()
  2. {
  3. var selectedFolder = $scope.libFolders.FileRef+"/";
  4. var resturl = _spPageContextInfo.webAbsoluteUrl+"/_api/web/getfolderbyserverrelativeurl('"+selectedFolder+"')/files?$select=Name,Author/Title&$expand=Author/Title";
  5. $http(
  6. {
  7. method: "GET",
  8. url:resturl,
  9. headers: {"Accept":"application/json;odata=verbose"}
  10. }
  11. ).success(function(data, status, headers, config){
  12. $scope.Files = data.d.results;
  13. }).error(function (data, status, headers, config){
  14. });
  15. }
$scope.libFolders.FileRef : Returns the dropdown's selected value.

REST API URL

$expand: this option has the ability to retrieve the related properties. This is used to retrieve the author name using a single request instead of sending multiple requests.

$expand=Author/Title: file.Author.Title is to be added in HTML to retrieve the expanded value.

The successful result is stored in the scope variable “$scope.Files” and this is used in a table element to dynamically generate the rows because of the ng-repeat directive.

ng-show

If there is no files retrieved for the folder, use the ng-show directive with the condition to show the proper message as in the following:
<p ng-show="!Files.length">There are no files available under this folder.</p>

Here is the full code:
  1. <style type="text/css">
  2. .files-table th{ background-color:#ddd; border:2px solid #fff; text-align:left}
  3. .files-table td{ background-color:#eee; border:2px solid #fff;}
  4. .web-heading{ padding:2px;}
  5. </style>
  7. <script type="text/javascript" src="/siteassets/angular.min.js"></script>
  8. <div ng-app="spng-App">
  9. <h2 class="web-heading">Folder and Files</h2>
  10. <div ng-controller="spng-WebCtrl">
  11. <select id="lib-folder" ng-model="libFolders" ng-options="fldr as fldr.Title for fldr in Folders" >
  12. <option value="">--Select Folder--</option>
  13. </select>
  14. <input type="button" value="Get Files" ng-click="btnGetFiles()"/>
  15. <!-- Populate Files based on selected Folder -->
  16. <table width="100%" cellpadding="10" cellspacing="2" class="files-table">
  17. <thead>
  18. <tr>
  19. <th>Title</th>
  20. <th>Author</th>
  21. </tr>
  22. </thead>
  23. <tbody>
  24. <tr ng-repeat="file in Files">
  25. <td><a href="{{file.ServerRelativeUrl}}">{{file.Name}}</a></td>
  26. <td>{{file.Author.Title}}</td>
  27. </tr>
  28. </tbody>
  29. </table>
  30. <p ng-show="!Files.length">There are no files available under this folder.</p>
  31. </div>
  32. </div>
  1. <script type="text/javascript">
  2. var spApp= angular.module('spng-App', []);
  3. spApp.controller('spng-WebCtrl', function($scope, $http){
  5. //Controller load event to append the choices with folder value to the dropdown
  6. $http({
  7. method: "GET",
  8. url:_spPageContextInfo.webAbsoluteUrl+"/_api/web/lists/getbytitle('DocumentSetLibrary')/items?$select=Id,Title,FileLeafRef,FileDirRef,FileRef,FSObjType&$filter=FSObjType%20eq%201",
  9. headers: {"Accept":"application/json;odata=verbose"}
  10. }
  11. ).success(function(data, status, headers, config){
  12. //Store the folder collections to the Folders scope variable
  13. $scope.Folders = data.d.results;
  14. //Set the default value to the dropdown
  15. $scope.libFolders = $scope.DocumentSets[0];
  16. }).error(function (data, status, headers, config){
  17. });
  19. //Button click event to populate the files in table
  20. $scope.btnGetFiles = function(){
  21. //Get the selected folder from the select element
  22. var selectedFolder = $scope.libFolders.FileRef+"/";
  23. var resturl = _spPageContextInfo.webAbsoluteUrl+"/_api/web/getfolderbyserverrelativeurl('"+selectedFolder+"')/files?$select=Name,Author/Title&$expand=Author/Title";
  24. $http({
  25. method: "GET",
  26. url:resturl,
  27. headers: {"Accept":"application/json;odata=verbose"}
  28. }
  29. ).success(function(data, status, headers, config){
  30. //Store the filecollection for the folder to the Files scope variable
  31. $scope.Files = data.d.results;
  32. }).error(function (data, status, headers, config){
  33. });
  34. }
  35. });
  36. </script>
OUTPUT:



Still we have many options available in Angular JS and we will continue our exploration in this area. We will welcome the new technologies to ease the coding. Happy learning.