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.
What you'll learn
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.
Table of contents
- Introduction 2m
- DEMO: Examine the Starting Project 5m
- DEMO: Adding 3rd Party References 2m
- DEMO: Adding Core AngularJS Components 2m
- DEMO: Adding SPA Configuration Components 4m
- DEMO: Adding SPA Routing Components 2m
- DEMO: Adding SPA Common Components 2m
- DEMO: Adding SPA Logger Components 7m
- DEMO: Updating the SharePoint-Hosted App UX 4m
- DEMO: Converting SharePoint App Chrome to AngularJS Controller 4m
- DEMO: Adding the App Shell 5m
- DEMO: Adding View and Controller Placeholders 2m
- Summary and Recap 2m
- Introduction 2m
- DEMO: Examining the App URL 4m
- DEMO: Create App Launcher 3m
- DEMO: Adding Cookie Read-Write Support to the App 2m
- DEMO: Create the SharePoint Context AngularJS Service 4m
- DEMO: Testing the App Launcher and Fixup Paths 4m
- DEMO: Implement a Default Route for an App Dashboard 1m
- DEMO: Implement Dynamic Navigation in the Quick Launch 5m
- DEMO: Adding Busy Notification (aka: Working on It) 3m
- DEMO: Refactoring the Header for Dynamic Breadcrumbs 1m
- DEMO: Implementing Learning Path List with Sample Data 4m
- DEMO: Implementing Learning Path Detail with Sample Data 1m
- DEMO: Add Animations for a Better User Experience 1m
- Summary and Recap 2m
- Introduction 3m
- DEMO: Introduce New Models to the App 2m
- DEMO: Adding a Data Context to the App 2m
- DEMO: Use AngularJS' $http Service to Get Learning Paths 3m
- DEMO: Add AngularJS' $resource REST-friendly Service 2m
- DEMO: Use $resource Service to Get One Learning Path 4m
- DEMO: Dealing with SharePoint's Form Validation Requirement 4m
- DEMO: Updating Learning Paths with $resource 4m
- DEMO: Deleting Learning Paths with $resource 2m
- DEMO: Creating Learning Paths with $resource 4m
- DEMO: Incorporating Live Data into Learning Items 3m
- Summary and Recap 2m
- Course Overview 3m
- Why Breeze? An Overview 5m
- DEMO: Add Breeze NuGet Packages 2m
- DEMO: Swamp Data Contexts from Angular to Breeze 2m
- DEMO: Configure Breeze for SharePoint's RESTA API 3m
- DEMO: Define SharePoint's Metadata for Breeze's MetadataStore 5m
- DEMO: Using Breeze to Get Many and One Entity 7m
- DEMO: Using Breeze to Update Items 4m
- DEMO: Using Breeze to Create Items 2m
- DEMO: Using Breeze to Delete Items 2m
- DEMO: Addressing Relational Lists 6m
- DEMO: Adding Client-Side Data Validations with Breeze 3m
- Summary and Recap 4m
About the author
Andrew Connell is a full stack web developer with a focus on Microsoft Azure and Office 365, specifically the Office 365 APIs, SharePoint Server, Microsoft Azure, Microsoft's .NET Framework, Angular, and Node.js that enjoys development, writing and teaching. Andrew has received Microsoft’s Most Valuable Professional (MVP) award every year since 2005 and has contributed to numerous books, articles, and projects over the years. Andrew is a frequent presenter at numerous conferences around the g... more