Question

我正在尝试构建一个angularjs应用程序。一切似乎都很好，没有错误，但它不起作用。为了删除其他因素，我删除了所有内容（requirejs等）并将其缩小为一个小的html文件。

这是html中的js代码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="bower_components/angular/angular.js"></script>
        <script src="bower_components/angular-route/angular-route.js"></script>
        <script>


        angular.module('application', ['ngRoute']);
        angular.module('application').config(['$routeProvider', function($routeProvider) {
            $routeProvider.when('/', {template: 'test content', controller: 'controller1'});
            $routeProvider.otherwise({redirectTo: '/'});
        }]);
        angular.module('application').controller('controller1', ['$scope', function($scope) {
            console.log('in controller1');
        }]);
        angular.bootstrap(document, ['application']);


        </script>
    </head>
    <body>
    </body>
</html>

结果我希望在页面上看到“测试内容”，在控制台中看到“在controller1中”。你能告诉我为什么它不起作用吗？

Answer 1

您缺少与路由一起使用的ng-view指令，以显示路由配置中提供的模板。

Working plunker

代码：

  <body>
    <div ng-view></div>
    <script>
        angular.module('app', [])
        .config(['$routeProvider', function($routeProvider) {
            $routeProvider.when('/', {template: '<p>test content</p>', controller: 'controller1'});
            $routeProvider.otherwise({redirectTo: '/'});
        }])
        .controller('controller1', ['$scope', function($scope) {
            console.log('in controller1');
        }]);
        angular.bootstrap(document, ['app']);
    </script>
  </body>

Answer 2

Angular JS bootstraps使用在html中声明的ng-app和ng-controller指令。

参考：

http://docs.deployd.com/docs/collections/examples/a-simple-todo-app-with-angular.md

Answer 3

尝试添加围绕引导调用添加此文档准备测试。它将等待调用bootstrap，直到文档（DOM）完全准备好。

如果你没有在ready()调用中包装bootstrap，那么当angular构建它的DOM视图时，浏览器可能仍在构建DOM的过程中。这可能导致角度不知道页面的某些部分，或者更糟（这可能很难调试）。

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

您可以在本指南中详细了解角度初始化：http://docs-angularjs-org-dev.appspot.com/guide/bootstrap

或者您可以使用<html ng-app='application'>而不是其他人提到的，如果您想要更传统的路线 - 但是您必须摆脱angular.bootstrap调用。

为什么这个angularjs应用程序没有启动？

3 个答案: