Multiple controllers in single file using angular js

Question

I am a newbie in angular JS. I am working on controllers.I created the following script.

<!DOCTYPE html>
<html>
<head>
    <title>just learnin!</title>
</head>
<body>
    <div data-ng-app="clock" data-ng-controller="zerocontroller">
        <h2>Readable time is {{timeview.hour}}:{{timeview.min}}:{{timeview.sec}}</h2>
    </div>
    <div class="first" data-ng-app="justin" data-ng-controller="mycontrol">
        <h1>Name is {{k}}</h1>
    </div>
<script type="text/javascript" src="angular.min.js"></script>
<script>
    var just=angular.module('justin',[]);
    just.controller('mycontrol',function($scope){
        $scope.k="Harvey";
    });

    var clock=angular.module('clock',[]);
    clock.controller('zerocontroller',function($scope){
        $scope.time=new Date();
        $scope.timeview={hour:0,min:0,sec:0};
        var update=function(){
        $scope.time=new Date();
        $scope.timeview.hour=$scope.time.getHours();
        $scope.timeview.min=$scope.time.getMinutes();
        $scope.timeview.sec=$scope.time.getSeconds();
        };
        setInterval(function(){$scope.$apply(update)},1000);
    });
</script>
</body>
</html>

The problem is that the first controller encountered in DOM is only working i.e the current o/p is:

Readable time is 15:55:36

Name is {{k}}

But when I interchange this

  <div data-ng-app="clock" data-ng-controller="zerocontroller">
        <h2>Readable time is {{timeview.hour}}:{{timeview.min}}:{{timeview.sec}}</h2>
   </div>

with this

<div class="first" data-ng-app="justin" data-ng-controller="mycontrol">
        <h1>Name is {{k}}</h1>
        </div>

the o/p becomes

Name is Harvey

Readable time is {{timeview.hour}}:{{timeview.min}}:{{timeview.sec}}

I am not able to figure out what is wrong

Community · Accepted Answer · 2017-05-23 10:33:23Z

1

You can only define one ng-app in a html file. Duplicate ng-app declaration is not supported. What you are doing can be achieved by putting ng-app at the body or html tag such as: <body ng-app="app"> Remove all other ng-app declarations.

Everything can now reside in one module app. Or you can create multiple modules and add them as dependency on the root module app such as:

var just=angular.module('justin',[]);

var clock=angular.module('clock',[]);

var main=angular.module('app', ['justin','clock']);

Update: As pointed out by @nico, if we want to support multiple ng-app on html, we need to manual bootstrap them using angular.bootstrap API. See this SO post for example.

edited May 23, 2017 at 10:33

CommunityBot

11 silver badge

answered Sep 27, 2014 at 10:55

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nico Over a year ago

I think you're wrong. Multiple app are used in the angular sample page, and this is not a problem if you are using a manual bootstrap, otherwise, only one app on page would work.

Chandermani Over a year ago

Right i did not think about manual bootstrapping process, that is not so common. I will update my answer.

sid Over a year ago

@Chandermani can u suggest some book or site to learn this effectively?

Chandermani Over a year ago

The official documentation, egghead.io and thinkster.io/angulartutorial/a-better-way-to-learn-angularjs will give you a head start. I am too writing book on "AngularJS by Example" but that is still a few months away :).

Nico · Accepted Answer · 2014-09-27 15:40:49Z

0

To complete my comment to the previous response.

You are not allowed to use multiple ng-app in a single page, using automated bootstrap. BUT. Remove your ng-app (or data-ng-app) from your markup, and start angular apps manually.

It looks like this:

angular.bootstrap('appName', document.getElementById('yourAppBlockId')).

Not sure about the second args, but take a look on the angular documentation will help you.

answered Sep 27, 2014 at 15:40

Nico

2632 silver badges15 bronze badges

Collectives™ on Stack Overflow

Multiple controllers in single file using angular js

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related