Provider Hosted MVC App With AngularJS In SharePoint - Part 3

This article is continuation of Part-1 & Part-2.

• Provider Hosted MVC App With AngularJS in Sharepoint - Part 1
• Provider Hosted MVC App With AngularJS in SharePoint - Part 2

Let's start with Provider Hosted MVC App with AngularJS - Part 3. In this part we are going to create dynamic TileView using CSS and AngularJS.

SharePoint HostWeb List Structure

The following is a list structure which we are referencing for our application.



Figure 1: App

We are going to create the following UI Design and final output format.

UI Change

In top navigation bar new option added to show tileview i.e. TileView.



Figure 2: Tile

Output



Figure 3: output

Solution Changes in term of new controller, view , javascript and CSS files.



Figure 4: Solution

Let's start with service layer coding to fetch list data.

Step 1: Session Management in AngularJS

When we navigate from one page to another page, we need ' hostweburl ' & ' appweburl ' URL values to access SharePoint site data, so we need to save those values in session to access on another page.

There are two ways to save data in session - sessionStorage & localStorage.

app-data-service.js

New service layer method to get SharePoint List data in order to create TileView.

app-tile-controller.js