CODEWITHSUNDEEP
javascripthtmlangularjs
sid
sid

Reputation: 163

Multiple controllers in single file using angular js

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

Upvotes: 1

Views: 1265

Answers (2)

Chandermani
Chandermani

Reputation: 42669

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.

Upvotes: 1

Nico
Nico

Reputation: 263

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.

Upvotes: 0

Related Questions