By default, AngularJS doesn't seem to work unless I put it in the <head>. Is there a way to put it at the end of the <body> instead?
My code looks like this in the footer:
$(document).ready(function() {
var myApp = angular.module("myApp", []);
myApp.bootstrap(document, ["myApp"]);
myApp.controller("AppController",["$scope", "$http", function() {
// so stuff with the $scope.
}]);
});
EDIT 3/31/14:
Based on ederollora's answer and doing some research, I discovered that the call to angular.bootstrap() needs to be called after everything is defined. The above code becomes this:
$(document).ready(function() {
var myApp = angular.module("myApp", []);
myApp.controller("AppController",["$scope", "$http", function() {
// so stuff with the $scope.
}]);
myApp.bootstrap(document, ["myApp"]); // compile the app last
});
Also, in the interest of migrating my app from jQuery to Angular, I change the document.ready calls to the angular version:
angular.element(document).ready(function() {
var myApp = angular.module("myApp", []);
myApp.controller("AppController",["$scope", "$http", function() {
// so stuff with the $scope.
}]);
myApp.bootstrap(document, ["myApp"]); // compile the app last
});
It wasn't clear in the documentation that angular.boostrap() had to be called after defining everything, so I went and improved the documentation.
