/ / / / how to execute angular a multiple ng-app in sequence?
data-ng-app

how to execute angular a multiple ng-app in sequence?

, , Edit
The AngularJs code-sample  Click for live demo result
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
//The angularjs code-sample.
   var app1 = angular.module('myApp1', []);
    app1.controller("app1Controller", function($scope) {
      $scope.empApp1 = {
        empName: 'Anil Singh'
      };
    });
    var app2 = angular.module('myApp2', []);
    app2.controller("app2Controller", function($scope) {
      $scope.empApp2 = {
        empDept: 'IT'
      };
    });
    angular.element(document).ready(function() {
      angular.bootstrap(document.getElementById("idsapp2"), ['myApp2']);
    });
//The angularjs code-sample.
   var app1 = angular.module('myApp1', []);
    app1.controller("app1Controller", function($scope) {
      $scope.empApp1 = {
        empName: 'Anil Singh'
      };
    });

    var app2 = angular.module('myApp2', []);
    app2.controller("app2Controller", function($scope) {
      $scope.empApp2 = {
        empDept: 'IT'
      };
    });

    angular.element(document).ready(function() {
      angular.bootstrap(document.getElementById("idsapp2"), ['myApp2']);
    });
The HTML code-sample
1
2
3
4
5
6
7
8
//The HTML code-sample
  <div data-ng-app="myApp1" data-ng-controller="app1Controller">
    <p>{{empApp1.empName}}</p>
  </div>
  <div id="idsapp2" data-ng-controller="app2Controller">
    <p>{{empApp2.empDept}}</p>
  </div>
//The HTML code-sample

  <div data-ng-app="myApp1" data-ng-controller="app1Controller">
    <p>{{empApp1.empName}}</p>
  </div>
  <div id="idsapp2" data-ng-controller="app2Controller">
    <p>{{empApp2.empDept}}</p>
  </div>

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//how to execute angularjs a multiple ng-app in sequence?
//Full live demo code-sample.
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
  <script>
    var app1 = angular.module('myApp1', []);
    app1.controller("app1Controller", function($scope) {
      $scope.empApp1 = {
        empName: 'Anil Singh'
      };
    });
    var app2 = angular.module('myApp2', []);
    app2.controller("app2Controller", function($scope) {
      $scope.empApp2 = {
        empDept: 'IT'
      };
    });
    angular.element(document).ready(function() {
      angular.bootstrap(document.getElementById("idsapp2"), ['myApp2']);
    });
  </script>
</head>
<body>
  <div data-ng-app="myApp1" data-ng-controller="app1Controller">
    <p>{{empApp1.empName}}</p>
  </div>
  <div id="idsapp2" data-ng-controller="app2Controller">
    <p>{{empApp2.empDept}}</p>
  </div>
</body>
</html>
//how to execute angularjs a multiple ng-app in sequence?
//Full live demo code-sample.

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
  <script>
    var app1 = angular.module('myApp1', []);
    app1.controller("app1Controller", function($scope) {
      $scope.empApp1 = {
        empName: 'Anil Singh'
      };
    });

    var app2 = angular.module('myApp2', []);
    app2.controller("app2Controller", function($scope) {
      $scope.empApp2 = {
        empDept: 'IT'
      };
    });

    angular.element(document).ready(function() {
      angular.bootstrap(document.getElementById("idsapp2"), ['myApp2']);
    });
  </script>
</head>

<body>
  <div data-ng-app="myApp1" data-ng-controller="app1Controller">
    <p>{{empApp1.empName}}</p>
  </div>
  <div id="idsapp2" data-ng-controller="app2Controller">
    <p>{{empApp2.empDept}}</p>
  </div>
</body>

</html>
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^