by ·Comments Off on Building Single Page Applications (SPA) with AngularJS and SharePoint 2013 – Part III

Page copy protected against web site content infringement by Copyscape

In Part 1 , and Part 2 of the series, we walked through setting up of project and App.js respectively. In this concluding post, we will look at how the html files are coded.

First, the customer.html file – Pretty straightforward
<H2> Customer Information </H2>
        <table>
            <tr>
                <th>Customer ID</th>
                <th>Customer Name</th>
                <th>Customer Address</th>
                <th>Customer State</th>
                <th>Customer Country</th>
            </tr>
            <tr ng-repeat=”customer in customers”>
                <td><a href=”#/{{customer.CustomerID1}}”>{{customer.CustomerID1}}</a></td>
                <td>{{customer.CustomerName}}</td>
                <td>{{customer.CustomerAddress}}</td>
                <td>{{customer.CustomerState}}</td>
                <td>{{customer.CustomerCountry}}</td>
            </tr>
        </table>
Look at the ng-repeat directive. This is what does all the magic here. Recollect, in Part 2 , we coded something like this,
$scope.customers = data.d.results;
$scope is the execution context for expressions. $scope is the glue between application controller and the view. In our case, the view is the HTML file, we already defined the controller, now it is a matter of connecting them together via the $scope variable.
As you would guessed, the orders.html is also simple:
<h2>Orders Page</h2>
    <table>
            <tr>
                <th>Order ID</th>
                <th>Order Name</th>
                <th>Order Date</th>
                <th>Order Ship Country</th>
            </tr>
            <tr ng-repeat=”ord in orders”>
                <td> {{ord.OrderID}}</td>
                <td>{{ord.OrderName}}</td>
                <td>{{ord.OrderDate | date : format}}</td>
                <td>{{ord.OrderShipCountry}}</td>     
            </tr>
        </table>
 
You can always add in the customer name as the header so it makes sense to list the customer and the orders. That is for you to try out since it is very straightforward 🙂
Once you are done with all this, build your project, and deploy it from Visual studio. You deploy the apps to the apps site collection and you can launch it by clicking on the app name
Happy Coding!!!

by ·Comments Off on Building Single Page Applications (SPA) with AngularJS and SharePoint 2013 – Part II

Page copy protected against web site content infringement by Copyscape

In Part 1 of the series, we walked through the initial steps of setting up the project and adding all related files. Now, let us focus on the App.js file (remember this is just for demo purpose, you would never want to put all your controller code in one single file, separate them based on the controllers)

You first define the app that was declared in default/
‘use strict’;
var customerApp = angular.module(‘CustomerApplication‘, [‘ngRoute’]);
Now, let us work on the customer Controller
customerApp.controller(‘CustomerListCtrl’, function ($scope, $http) {
    $http({ headers: { “Accept”: “application/json; odata=verbose” }, method: ‘GET’, url: “http://tksp15:90/_api/web/lists/getByTitle(‘Customers’)/items?$select=CustomerID1,CustomerName,CustomerAddress,CustomerState,CustomerCountry” })
    .success(function (data) {
        $scope.customers = data.d.results;
    });
    console.log(“Customer Controller…”);
});

You will have to get a json back and so you set that using the $http service and relevant header.
Notice the REST API call — I am querying from customers list and getting few columns out of the list. Note that in the real world, you will also pass in authentication parameters to validate the user.
Now, Orders controller
customerApp.controller(‘OrderCtrl’, function ($scope, $routeParams, $http) {
    $scope.custID = $routeParams.customerID
    $http({ headers: { “Accept”: “application/json; odata=verbose” }, method: ‘GET’, url: “http://tksp15:90/_api/web/lists/getByTitle(‘Orders’)/items?$filter=CustomerID1 eq ” + $scope.custID + “&$select=OrderID,OrderName,OrderDate,OrderShipCountry” })
  .success(function (data) {
      $scope.orders = data.d.results;
  });
    console.log(“Order Controller…”);
});

You will notice in the REST API call, that I am passing in the CustomerID1 as a parameter. This is what filters the Orders list and pulls only Order information for that Customer.
Now that we have our controllers, how do we ensure that the routing happens.  Here is the code
customerApp.config(function ($routeProvider) {
    $routeProvider.
      when(‘/’, {
          templateUrl: ‘Templates/customer.html’,
          controller: ‘CustomerListCtrl’
      }).
      when(‘/:customerID’, {
          templateUrl: ‘Templates/orders.html’,
          controller: ‘OrderCtrl’
      }).
      otherwise({
          redirectTo: ‘/’
      });
});
Recollect, that in Part 1, we created the html files. Review how these html files are referenced here. If you are familiar with MVC concepts, this should be no brainer. My definition of AngularJS is bringing MVC to the Javascript world. Concepts are pretty much the same. angular-route.js is the brain behind this routing mechanism.
In the next part, let us write up the HTML files and wrap up the series..

by ·Comments Off on Building Single Page Applications (SPA) with AngularJS and SharePoint 2013 – Part I

Page copy protected against web site content infringement by Copyscape

This is Part 1 of Building Single Page Applications (SPA) with AngularJS ad SharePoint 2013. We will stick with the main moving parts of building SPA with SP 2013 and AngularJS. Assumption here is that you have played a little with AngularJS before.

So, we will build a SharePoint Hosted Apps that will display customer and their order information. This is what the final output looks like
Customer Information:
So, when you click on the CustomerID, it will take you to the Order screen without any refresh following the model of SPA. The snipped screen shot below shows Orders for CustomerID 1

There are plenty of resources to read upon SPA and how it works. So, let us stick with SharePoint and AngularJS.
Here are the high level steps:
1) Create a SharePoint Hosted Apps. 
2) Add the angularjs files to your Scripts folder.
3) Add these script tags to your default/ page
    <script type=”text/javascript” src=”../Scripts/jquery-1.8.2.min.js”></script>
    <script type=”text/javascript” src=”../Scripts/angular.js”></script>
     <script type=”text/javascript” src=”../Scripts/angular-route.js”></script>
angular.js is the core AngularJS file  and angular-route is using for routing between pages.
4) Verify a script file App.js exists under Scripts folder. If not, create one. This is where all our angularJS scripting will take place. In real world, I would recommend that you split script files based on the number of controllers you have.
5) Under Pages folder, create a folder named Templates, and create 2 blank html files. customer.html and orders.html. This is where the angular ng-repeat commands go in.
6) Next, on the default/, add these lines, 

<div ng-app=”CustomerApplication” ng-view>
        <div style=”text-align: center;”>

<img src=”../images/ajax_loader.gif” alt=”Loading…” title=”Loading..” style=”height: 50px;” />

        </div>
 </div>
As you can see, the above lines reference the ng-view and is pointed to the CustomerApplication angular APP.
In the next part, let us get into building the angularJS commands in App.js

by ·Comments Off on Consume SharePoint 2013 REST API using AngularJS

Page copy protected against web site content infringement by Copyscape

The code below shows you how to invoke a SharePoint 2013 REST API. Understand this code is listed just for you to understand how to invoke REST API. In the real world, you would want to separate the script file into its own .js file. Recommended practice is to have an individual file for each controller. Also, http service is asynchronous here, so should always have on success and on failure events.

 

I have a list called Customers in SP 2013, so the REST API call would look something like this:

http://webapp/_api/web/lists/getByTitle(‘Customers’)/items?$select=CustomerID1,CustomerName,CustomerAddress,CustomerState,CustomerCountry

Also, to note is that I am getting back the REST API output as JSON, with the following statement:  application/json; odata=verbose

If you examine JSON output from SP, the informatio you need resides within the details structure, so that is the reason you see that I am storing my customer data by accessing <dataoutputfromJSON>.d.details

 

Here is the complete HTML file to access SharePoint 2013 list via REST API using AngularJS

 

<html ng-app=”tkCustomerApp”>

 <head>

    <title>SharePoint REST API Call </title>

    <script src=”scripts/angular.js”></script>

 

    <script>

      var tkCustomerApp= angular.module(‘tkCustomerApp’, []);

      tkCustomerApp.controller(‘CustomerCtrl’, function ($scope, $http){

        $http({headers: { “Accept”: “application/json; odata=verbose” }, method: ‘GET’, url:”http://tksp15:90/_api/web/lists/getByTitle(‘Customers’)/items?$select=CustomerID1,CustomerName,CustomerAddress,CustomerState,CustomerCountry”})

.success(function(data) {

          $scope.customers = data.d.results;

        });

      });

    </script>

</head>

  <body ng-controller=”CustomerCtrl”>

 

   <div> Search:<input ng-model=”query” type=”text”/> </div>

   <br />

     <table>

      <tr>

        <th>Customer ID</th>

        <th>Customer Name</th>

<th>Customer Address</th>

<th>Customer State</th>

<th>Customer Country</th>

      </tr>

      <tr ng-repeat=”cust in customers | filter:query”>

        <td>{{cust.CustomerID1}}</td>

        <td>{{cust.CustomerName}}</td>

<td>{{cust.CustomerAddress}}</td>

<td>{{cust.CustomerState}}</td>

<td>{{cust.CustomerCountry}}</td>

      </tr>

    </table>

  </body>

</html>