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..

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