AngularJs controller in two separate files

Question

In my Javascript file I have the following code:

var app = angular.module('allApps',['ngRoute', 'ui.bootstrap']);
app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/', {
      template: ''
    })
    .when('/user', {
      templateUrl: 'pages/user.html'
    })
    .when('/gallery', {
      templateUrl: 'pages/gallery.html'
    })
    .when('/contacts', {
      templateUrl: 'pages/contacts'
    })
    .otherwise({
      redirectTo: '/'
    });
}]);

Now, through ng-route I have another page called user.html that is simple this:

<div ng-controller = "Ctrl2">
    {{user.name}}
</div>

<script type="text/javascript">
   angular.module('allApps').controller('Ctrl2',function($scope){
      $scope.user={name:"Jim", lastname:"Smith"};
   });
</script>

In my HTML file I have the following code:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">    
<script type="text/javascript" src ="js/script.js"></script>
<link href="css/style.css" rel="stylesheet">

But it doesn't work. Error:

Error: [ng:areq] http://errors.angularjs.org/1.4.8/ng/areq?p0=Ctrl2&p1=not%20a%20function%2C%20got%20undefined
G/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:6:416
qb@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:22:131
Qa@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:22:218
Xe/this.$get</<@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:80:210
w@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:60:177
D@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:61:30
g@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:55:105
K/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:54:249
ngViewFillContentFactory/<.link@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js:986:7
ea@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:73:293
D@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:62:190
g@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:55:105
K/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:54:249
R/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:56:79
k@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:60:377
update@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js:936:25
lf/this.$get</r.prototype.$broadcast@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:136:157
commitRoute/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js:619:15
f/<@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:119:129
lf/this.$get</r.prototype.$eval@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:133:309
lf/this.$get</r.prototype.$digest@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:130:404
lf/this.$get</r.prototype.$apply@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:134:76
g@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:87:442
T@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:92:50
Uf/</w.onload@http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js:93:78

<div class="ng-scope" ng-view="">

What am I doing wrong?

Thanks in advance.

Maybe show a little more of how the page is structured? Where is the tag for script.js versus the inline script block? — nbering
– nbering, Commented Mar 4, 2016 at 0:44
I have a index.html where I have the tag script.js. Then I have a page called user.html that is just what I showed; all the site it's done through ng-route so everything is just in the index.html — user5880775
– user5880775, Commented Mar 4, 2016 at 0:46
Check out this: plnkr.co/edit/5ZpHE0O2wiZjnQUxAPxX?p=preview — ddepablo
– ddepablo, Commented Mar 4, 2016 at 7:34

nbering · Accepted Answer · 2016-03-04 00:46:48Z

1

You can't add controllers after angular is already bootstrapped, unless you use some kind of fancy lazy-loading. Therefore, adding a controller from a script block on a view is just not going to work.

answered Mar 4, 2016 at 0:46

nbering

2,8001 gold badge26 silver badges31 bronze badges

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

2 Comments

user5880775 Over a year ago

So I can't even write the new controller in another js file? Because I tried but it doesn't work either. Am I forced to write all in one file?

nbering Over a year ago

You can load it in another js file, but it has to be in a script tag on the page before angular compiles the page.

akhouri · Accepted Answer · 2016-03-04 01:17:35Z

1

You can have multiple controllers in differenct script files. But the script file should copile first before you start rendering the view.

Try binding your controller to the template view in the routes config

var app = angular.module('allApps',['ngRoute', 'ui.bootstrap']);
app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/', {
      template: '',
      controller: 'Ctrl1'
    })
    .when('/user', {
      templateUrl: 'pages/user.html',
      controller: 'Ctrl2'
    })
    .when('/gallery', {
      templateUrl: 'pages/gallery.html',
      controller: 'Ctrl3'
    })

answered Mar 4, 2016 at 1:17

akhouri

3,1753 gold badges29 silver badges30 bronze badges

Comments

oseintow · Accepted Answer · 2016-03-04 00:35:35Z

0

you are not closing your first function well. It should

var app = angular.module('allApps',['ngRoute', 'ui.bootstrap']);
app.controller('Ctrl1',[ '$scope', function ($scope){
   ...
}]);

answered Mar 4, 2016 at 0:35

oseintow

7,4213 gold badges28 silver badges31 bronze badges

1 Comment

user5880775 Over a year ago

If I write inside my script.js app.controller('Ctrl2',function($scope){ $scope.user={name:"Jim", lastname:"Smith"}; }); it works. It's just something in the external file

Collectives™ on Stack Overflow

AngularJs controller in two separate files

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related