Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to execute a multiple data-ng-app in sequence in angularjs

I have two ng-app in my application app1 and app2 and two controllers firstcontroller and secondcontroller respectively.

The problem is it first executes 2nd controller then first controller.

But i want to execute in sequence, like 1st controller execution then 2nd controller.

please provide solution for that.
thanks in advance.

var app1 = angular.module('firstapp', []);
app1.controller("firstcontroller",function($scope){
    $scope.arr1={name:'arjun'};
    alert($scope.arr1.name);
}); 
var app2 = angular.module('secondapp', []);
app2.controller("secondcontroller",function($scope){
    console.log("come to second app");
    $scope.arr2={title:'kumar'};
    alert($scope.arr2.title);
});
angular.bootstrap(document.getElementById("app2"),['secondapp']);
<body >
    <div id="app1" data-ng-app="firstapp" data-ng-controller="firstcontroller">
        <p>{{arr1.name}}</p>
    </div>
    <div id="app2" data-ng-app="secondapp" data-ng-controller="secondcontroller">
        <p>{{arr2.title}}</p>
    </div>
</body>
like image 638
Karan Kumar Mahto Avatar asked Nov 01 '22 07:11

Karan Kumar Mahto


1 Answers

Doc said

To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap

While it is possible to have multiple ng-app on the page but only one ng-app directive will be automatically instantiated and initialized by the Angular framework.

Now order can be mantianed by using

angular.element(document).ready(function() {
 angular.bootstrap(document.getElementById("app2"),['secondapp']);
});

Here is plunker for you Plunker

like image 161
squiroid Avatar answered Nov 14 '22 09:11

squiroid