How to use a controller in an other file in Angularjs

Question

I'm used to code with Java with many files with object paradigm and MVC pattern with packages.

And I begin with AngularJS, I'm trying to enable a simple index.html who use a controller in javascript file but doesn't work.

my html file : index.html

<html ng-app="carre">
<head>
    <script src="js/angular.js"></script>
    <script src="js/CalculCtrl.js"></script>
    <script>
        var ctrl = angular.module('carre',[]); 
    </script>
</head>
<body ng-controller="CalculCtrl">
    <div>{{2+2}}</div>
    <p>{{temps}}</p>
</body></html>

My javascript file as controller located at js/CalculCtrl.js

carre.controller('CalculCtrl', function($scope)
        {
             $scope.temps = 'pluie';
            }
 )

What's wrong here please ? Thanks in advance.

Hi all and thanks for your responses but I've tried the 3 solutions and no one works... :( — Amiral Yassine
– Amiral Yassine, Commented Mar 13, 2015 at 15:46

Scott Simontis · Accepted Answer · 2015-03-13 15:23:55Z

1

Rename carre.controller(...) to ctrl.controller

Ctrl is the name of the variable holding a reference to your module, carre is the name you have given it for reference in the ng-app directive.

Edit: Also, I recommend you get the Batarang extension for Chrome, it adds a page to the Developer Tools for debugging Angular apps. Very helpful tool to have.

answered Mar 13, 2015 at 15:23

Scott Simontis

8361 gold badge12 silver badges24 bronze badges

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

Comments

Michael · Accepted Answer · 2015-03-13 15:30:52Z

1

You should invert the file inclusion and the module declaration:

<html ng-app="carre">
<head>
    <script src="js/angular.js"></script>
    <script>
        var carre = angular.module('carre',[]); 
    </script>
    <script src="js/CalculCtrl.js"></script>

</head>

Also, because you are using a variable called carre inside CalculCtrl.js, you should rename the variabile assignd when creating the module, from ctrl to carre:

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

answered Mar 13, 2015 at 15:30

Michael

3,3325 gold badges27 silver badges37 bronze badges

Comments

Abhishek Pachal · Accepted Answer · 2015-03-13 15:32:44Z

0

You have created module ctrl and using carre to refer it.And script sequence is wrong.The right answer is

index.html

<html>
enter code here<html ng-app="carre">
<head>
    <script src="js/angular.js"></script>

    <script>
        var carre = angular.module('carre',[]); 
    </script>
    <script src="js/CalculCtrl.js"></script>
</head>
<body ng-controller="CalculCtrl">
    <div>{{2+2}}</div>
    <p>{{temps}}</p>
</body></html>

CalculCtrl.js

carre.controller('CalculCtrl', function($scope)
        {
             $scope.temps = 'pluie';
        }
);

answered Mar 13, 2015 at 15:32

Abhishek Pachal

5547 silver badges27 bronze badges

Comments

Scott Vickers · Accepted Answer · 2015-03-13 15:48:43Z

0

As an alternative to the other answers you could create your CalculCtrl in it's own module and then depend on that module when declaring carre.

angular.module('Calcul', [])
.controller('CalculCtrl', function($scope)
    {
         $scope.temps = 'pluie';
    }
);

and then for carre

angular.module('carre', ['Calcul']);

In this way you don't need to re-order your script tags as they are

answered Mar 13, 2015 at 15:48

Scott Vickers

6114 silver badges10 bronze badges

Comments

Amiral Yassine · Accepted Answer · 2015-03-16 10:57:55Z

0

the answer is here

index.html

<html ng-app="AppliName">
    <head>
     <--! we load angularjs -->
      <script src="js/angular.js"></script>
     <--! we load our controller in an other javascript file -->
      <script src="js/mesControllers.js"></script>
    </head>

    <body ng-controller="myCtrl">
      <p>time is : {{temps}} </p>
    </body>
</html>

mesControllers.js located at js/mesControllers.js

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

AppliName.controller('myCtrl', function ($scope) {
  $scope.temps = 'pluie';
});

run and Keep calm it working now ;p

answered Mar 16, 2015 at 10:57

Amiral Yassine

812 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to use a controller in an other file in Angularjs

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related