Building SharePoint Apps as Single Page Apps with AngularJS

Learn how to implement a SharePoint-hosted App as a Single Page App (SPA) using the popular AngularJS presentation framework.
Course info
Rating
(266)
Level
Intermediate
Updated
Apr 25, 2014
Duration
3h 36m
Table of contents
Course Introduction and Overview
Setting Up the SharePoint App Project for a SPA
Building SharePoint Hosted Apps as a Single Page App
Incorporating Live Data Using Raw SharePoint REST API
Incorporating Live Data Using Breeze and the SharePoint REST API
Incorporating SharePoint Services into the SPA
Description
Course info
Rating
(266)
Level
Intermediate
Updated
Apr 25, 2014
Duration
3h 36m
Description

Microsoft introduced a new app model in the SharePoint 2013 release, which is available both for on-premise 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.

About the author
About the author

Andrew is a full stack web dev who's received Microsoft's MVP award every year since 2005 with a focus on Office 365, Azure and SharePoint with .NET, Node.js, Angular... whatever!

More from the author
Office 365 APIs: Contacts
Intermediate
1h 47m
Apr 2, 2015
More courses by Andrew Connell
Section Introduction Transcripts
Section Introduction Transcripts

Course Introduction and Overview
Welcome to the course about building SharePoint-Hosted Apps as Single Page Apps or SPAs using the AngularJS Presentation Framework. My name is Andrew Connell and you can find me on my blog linked here on this slide, as well as on Twitter or other social media networks that are all linked from my blog. In this module, I'm going to give you an overview of the course and explain what we will build and what you can expect from this course. We will also take some time to discuss what a Single Page App is, what a SharePoint-Hosted App is, and why implementing a SharePoint-Hosted App as a Single Page App is one good option for developers to explore. Aside from this one module, the rest of the course will be primarily demonstration-centric with very little slides as we'll be taking concepts from many other Pluralsight courses and applying them to create a great user experience and application for our users.

Incorporating SharePoint Services into the SPA
Welcome to the course about building SharePoint-Hosted Apps as Single Page Apps, or SPAs, using the AngularJS Presentation Framework. My name is Andrew Connell, and you can find me on my blog linked here on this slide, as well as on Twitter and other social medial networks that are all linked from my blog. In this module, we're going to take the solution we finished building in the module that incorporated live data using the SharePoint REST API and Angular's HTTP and Resource Services, and we're going to add some additional capabilities to take advantage of the SharePoint Services, specifically, the Workflow Service using the client-side object model also known as the CSOM. Let me first take a moment and explain what I'm going to cover in this module. While I said in the opening of this module we're going to start with the same app that we finished in the module where we added live data using the different Angular Services that leveraged the SharePoint REST API, I guess that's not entirely true, because to save some time I've gone ahead and done a few more things to our starting project for this module, so my first task is to show you what I've added. Then, we're going to move on to creating a new service for our app. This service will be used to talk directly to the SharePoint Workflow Service, CSOM. I need this service so other things we build in this module don't have to understand the inner workings of how to interact with the Workflow CSOM. Next, I'm going to show you how to create a custom initiation form in a more SPA-friendly way from the templates that Microsoft currently provides us. And then, with this new functionality we will add in this module, at the end I'm going to spend a few minutes adding some cool user-interfaced elements to give the app a better experience so users have a better idea of what's going on with respect to the new Workflow. So, let's get started.