data-ng-app

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

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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book