Hi All.

So let's start with the requirements.

Requirement: Get all the list items and display them in a specific format. (Actually here we have multiple options to satisfy this requirement including a List Viewer web part or writing a simple script in JavaScript and showing the result in either a Content Editor web part or a Script Viewer web part. Since we need to explore AngularJS and MVC patterns using it we will go with the AngularJS option.)

We can use any type list, here I am using an OOB link list as in the following:



Figure 1: OOB Link List

Since this is my first article, I'll use only one JavaScript file for now and show the results in a Content Editor web part. In the next article I'll divide code into multiple files as in the MVC architecture.

For using AngularJS we need to include a reference to the AngularJS. Either we can use it directly from CDN or download and copy it into the _layouts folder or upload into the master pages gallery like display templates. For now, I have downloaded it and copied to the _layouts/15/AngularJSDemo folder.

The following is the snippet for displaying the data (in other words, View):

  1. <div ng-app="list-module">
  2. <div ng-controller="list-controller">
  3. <ul style="list-style-type:none;">
  4. 　　　　<li ng-repeat="item in listitems" style="align:left;>
  5. {{item.URL.Description}}{{item.URL.Url}}
  6. </li>
  7. </ul>
  8. </div>
  9. </div>
Here we are using the AngularJS directives, ng-app, ng-controller and ng-repeat. Here we will not go into those directives in depth. There are already some good articles on those. I have listed a few of those in the references section below.

The key point here is we are getting the list items in listitems and we are looping using ng-repeat and displaying those. Since we are using a link list, we are displaying the link URL and link description.

The next is a script for getting the list items using Rest APIs.
  1. <script src="_layouts/15/AngularJSDemo/angular.min.js"></script> //AngularJS reference
  2. <script type="text/javascript">
  3. var spApp= angular.module('list-module', []);
  4. spApp.controller('list-controller', function($scope, $http){
  5. $http({
  6. url: _spPageContextInfo.webAbsoluteUrl + "/_api/lists/getbytitle('Linkit')/items", //assuming web part is added on same site :)
  7. method: "GET",
  8. headers: { "Accept": "application/json;odata=verbose" }
  9. }).success(function (data) //got the result successfully
  10. {
  11. var dataResults = data.d.results; // List Items
  12. $scope.listitems = dataResults;
  13. })
  14. .error(function (data, status, headers, config) // got the error
  15. {
  16. alert("error"); //ToDo:Display proper error message/Stack Trace/ Status Code
  17. });
  18. });
Result: Just snap of content editor web part. Also please bear with the UI part.



Figure 2: Link our JavaScript file in CEWP

References:

AngularJS: https://angularjs.org/
https://docs.angularjs.org/misc/downloading
http://www.w3schools.com/angular/angular_directives.asp
$scope: https://docs.angularjs.org/guide/scope

REST APIs:

https://msdn.microsoft.com/en-us/library/office/jj860569.aspx
https://msdn.microsoft.com/en-us/library/office/fp142380.aspx
https://msdn.microsoft.com/en-us/magazine/dn198245.aspx
https://msdn.microsoft.com/en-us/library/office/jj164022.aspx

I'll write part 2 soon explaining the MVC pattern with AngularJS. Thanks! Your feedback, suggestions, comments and/or queries are always welcome.