Developing with the SharePoint Framework and AngularJS

This course teaches the basics of crafting web parts which allow you to customize the appearance of your SharePoint websites. You will scaffold the web part with Yeoman, create a user interface, and deploy to SharePoint.
Course info
Level
Intermediate
Updated
Mar 23, 2018
Duration
2h 49m
Table of contents
Description
Course info
Level
Intermediate
Updated
Mar 23, 2018
Duration
2h 49m
Description

While SharePoint comes with a large number of features out-of-the-box, its real strength comes from the ability to customize it to work however you need it to. In this course, Developing with the SharePoint Framework and AngularJS, you will learn to customize SharePoint by writing web parts for your sites using the SharePoint Framework and AngularJS. First, you will learn how to scaffold the web part. Then, you will see how to use a variety of methods for manipulating your data in SharePoint through the web part. Finally, you will deploy the web part to SharePoint. By the end of the course, you will have a good understanding of what it takes to create and deploy a custom SharePoint Framework web part.

About the author
About the author

Joe is a software developer, author and public speaker. His primary field of expertise is in custom software development focusing on SharePoint applications.

More from the author
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hello everyone. My name is Joe Jorden, and I'd like to warmly welcome you to my course, Developing with the SharePoint Framework and AngularJS. I'm a senior software engineer at Harkins Theatres, and I've been working with SharePoint since version 2007. One of SharePoint's greatest strengths is the ability to customize it to work how you need it to work. And one of the newest ways to customize SharePoint is by creating web parts using the SharePoint Framework. This course is specifically designed to help you learn how to create and deploy custom web parts using the SharePoint Framework with AngularJS. Some of the major topics that we'll cover include scaffolding the web part using Yeoman, debugging your new web part using Visual Studio Code and Chrome, creating the UI and attaching it to the web part, adding, updating, deleting, and reading data from lists in SharePoint, and deploying the web part to production when it's ready. By the end of the course, you'll know how to create, debug, and deploy a custom web part for your users to incorporate in their sites. From here, you can continue your learning by diving in to other course on AngularJS and the SharePoint Framework. I hope you'll join me on this adventure to learn how to create custom web parts, with the Developing with SharePoint Framework and AngularJS course, here at Pluralsight.

Configuring SharePoint
Hi. This is Joe Jorden, and I'm a Senior SharePoint Consultant. Today I'd like to talk to you about how to develop web parts using the SharePoint Framework and AngularJS. Now I've been working with SharePoint since it was version 2007, and I've been working with AngularJS for a few years now, so I'm really excited to show you how to use these new technologies in writing modern web parts for your own environment. So let's take a look at what we're going to be creating in the coming modules. We'll be working with a medium-sized company called Globomantics, and they hold regular events throughout the year, town hall events, lunch and learn, custom training courses, things of that nature. And they need to be able to keep track of not just the event, but the people who attend those events, and they need to be able to do reporting on them separately. So, we're going to keep attendees separate from the events so that they can use their custom reports later on. The big important thing that we're going to be doing to help Globomantics out is create a front end to surface that data using the SharePoint Framework and AngularJS. So I'm looking forward to getting underway, and I hope you are too. So that being said, welcome to the course, and let's get started.

Preparing VS Code for Debugging
Hi, this is Joe Jorden, Senior SharePoint Consultant. Welcome back to our course on Developing with the SharePoint Framework and AngularJS. In this module, we're going to talk about preparing Visual Studio Code for debugging. A brief overview of what we're going to be getting into specifically is first we'll have an overview of the initial setup and find out what we need to do. Then we'll actually run the initial setup using Yeoman to scaffold our web part for us. Then we'll get an overview of the debugging components that come along with that scaffolded web part, and then we're going to install and configure a few more debugging components that will be necessary to help you debug along your journey. So that being said, welcome to the course, and let's get started.

Developing the Create Methods
Hi. This is Joe Jorden, Senior SharePoint Consultant, and I'd like to welcome you back to Developing for the SharePoint Framework with AngularJS. In this module, we're going to be talking about developing the create methods. And just a quick overview of what we'll cover here. First we'll look at writing the create method for events, then we'll look at writing the create methods for attendees. There's going to be two methods, one in each data service, the test data service and the production data service. And there is one other small detail I want to point out. You'll notice up at the top in the center of this slide we've got an icon, that icon is because the next three or four modules look almost identical, and I just wanted a way for you to visually tell which module you're in at the time. So with that, it is time to get started creating our event methods.

Developing the Read Methods
Hi. This is Joe Jorden, Senior SharePoint Consultant, and I'd like to welcome you back to Developing for the SharePoint Framework with AngularJS. In this module, we'll talk about developing the methods that allow us to read our data. Just a quick overview of what we'll be getting into. This first we'll write the methods that allow us to read events in both test and production data services. Then we'll look at writing the methods that allow us to read attendees, again both in test and production. And after each one of these, I'll also show you how to add them to the home controller so that we can then show that data in our UI. So, let's move forward with writing the methods that allow us to read events first.

Developing the Update Methods
Hi. This is Joe Jorden, Senior SharePoint Consultant, and I'd like to welcome you back to Developing with the SharePoint Framework and AngularJS. In this module, we'll talk about writing the methods to update our data. Just a quick overview of what we'll be getting into. First, I'll show you how to write the methods for updating events in both test and production. Then I'll show you how to write the methods for updating attendees, again both in test and production, and after that I will show you how to tie these into the home controller so that we can show our data in the UI. So with that, welcome to the module, and let's get started with updating events.

Developing the Delete Methods
Hi. This is Joe Jorden, Senior SharePoint Consultant, and I'd like to welcome you back to Developing with the SharePoint Framework and AngularJS. In this module, we'll talk about developing the methods for deleting data. So a quick overview of what we're going to be getting into. First, I'll show you how to write the delete methods for events, in both test and production of course. Then I'll show you how to write the methods to delete attendees in both test and production, and as usual, I will show you how to tie those into the home controller so that we can update our data in the UI. Then one last thing that we'll get into since we'll have everything covered by the end of this module, I'll show you how to do some testing and verify that everything we did in these last few modules actually works. So, let's move forward and I will show you how to delete events.

Deploying the Web Part
Hi. This is Joe Jorden, Senior SharePoint Consultant. I would like to welcome you back to this final module of Developing for the SharePoint Framework with AngularJS. In this module, we'll be talking about deploying the web part to production. So just a quick overview of what we'll get in to. First, I'll give you an overview of the solution manifest so you can see the various parts that go into making that up. Then I'll show you how to enable the Office 365 CDN, because as of version 1. 4 we can upload various assets to a Content Delivery Network. Next I'll show you how to package the solution. And finally, I'll show you how to deploy the solution. So, let's get started with an overview of the solution manifest.