关于javascript：如何在正文末尾(而不是标头)加载AngularJS？


How do we load AngularJS at the end of body instead of the header?

默认情况下，除非我将其放在<head>中，否则AngularJS似乎无法正常工作。有没有办法将其放在<body>的末尾？

我的代码在页脚中看起来像这样：

1
2
3
4
5
6
7
8
9
$(document).ready(function() {
    var myApp = angular.module("myApp", []);

    myApp.bootstrap(document, ["myApp"]);

    myApp.controller("AppController",["$scope","$http", function() {
        // so stuff with the $scope.
    }]);
});

编辑3/31/14：
根据ederollora的回答并进行了一些研究，我发现在定义所有内容之后，都需要调用angular.bootstrap()的调用。上面的代码变为：

1
2
3
4
5
6
7
8
9
$(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
});

此外，为了将我的应用程序从jQuery迁移到Angular，我将document.ready调用更改为有角版本：

1
2
3
4
5
6
7
8
9
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
});

在文档中并不确定在定义所有内容后必须调用angular.boostrap()，所以我去了并改进了文档。

相关讨论

来自AngularJS文档页面：

Angular Tag

This example shows the recommended path for integrating Angular with what we call automatic initialization.

1
2
3
4
5
6
7
<!doctype html>
<html xmlns:ng="http://angularjs.org" ng-app>
  <body>
  ...
  <script src="angular.js">
  </body>
</html>
  • Place the script tag at the bottom of the page. Placing script tags at the end of the page improves app load time because the HTML loading is not blocked by loading of the angular.js script. You can get the latest bits from http://code.angularjs.org. Please don't link your production code to this URL, as it will expose a security hole on your site. For experimental development linking to our site is fine.

    • 找到信息：在这里

    相关讨论