/ / AngularJs Multiple Controllers on one View Page
angularjs multiple controllers on one page

AngularJs Multiple Controllers on one View Page

Edit
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 src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></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>
<!DOCTYPE html>
<html ng-app="multipleCtrlApp">
<head>
  <meta charset="utf-8" />
  <title>angularjs multiple controllers on one view page</title>
  <script data-require="angular.js@1.0.x" 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 Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

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