angularjs multiple controllers on one page

AngularJs Multiple Controllers on one View Page

Introduction

Today's I am going to share the code-sample for how to call or use multiple controllers on one view. I am very excited to share this interesting topic. 

Table of Contents

1. The HTML code-sample 
2. The AngularJs code-sample 
3. The Full Example code-sample 

The HTML code-sample


?
01
02
03
04
05
06
07
08
09
10
11
12
13
<div ng-controller="MainCtrl">
  <div class="row-fluid">
    <div class="span6">
      Do something main here..
    </div>
  </div>
  <div ng-controller="SubDiv1Ctrl">
    Do something sub 1 here..
  </div>
  <div ng-controller="SubDiv2Ctrl">
    Do something sub 2 here..
  </div>
</div>
<div ng-controller="MainCtrl">
  <div class="row-fluid">
    <div class="span6">
      Do something main here..
    </div>
  </div>
  <div ng-controller="SubDiv1Ctrl">
    Do something sub 1 here..
  </div>
  <div ng-controller="SubDiv2Ctrl">
    Do something sub 2 here..
  </div>
</div>
The AngularJs code-sample

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
var app = angular.module('multipleCtrlApp', []);
 //Main controller
app.controller('MainCtrl', function($scope, $http) {
  $scope.Test1 = "MainDiv";
});
 //Sub1 controller
app.controller('SubDiv1Ctrl', function($scope, $http) {
  $scope.Test1 = "SubDiv1";
});
 //Sub2 controller
app.controller('SubDiv2Ctrl', function($scope, $http) {
  $scope.Test2 = "SubDiv2";
});
var app = angular.module('multipleCtrlApp', []);

 //Main controller
app.controller('MainCtrl', function($scope, $http) {
  $scope.Test1 = "MainDiv";
});

 //Sub1 controller
app.controller('SubDiv1Ctrl', function($scope, $http) {
  $scope.Test1 = "SubDiv1";
});

 //Sub2 controller
app.controller('SubDiv2Ctrl', function($scope, $http) {
  $scope.Test2 = "SubDiv2";
});
The Full Example code-sample

?
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
40
<!DOCTYPE html>
<html ng-app="multipleCtrlApp">
<head>
  <meta charset="utf-8" />
  <title>angularjs multiple controllers on one view page</title>
  <script>
    var app = angular.module('multipleCtrlApp', []);
     //Main controller
    app.controller('MainCtrl', function($scope, $http) {
      $scope.Test1 = "MainDiv";
    });
     //Sub1 controller
    app.controller('SubDiv1Ctrl', function($scope, $http) {
      $scope.Test1 = "SubDiv1";
    });
     //Sub2 controller
    app.controller('SubDiv2Ctrl', function($scope, $http) {
      $scope.Test2 = "SubDiv2";
    });
  </script>
</head>
<body ng-controller="MainCtrl">
  <div class="row-fluid">
    <div class="span6">
      Do something main here..
    </div>
  </div>
  <div ng-controller="SubDiv1Ctrl">
    Do something sub 1 here..
  </div>
  <div ng-controller="SubDiv2Ctrl">
    Do something sub 2 here..
  </div>
</body>
</html>
<!DOCTYPE html>
<html ng-app="multipleCtrlApp">
<head>
  <meta charset="utf-8" />
  <title>angularjs multiple controllers on one view page</title>
  <script data-require="[email protected]" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
  <script>
    var app = angular.module('multipleCtrlApp', []);

     //Main controller
    app.controller('MainCtrl', function($scope, $http) {
      $scope.Test1 = "MainDiv";
    });

     //Sub1 controller
    app.controller('SubDiv1Ctrl', function($scope, $http) {
      $scope.Test1 = "SubDiv1";
    });

     //Sub2 controller
    app.controller('SubDiv2Ctrl', function($scope, $http) {
      $scope.Test2 = "SubDiv2";
    });
  </script>
</head>

<body ng-controller="MainCtrl">
  <div class="row-fluid">
    <div class="span6">
      Do something main here..
    </div>
  </div>
  <div ng-controller="SubDiv1Ctrl">
    Do something sub 1 here..
  </div>
  <div ng-controller="SubDiv2Ctrl">
    Do something sub 2 here..
  </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 Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

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