Angular 2 : Documentation

So far I haven't seen any mention of Angular 2 in relationship to the SP Framework. ng2 is almost public release, so it's good to provide some guidance. I'll do my best to publish a blog post about this in the next week or so.

[patmill]

Yup - we were discussing the right way to cleanly integrate Angular an hour ago. The tricky thing is how the framework can help deal with the singleton nature of the Angular App. One webpart works no problem, but multiple webparts on a page get tricky. We hope to handle it similar to how we deal with React, where the framework understands that there really should be only one instance available. I created a placeholder here for where we will put our thoughts / info - https://github.com/SharePoint/sp-dev-docs/wiki/Working-with-Angular

Good stuff. It will work differently between ng1 and ng2 though.

I'm not familiar with React, but wouldn't a solution be:

• The SPFrameWork loads the root component, e.g. my-app. So there is one instance of on the page.
• For every web part you defined a component, e.g. my-webpart-1, my-webpart-2, so the template of a web part is eg , and Angular does the rest.

The entry point of the web part project (default vanilla project) is a web part, this could be the app.component.ts with the root component, which then somehow loads the components of the web parts?

[jmmartinez84]

I've working with angular 1.x and sharepoint for almost 2 years creating webparts.
I always use a manual angular bootstrap for each WebPart something like this:
function () {
var containers = document.getElementsByClassName("content");
angular.forEach(containers, function (container, index) {
angular.bootstrap(container, ["worldClock"]);
});
}
https://github.com/jmmartinez84/clock-js/blob/master/Script/main.js

I hope it helps.

[waldekmastykarz]

This works with Angular 1 but not with Angular 2 which doesn't support bootstrapping a specific DOM element.

[patmill]

I don't think it's too tricky to come up with a way for an individual developer to make multiple controls work, However we need to come up with a way (at least prescriptive, hopefully 'it just works') for different developers to create solutions that work together by default.

[ericgrover]

a quick guide on how to bootstrap an Angular 2 app in a single webpart would be helpful!

[amrfouad22]

Hi @ericgrover I've created a sample webpart using SPFx and Angular2 I'm a newbie in Angular2 and it's the simplest webpart ever
check https://github.com/ministainer/Angular2SampleSPFx , complete walkthrough is here (http://www.sharepointtweaks.com/2016/08/sharepoint-framework-angular2-sample.html)

[ericgrover]

Excellent. Thanks!

From: Amr Fouad [mailto:notifications@github.com]
Sent: Wednesday, August 31, 2016 1:26 PM
To: SharePoint/sp-dev-docs sp-dev-docs@noreply.github.com
Cc: Eric Grover eric@ericgrover.com; Mention mention@noreply.github.com
Subject: Re: [SharePoint/sp-dev-docs] Angular 2 : Documentation (#7)

Hi @ericgrover https://github.com/ericgrover I've created a sample webpart using SPFx and Angular2 I'm a newbie in Angular2 and it's the simplest webpart ever
check https://github.com/ministainer/Angular2SampleSPFx , complete walkthrough is here (http://www.sharepointtweaks.com/2016/08/sharepoint-framework-angular2-sample.html)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub #7 (comment) , or mute the thread https://github.com/notifications/unsubscribe-auth/AGu3rr3G5axjsNkwocoqvuT9IEhZMPIIks5qlbk-gaJpZM4Jm_vs . https://github.com/notifications/beacon/AGu3rjQL3ZRESKOuLKw9O2ivJRHvQQB5ks5qlbk-gaJpZM4Jm_vs.gif

That's awesome! @ministainer

[patmill]

Have you managed to be able to instantiate multiple instances of the control / different controls on a single page?

[amrfouad22]

@patmill nop , as far as i know (I'm angular2 newbie) Angular2 only support single root component. the above example encapsulates the webpart within single module and single root component.
The solution if we can define a root component that contains all webparts on the page
Maybe if we have an angular2 option which supports this scenario