Javascript 为什么'；这个angularjs应用程序启动了吗？_Javascript_Angularjs

Javascript 为什么'；这个angularjs应用程序启动了吗？

javascript angularjs

Javascript 为什么'；这个angularjs应用程序启动了吗？,javascript,angularjs,Javascript,Angularjs,我正在尝试构建一个angularjs应用程序。一切似乎都很好，没有错误，但它不起作用。为了删除其他因素，我删除了所有内容（requirejs等），并将其简化为一个小的html文件以下是html格式的js代码： <!doctype html> <html> <head> <meta charset="utf-8"> <script src="bower_components/angular/angula

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


角度模块（'application'，['ngRoute']）；
angular.module（'application'）.config（['$routeProvider'，function（$routeProvider）{
$routeProvider.when（'/'，{template:'test content'，controller:'controller1'}）；
$routeProvider。否则（{重定向到：'/'}）；
}]);
角度.module（'application'）.controller（'controller1'，['$scope'，function（$scope）{
console.log（'in controller1'）；
}]);
引导（文档，['application']）；

我希望看到的结果是页面上的“测试内容”，以及控制台中的“控制器1”。

你能告诉我为什么它不工作吗？

试着在你的引导调用周围添加这个文档就绪测试。它将等待调用引导，直到文档（DOM）完全就绪

如果你不在Bootstrap中打包Bootstrap（Read）（Read）（代码）>调用，当角度构建DOM的视图时，浏览器可能仍处于构建DOM的中间。这可能导致angular不知道页面的某些部分，甚至更糟（这可能很难调试）

您可以在本角度初始化指南中了解更多信息：

或者，如果您想走更传统的路线，您可以使用

，如其他人所述，但是您必须摆脱angular.bootstrap调用。

尝试在引导调用周围添加此文档就绪测试。它将等待调用引导，直到文档（DOM）完全就绪

您可以在本角度初始化指南中了解更多信息：

或者，如果你想走更传统的路线，你也可以像其他人提到的那样使用

，但是你必须摆脱angular.bootstrap调用。

angular JS引导使用html中声明的ng app和ng controller指令

请参阅：

使用html中声明的ng app和ng控制器指令进行Angular JS引导

请参阅：

您缺少与路线一起使用以显示路线配置中提供的模板的指令

代码：


角度.module（'app'，[]）
.config（['$routeProvider'，函数（$routeProvider）{
$routeProvider.when（'/'，{template:'测试内容'，controller:'controller1'}）；
$routeProvider。否则（{重定向到：'/'}）；
}])
.controller（'controller1'，['$scope'，函数（$scope）{
console.log（'in controller1'）；
}]);
引导（文档，['app']）；

您缺少与路线一起使用以显示路线配置中提供的模板的指令

代码：


角度.module（'app'，[]）
.config（['$routeProvider'，函数（$routeProvider）{
$routeProvider.when（'/'，{template:'测试内容'，controller:'controller1'}）；
$routeProvider。否则（{重定向到：'/'}）；
}])
.controller（'controller1'，['$scope'，函数（$scope）{
console.log（'in controller1'）；
}]);
引导（文档，['app']）；

这不会改变任何东西。我会再看一些，但一定要让文档准备好测试。如果你没有它，它会咬你。你的目标是使用引导程序而不是ng应用程序吗？如果你不需要手动启动，ng应用程序可能会让你的生活更轻松。这不会改变任何事情。我会再看一些，但一定要让文档做好测试准备。如果你没有它，它会咬你。你的目标是使用引导程序而不是ng应用程序吗？如果您不需要手动引导简单应用程序，ng应用程序可能会让您的生活变得更轻松，但我认为引导到整个文档可以解决编写ng应用程序的问题，如@BlazingCoder所述，在html.ng-app/ng-controller中更改ng控制器是首选方法，除非您有特殊情况需要手动引导提供的控制。这对于简单的应用程序是正确的，但我认为引导到整个文档可以解决编写ng应用程序的问题，如@BlazingCoder所述，在html.ng-app/ng-controller中更改ng控制器是首选方法，除非您有特殊情况需要手动引导控制。

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

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