简体   繁体   English

使用angular.bootstrap引导angular应用后,如何手动初始化控制器?

[英]How to initialize controllers manually after bootstrapping angular app using angular.bootstrap?

Found solution to this question. 找到解决此问题的方法。
I have a normal javascript app.I want to embed my angularjs app into it by bootstrapping manually.The problem is that "controllers with that module is not at all initialized" 我有一个普通的javascript应用。我想通过手动引导将我的angularjs应用嵌入到其中。问题是“带有该模块的控制器根本没有初始化”

index.html: index.html的:

<html>
  <head> <title>Including angular app into another</title> </head>
  <body>
    //I have normal javascript app
    <div>First App</div>

    <div id="secondApp">
      <div class="container" ng-include="'views/main.html'" ng-controller="MainCtrl"> </div>
    </div>
    //included all libraries required for the app
    <script src="jquery.js"></script>
    <script src="angular.js"></script>
    //main.js
    <script src="scripts.js"></script>
  </body>
</html>

scripts.js: scripts.js中:

angular.module('sampleApp', []);
// in this way, i have bootstrapped the app
angular.bootstrap(document.getElementById('secondApp'), ['sampleApp']);

angular.module('sampleApp')
 .controller('MainCtrl', function($scope, $rootScope, $timeout) {
   //i have included the functionality required for my second app
 });

But it is not embedding angular app into first app, getting an error "Argument 'MainCtrl' is not a function, got undefined" 但这不是将角度应用程序嵌入到第一个应用程序中,而出现错误“参数'MainCtrl'不是函数,未定义”

I don't understand, where i am doing wrong. 我不明白我在哪里做错了。

Just bootstrap the whole app in index.html instead of doing this in scripts.js like this 只需将整个应用程序引导到index.html中,而不是像这样在scripts.js中这样做

<script type="text/javascript">
  angular.element(document).ready(function() {
    angular.bootstrap(document.getElementById('secondApp'), ['assetWidgetApp']);
 });
</script>

Thanks!!! 谢谢!!!

The order of the statements is wrong. 语句的顺序是错误的。 It should be: 它应该是:

angular.module('sampleApp', []);

angular.module('sampleApp')
 .controller('MainCtrl', function($scope, $rootScope, $timeout) {
   //i have included the functionality required for my second app
 });

// in this way, i have bootstrapped the app
angular.bootstrap(document.getElementById('secondApp'), ['sampleApp']);

You need to define the controller before you bootstrap the angular app. 在引导角度应用程序之前,需要定义控制器。

Wrap your content in: 将您的内容包装在:

<div ng-app="sampleApp">
    <div>First App</div>

    <div id="secondApp">
      <div class="container" ng-include="'views/main.html'" ng-controller="MainCtrl"> </div>
    </div>
    //included all libraries required for the app
    <script src="jquery.js"></script>
    <script src="angular.js"></script>
    //main.js
    <script src="scripts.js"></script>
</div>

UPDATE: to bootstrap the app manually: 更新:手动引导应用程序:

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

More detailse here 更多细节在这里

I have created a fiddle . 我制造了一个小提琴

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM