How-to: Միացնել Multiple Անկյունային SharePoint Վեբ մասեր նույն էջում

This blog posts describes how you can have multiple Angular.js based SharePoint web parts (referenced via a content editor web part) on the same page. I’m calling a content editor web part (CEWP) that references JavaScript built using the Angular.js framework an “Angular Web Part.”

Angular’s bootstrap process is super easy and just about every example you find on the internets goes something like this:

<html ng-app=’myApp’>

<blah/><blah/><blah/>

</html>

This breaks down, սակայն, if you want to enable multiple CEWP’s representing multiple angular web parts on the same page. Angular will only automatically bootstrap against the first ng-app directive it finds – at least as of angular version 1.3.6. The solution is pretty simple – manually bootstrap your code instead. The above now changes to something like this:

<մարմին>
<դiv id=”bootstrapHere” ng-controller=”myController as theController”>
<blah/><blah/><blah/>
</div>
</մարմին>

<script src=”//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js”></ձեռագիր>

<ձեռագիր>
angular.bootstrap(angular.element(document.getElementById(“bootstrapHere”)),[‘myApp’]);
</ձեռագիր>

Հիմնականում, instead of using ng-app on the element to do your bootstrapping, you slap an ID onto that element. Ապա, use the bootstrap() method on angular itself to control the bootstrapping process at run-time. I’ve tested this with three different Angular web parts on the same page and it works a charm.

</վերջ>

Անդամագրվել իմ բլոգում.

Գտեք Twitter-ում http://www.twitter.com/pagalvin

5 thoughts on "How-to: Միացնել Multiple Անկյունային SharePoint Վեբ մասեր նույն էջում”

Paul Galvin's SharePoint Space

How-to: Միացնել Multiple Անկյունային SharePoint Վեբ մասեր նույն էջում

5 thoughts on "How-to: Միացնել Multiple Անկյունային SharePoint Վեբ մասեր նույն էջում”

Թողնել Պատասխանել Paul Galvin Ավելացնել կարծիք Չեղարկել պատասխանել