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

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...
http://www.code-sample.com
http://www.code-sample.xyz

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.