[英]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']);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.