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

I'm trying to build an angularjs application. Everything seems fine, there is no error, but it's not working. To remove other factors, I removed everything (requirejs etc.) and dumbed it down to a small html file.

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

Here is the js code in 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>

Result I'm expecting to see is "test content" on page, and 'in controller1' in my console. Can you tell me why it's not working?

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

3 个解决方案

#1

Your are missing the ng-view directive that works together with the routes to display the template provided in the route config.

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

Working plunker

工作的plunker

Code:

码：

  <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>

#2

Angular JS bootstraps by using ng-app and ng-controller directive declared in html.

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

Refer this:

请参考：

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

#3

Try adding adding this document ready test around you bootstrap call. It'll wait to call bootstrap until the document (DOM) is completely ready.

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

If you don't wrap bootstrap in the ready() call the browser may still be in the middle of constructing the DOM when angular builds it's view of the DOM. This can lead to angular being unaware of parts of your page, or worse (and this can be tough to debug).

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

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

You can read more about that in this guide to angular initialization: http://docs-angularjs-org-dev.appspot.com/guide/bootstrap

您可以在本角度初始化指南中阅读更多相关内容：http：//docs-angularjs-org-dev.appspot.com/guide/bootstrap

Or you could use <html ng-app='application'> instead as others have mentioned if you want to go the more traditional route- but then you'd have to get rid of the angular.bootstrap call.

或者您可以使用而不像其他人提到的那样，如果您想要更传统的路线 - 但是您必须摆脱angular.bootstrap调用。

#1