It took a bit longer to get this one published due to some last minute feedback I got from a few reviewers who saw a preview of it. Based on the feedback I added some disclaimer and prerequisite info to the first module. I do not try to teach you AngularJS in this course or every thing about building a SPA, rather I take the liberty of assuming you are versed in these areas and you just want to do how to do this in SharePoint. If you aren’t familiar with AngularJS, single page apps, Breeze or the SharePoint 2013 REST and CSOM API’s I provide links to numerous courses in the Pluralsight catalog you can use to get up to speed.
Microsoft introduced a new app model in the SharePoint 2013 release which is available both for on-premises deployments and in the hosted service Office 365. One type of SharePoint app developers can build is a SharePoint Hosted application where everything is stored in SharePoint but the app actually runs within the user’s browser. These types of SharePoint apps can be built as single page applications for a very fast, fluid and pleasant experience for your users. This course will show you how to create a SharePoint hosted app as a single page application by working through an example scenario.
The goal of this course is to help SharePoint developers learn how to create Single Page Apps (SPA’s) as SharePoint-Hosted Apps using popular libraries like AngularJS and Breeze. There is no specific customer focus… everything I show you works both in an on-premises deployment as well as a hosted environment such as Office 365.
Module 1: Course Introduction and Overview
Before diving into the meat of the course, in this module we will first define what a SharePoint Hosted App and a Single Page App is. You will learn the benefits of each and why you should consider them for your next application in SharePoint. In this module we will also explore the solution that will be built throughout this demo-focused course and provide some additional resources you can rely on to get more information on the technologies and topics discussed in this course.
Module 2: Setting up the SharePoint App Project for a SPA
Before we can start building a Single Page Application (SPA) within a SharePoint-Hosted App, there are a few things we need to do to set up our project. In this module we will see what we add and change within a typical SharePoint-Hosted App to get it ready to build out the SPA using the popular AngularJS presentation framework.
Module 3: Building SharePoint Hosted Apps as a Single Page App
With the starting point for our single page app built out within a SharePoint-Hosted App, now we can start to put some structure around what we want to build. In this module we are going to make the app more dynamic and functional as well as cleaning up how the navigation works. For now only sample static data will be used as a later module will incorporate using the live data form our SharePoint lists.
Module 4: Incorporating Live Data using Raw SharePoint REST API
After creating the structure of the SharePoint-Hosted App as a Single Page App (SPA) with static dummy data, it is now time to bring the app to life! In this module we will extend the app to read and write to our SharePoint lists using the SharePoint REST API via the Angular $http and $resource services.
Module 5: Incorporating Live Data using Breeze and the SharePoint REST API
In the previous module you learned how to incorporate live data from the SharePoint lists using the Angular $http and $resource services to read and write to the SharePoint REST API. In this module we’ll look at another data access option: using the BreezeJS library! You can think of Breeze like Microsoft’s Entity Framework, but all on the client! In this module we will leverage the client-side cache, validation and a much more streamlined data context compared to the pure Angular version.
Module 6: Incorporating SharePoint Services into the SPA
A this point we have a working SharePoint-Hosted App that has been built as a Single Page App. This app leverages the SharePoint 2013 REST API to pull data back from the SharePoint server. As most SharePoint developers are aware though, the SharePoint REST API is just one client accessible endpoint. In this module we will look at how you can extend the app to leverage the Client Side Object Model (CSOM) to take advantage of SharePoint services not exposed through the REST API.