How-to: Омогућите Мултипле Угаона СхареПоинт Веб Партс на истој страни

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/>

</ХТМЛ>

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/>
</див>
</тело>

<script src=”//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js”></скрипта>

<скрипта>
angular.bootstrap(angular.element(доцумент.врите(“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.

</крај>

undefinedПретплатите се на мој блог.

Следите ме на Туиттер на http://www.twitter.com/pagalvin

5 мисли о "How-to: Омогућите Мултипле Угаона СхареПоинт Веб Партс на истој страни

    1. Паул Галвин пост аутор

      Great question. У овом случају, I did it using SharePoint online (O365).

      I *believe* that my colleagie also did this in SP 2013 on-prem.

      I posted a question to reddit.com/r/angularjs, asking whether this should sort of be standard. The limited feedbcak I got was that yes, manual bootstrapping is the way to go. Just some opinions.

  1. Типе: Manual or automatic bootstrapping Angular on a page – it seems like manual bootstrapping is safest? - Reader

  2. Типе: СхареПоинт 2013: Recopilatorio de enlaces interesantes (LXI)! | Pasión por la tecnología...

  3. Типе: СхареПоинт 2013: Recopilatorio de enlaces interesantes (LXI)! - Blog de Juan Carlos González en Geeks.MS

Леаве а Репли

Ваша емаил адреса неће бити објављена. Обавезна поља су означена *