Microsoft 365 Community PnP Webcasts, 21 Aug 2016

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PnP Webcast - Integrating Angular v1.x to SharePoint Framework client side web part

Description

In this PnP Web Cast we concentrated on how to start using Angular 1.x with SharePoint Framework client-side web parts. Web cast concentrates on a demo where we start from clean client-side web part project and apply the steps to be able to start using Angular 1.x in the implementation. Process is pretty similar regardless of the JavaScript framework which you are using.

Notice. When this web cast was released SharePoint Framework were not yet available in Office 365 tenants. This recording was done using internal preview release of SharePoint Framework, so some details might be slightly changed by the time when SP Framework is released for first release tenants (summer 2016).

Presentation covers following topics:
- High level steps on using Angular 1.x with SP Fx client side web parts
- Summary on used commands and operations done in demo
Web cast demo shows following details

- Adding Angular to your SP Fx project using npm package manager
- Installing Angular typings for SP Fx project for getting intelligence while developing
- Using Angular in client side web part

Web cast presenters: Waldek Mastykarz, Vesa Juvonen

Presentation used in this web cast is available from http://docs.com/OfficeDevPnP.

Additional resources:
See following resources around the upcoming SharePoint Framework. We'll release more detailed documentation and step-by-step guidance when SharePoint Framework will be released for preview in first release tenants. This will happen during summer 2016.

- Open and Connected Framework - The SharePoint Framework - YouTube - https://www.youtube.com/watch?v=T_bGyqKwT4g
- PnP Webcast - Getting started with web stack in SharePoint Development - http://dev.office.com/blogs/getting-started-with-web-stack-in-sharepoint-development
- PnP Webcast - Getting started with SharePoint Framework - http://dev.office.com/blogs/getting-started-with-sharepoint-framework
- PnP Webcast - Preparing for SharePoint Framework - What should I learn? - http://dev.office.com/blogs/preparing-for-sharepoint-framework-what-should-i-learn
- PnP Webcast - Converting existing JavaScript apps to SharePoint Framework - https://channel9.msdn.com/blogs/OfficeDevPnP/PnP-Web-Cast-Converting-existing-JS-apps-to-SharePoint-Framework

Thanks for your interest on the PnP initiative - http://aka.ms/SharePointPnP

If you have any feedback or comments related on this web cast, please use the Office 365 Developer network at http://network.office.com for your input. Thx for your interest advance.

A

Welcome everybody, this is to shape on Paterson practices, webcast also known as the office traces to five developer patterns and practices of webcast. So this time, what we wanted to do is show you how you can integrate a external javascript frameworks due to upcoming sharepoint for client-side web parts, which are part of the sharepoint framework which is going to be released slightly later this august slightly depending on. When are you watching this webcast, the developer preview or the shipment framework might be available or might not be available?

A

But for those who are watching this before it's available, we wanted to do a kind of an introduction session to show you how to get started. So you don't know that this is not difficult and there's no additional magic or super difficult steps to use whatever framework within your client-side web parts with me. Well, my name is Josiah Vernon I'm senior program manager in office. Well, SharePoint engineering, just to be precise and with me today, is waldek waldek. Do we want to do a quick, intro, yeah.

B

Sure hi everybody, my name, is I work as a senior developer at rancor. I am office, development MVP and this time around I will be your JavaScript wizard. Yes,.

A

Indeed, so, let's actually get started on the on the material and this time- and this probably won't be super long, because we wanted to really concentrate on on how to get started on things within the client-side web part development or in the creating the frameworks to the client-side web part development. Before we go there, just a reminder for the people, the sharepoint patterns and practices and this exists and will exist in the future as well, so the sharepoint patterson practice.

A

This ownership is in the sharepoint engineering and we're gonna use the sharepoint, B&B or office staff PMP, either way we want to actually mention that both brands are fine as the main tool for providing samples and guidance in the future as well. So what we want to do within the sharepoint engineering is to to kind of go away from the current situation, where we have sharepoint guidance, and then we have two sharepoint B&B guidance.

A

We we'll only have BNP and the BNP will be the the channel to explain how the framework works and also how the a shipment that ends work and all of that stuff. So a kms office, def PMP, or actually it's a kms or a shipment PMP. You learn to our introduction page where you will find a lot of resources to in production technologies and also for the upcoming shipment framework good, let's actually move into the actual topic of the Tay.

A

So we kind of wanted to concentrate on a really really simplistic example: how we integrate angular 1.0 1.2, the shape and framework webparts, and this is really a simple thing. Whenever you actually have the client-side web part created, you'll obviously need to install the angular to be available within that project. We're going to show the commands and and all of that slightly later we're gonna install the Taipings to your project as well.

A

So when you're using a develop and when you are developing, the typescript you'll have the intelligence and all of that working properly within your development environment and then the actual usage of the of the angular is relatively simple. When it's installed to the project, you'll just import, the angular within your web part file or web part definition and start using that, together with the framework or adding the angular directly on the on the rendering of the framework, anything I want up there actually Baltic, it's quite simple stuff.

B

Exactly that yeah.

A

It's simple, but it's also a good thing to actually show how to get started, and that was really the reason why I wanted to do this webcast so that you, the people who are watching these videos, don't feel like there's a significant amount of stuff which I need to learn. Well precisely, if you're, an angular developer, we'll just hook in during or directly to the client side with parts and then you're able to start using the angular in your way, however, you actually did development.

A

We're not gonna actually spend too much time on the slides today. So waldek is gonna. Do the the demo on how to actually do that in practice? For some of you, this might be really super easy stuff. You already familiar with the NPM, the Taipings, and all of that for some of you. This might be a new thing and you're moving into this web stack development, so I think for my demo perspective I, think, that's! That's it I've welded! Take it away.

B

Alright, so in this demo, we'll show you how to include angular in your SharePoint framework client-side web part. So what I have here is I created the millah SharePoint framework, okay with a client-side web part without any framework, and just to start, let's see that that actually works. So we do that by calling golf serve task and that will open the browser that will actually build the project. Bundled object, start the browser and we'll be able to see that the web part actually works.

B

So here is our SharePoint workbench, to which we can add new web part that we have in project, and we can see that it works, and this.

A

Over now moved so this is just a a exactly like you mentioned. You just run through the generator to create the web part. You haven't actually done anything any modifications on it yet. So this is what you get from the SharePoint framework generator for.

B

A

For free, yes, indeed, so.

B

For now, let's close this: let's stop it and the first thing that we will do is we will install angular. So we do that by calling NPM I for install angular and then capital S, so that will save the reference to angular in our package, so Jason with which, whenever you get the portrait from source control and you do NPM install NPM will know that this project depends on angular and it should install it too. Otherwise, if you were trying to do build it, you would get an error saying that you, you miss angular.

B

So another thing that we have to do before we start developing code is that we work in her point framework with typescript, whatever you want to do that whenever you work with typescript the one thing that you need for every framer that you install are typed pipings. Obviously you could escape them, but actually the whole point with typescript is that it helps you write good code and it helps you ensure the development time that you're not doing anything that you are not not allowed to.

B

So we do that by calling another command which is TSD install than angular, and then s so here we use a hurricane case s and once again we want to store the reference to our I brings in projects. So whenever someone gets, the project from source control, NPM and PSD will know that there are additional things that that they should include and.

A

One thing to kind of a mention over in here I think it's it's kind of a understandable, but we'll run these in the folder structure. So, when you're running in the comment command lines, you have to be within that project folder, where the actual development will happen. Obviously that's pretty pretty understandable, but just making sure that we cover that sure.

B

And with that ready to jump in your code, so let me start visuals with your code, which is my editor of choice, but you can do that with webstorm on Windows with Visual Studio, anything you want, it works everywhere. Exactly the same way. Let me increase the font size so that you can see the code more easily, and here we go to our source, folder webparts, where actually the web part is, and from here we get the hello angular webparts, yes, which is where is there code of our apart?

B

So the first thing that we need to do in the code is to actually make use of angular. We do it, but typing import after is from I, don't want to update empty now as angular angular from angular, but that way we import angular into the web part. The web part now knows that it can use angular and it should grab it from the NPM package that we installed first next.

B

Well, we actually can do now already is to build the the D angular app. So we do it. Let's just build a really simple one, which you would never ever build in production, but it's more to show you how easily you can get you. You can hook angular within the SharePoint framework client-side part. So here, let's just create a really simple web part or angular app. We call it hello, angular app. We have no dependencies and in there allegis create controller, and here you can see how do we already get intelligence right?

B

We get intellisense because of the Taipings that we installed for it right. So here, let's call this controller, hello, angular and hearing we will pass a function.

B

We will pass the scope that we will use to actually attach variables and here to our scope, ledges add one as such, and here you can see that if I wanted to do this, I will get error right because there is no property on a scope called message, and that is actually what I script does it protects you from trying to do stuff that aren't there? If you know angular, you actually know that you can attach any properties to scope and it will be available within template.

B

But in order to do that in typescript, we have to say scope as any, so that we can allow ourselves to do that and with that you can see that the error is gone and that we can now say here, hello from angular, so that basically completes our app. Let's change the template a bit. Let's remove all of that. You won't be needing this, and here let's say that this div should use our controller, which is called angular and the last part left is for us to say angular bootstrap, which will actually start our app.

B

So here we say this dumb element, which is where our div is, and then we will pass array of strings, calling the app that we want to the modules that we want to bootstrap, which is hello and angular app and, as you can see, the element that we pass here is exactly the element where we have our depth right, and the one thing that you might know about angular is that you should call angular bootstrap only once the thing about the render function is is that it's being called every single time?

B

You change property of the web part. So it could be that it's called once, but if someone would go and edit the web part, it could be fired twice, five times or more, and that would actually make angular break. So in order for us to prevent that, we can make use of the really cool tool that we have available here to our.

B

That we have available say if this rendered once it's false, then bootstrap angular. So what this does is that the first time, though in the web part world and there, this property will be equal to false and then what once it's done, it will be set to true. So that way we can distinguish whether we are rendering initially or not, and that.

A

Property the render at once is part of the framework, isn't it so it's coming as a base class definition. Yes,.

B

It is a property that comes from the base class from which our web part inherits yeah. So with that, we should be good to go and to check that things were, let's just go back to our terminal and say gob surf and that will once again build project. Compile trans palette package bumble it.

B

It will start the the browser with sharepoint workbench and where we can add the web part, and we won't see anything right, I see, I forgot one thing: we included the message here in the scope, but we actually don't use it in template. So what we can do here is, let you say, a really easily message, because that's the name of our property that we added in a scope. Let me just save it and now, if I go back to work bench, just wait a minute, wait a minute I'm not doing anything.

B

The word bench actually detected that I changed stuff in code and it will once again rebuild prop rebuild my code, repack extra bundle and refresh the workbench all by itself. So whenever you, you are developing web parts, you can really efficiently do that, because the process that runs the world branch in dubs a ground checks whether there is any change in a code and if there is it will refresh the work for you all by itself.

B

So with that that that's it, you have just seen how easily you can include angular in client-side web parts, build on SharePoint framework and that's.

A

Actually crazy Monda on the auto refresh as well, because you really see the value out of the out of the workbench as well.

B

A

Cool I think that's it. Let's actually go back on the slides and close up the webcast. Thank you for this one Wallach sure.

B

A

Thanks well back for that, one really good, quick demo on how to get started and how to integrate the angular to the SharePoint framework client-side web parts. So what you saw in the in the world X demo is that this is really kind of a four steps process and these are actual commands and what well that actually executes it there. So just making sure we work them true, so you understand, what's actually happening.

A

So in the common point, when we execute at the NPM I angular s, what it means is that we are installing the angular NPM packages from the internet, so we're pulling down to bed the angular dependence is tomorrow our approach and that's the I as an install angler and then there's the S after there, which essentially means that we have will add a definition in the package.json, and that means that whenever, if somebody is pulling down this project, for example, from a github and runs an NPM install, it will know that there's a dependence in angular and all of that stuff will be installed on that project automatically.

A

Then we execute a TST install angular angular so and this will add the Taipings, so you will have intelligence in the individual studio code or whatever is your development platform.

A

Then we moved into the actual client-side web part, the actual TS file, which is the visible part of the of the project for end-users, and we added that import layer so that we can use the angular inside of the of the client-side web part and then in the render methods we essentially hook in the angular application directly in the the render rendering process. So at that point you can then concentrate on actually implementing the actual angular application in angular.

A

In this case, although there's there's quite a few additional things to consider that, for example, how we would let's say pipe as property, pane values of configuration, values from a client-side web parts to the Amarok application, but we're gonna do another webcast or a video on that one slightly later, which will then demonstrate this. Additional rotating quotes advanced scenarios, but this is relate. This is pretty easy to get started and getting the angular to work together with coincide with a framework. A client-side web parts in a SharePoint framework anything we run out there robic now.

B

As you've seen, it's really easy to include angular in building client-side parts and I really encourage you to as.

B

The same work is available to give it a try and if you've built angular stuff the past just to try to use angular with client-side networks as well. Yeah.

A

And I'm thinking about the other frameworks, JavaScript framework, we used angular as an example right now using a react or using a knockout or muchness or whatever is pretty much the same story. Obviously, the step number four is slightly different, so how do I actually hook into that particular framework to my client side web part, because this angular bootstrap command is specific for angular, not for anything else. Yeah.

B

And I would say that also steps, one two and three are different as well.

A

Yes from a exact perspective, but you will still install that third-party framework using the NPM I, you will still install the dsds and the Taipings for it and then you'll do the import to that particular framework. Whatever it was that the angular part will be changing in their comments. Yeah point fair point: sighs you are so precise about that.

A

Can so precise, so I think that's it for this one, relatively short, I wanted to keep it short as well, just to show you that it's not super complex to get started, and then you can start doing this and start learning more. Please use the the PM pay channels for asking questions. You'll do the office to go to the office 365 Network, the new one, the network office.com, and ask questions if you have anything related on the webcast as well and I, think that's it Thank You waldek nice quickly.

A

Welcome and we'll do another one of these sooner.

B

A

So thank you for watching see.

B