Angular JS in SharePoint 2013 script editor web part issue

Question

I have written a very simple script to test angularJS ng-repeat. Here is the script

---

<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>

<script language="javascript" type="text/javascript"> 

var app = angular.module('myApp',[]);
app.controller('myController',function($scope){
    $scope.People=["Name 1","Name 2"];
});

</script>

<div ng-app="myApp">
    <div ng-controller="myController">
        <ul>
            <li ng-repeat="person in People">{{person}}</li>
        </ul>
    </div>
</div>

---

When I paste this script in a script editor web part and click "Apply" in the web part, the script goes in an infinite loop and keeps on repeating the LI . I have to close the browser tab and open it again. By when I open the site again, the web part looks fine when the page is not in edit mode and the values are properly binded to the "LI".

Looks like the issue occurs only in the edit mode of the page. Any clue what is causing this. I am not able to figure out.

Answer 1

You Code works if its standard Angular,

http://plnkr.co/edit/PE7pymeqd3Vcn3ndSwiO?p=preview

so something weird in the edit mode of SharePoint?, Remember Angular is an SPA designed for Single Pages, not really to be embedded within SharePoint Web Part Pages,

So perhaps an alternate solution is not to run the code if its in Design Mode

Detect design mode and do something with it, like ng-show perhaps ?

How do I know if the page is in Edit Mode from JavaScript?

If you are in a SP Web Form then are you writing an SPA, would you know be better off with Knockout if you are just databinding ? Tempting as it is to stick with a single framework, sometimes SharePoint is a pain and gets in the way.

Answer 2

Try this. Create a new page add a rich content webpart and also add a script web part. In the rich text put your HTML and in the script put all your JS code. This seems to work for me with your example. Let us know if it works for you as well.

Answer 3

Try these 2 options.

1. Use the offline AngularJS script reference rather than referring online.
2. Change the order of reference and add the Angular reference after the SP.js

Answer 4

Download both JS files (angular and jquery), upload them to sharepoint library and refer it from that library. e.g. if you uploaded files to "Site Assets" library then reference will look like

    <script type="text/javascript" src="../SiteAssets/angular.min.js"></script>
    <script type="text/javascript" src="../SiteAssets/jquery-1.9.1.min.js"></script>