How to use a controller in an other file in Angularjs

Question

How to use a controller in an other file in Angularjs

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.

javascript
html
angularjs

Answer 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.

Answer 2

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',[]);

Answer 3

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';
        }
);

Answer 4

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

Answer 5

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