0

我正在尝试构建一个 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>

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

4

3 回答 3

3

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

工作的笨蛋

代码：

  <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>
于 2013-10-19T16:39:17.460 回答
2

Angular JS 通过使用在 html 中声明的 ng-app 和 ng-controller 指令来引导。

参考这个：

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

于 2013-10-19T14:56:36.317 回答
1

尝试在引导调用周围添加添加此文档就绪测试。它将等待调用引导程序，直到文档 (DOM) 完全准备好。

如果您没有在ready()调用中包装引导程序，那么当 Angular 构建它的 DOM 视图时，浏览器可能仍处于构建 DOM 的中间。这可能会导致 Angular 不知道页面的某些部分，或者更糟（这可能很难调试）。 

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

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

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

于 2013-10-19T14:49:21.960 回答