CODEWITHSUNDEEP
angularjssharepoint-2013
norri
norri

Reputation: 17

Sharepoint 2013 won't work with Angularjs

I tried to run this very simple input test on my SharePoint 2013 site. It worked well at first but after some other experimenting within same page in different content editors (I did not touch the input test) it broke and now shows only the search with double brackets. I have tried implementing this in Content editor and script editor but nothing seems to work. It only shows text and {{search}}

<script src=".../SiteAssets/javascript/angular.min.js"></script>
<script src=".../SiteAssets/javascript/jquery-2.1.4.min.js"></script>
<div>
     <input type="text" ng-model="search">
     <p>you're searching for: {{search}}</p>
</div>

Also I can't figgure out why the simples Hello World won't show as it should. It also shows the double brackets.

var app = new angular.module("mainApp", []);

app.controller("HelloController", function ($scope) {
	$scope.greeting = 'hello';
});


angular.bootstrap(document, ['mainApp']);

Above is controller and below is the .html.

<script type="text/javascript" src=".../SiteAssets/javascript/angular.min.js"></script>
<script type="text/javascript" src=".../SiteAssets/javascript/HelloController.js"></script> 

<div ng-app='mainApp' ng-controller='HelloController'>
    <p>{{greeting}}, World</p>
</div>

I have tested the Minimal download strategy features effect on these problems but it does not make any difference.

I hope someone can help!

BR, Noora

Upvotes: 1

Views: 1085

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136174

You need to bootstrap you angular app on angular.element ready after DOM is loaded properly.

Code

angular.element(document).ready(function() {
     angular.bootstrap(document, ['mainApp']);
});

You should call angular.bootstrap() after you've loaded or defined your modules. You cannot add controllers, services, directives, etc after an application bootstraps.

Doc Link

Upvotes: 1

Related Questions