AngularJS: Register Controller from separate .js file

angularjs model-view-controller ng-controller
Jade L. picture Jade L. · Sep 30, 2015 · Viewed 7.5k times · Source

I am new to AngularJS and using plnkr.co to learn how to use angular. I have having some difficulty registering a Controller this is stored in a separate .js from where the module is initialized. Can anybody tell me why the below does not work?

index.html file

app.js File

angular.module('plunker', []);

mainCtrl.js File

angular.module('plunker')
  .controller('MainCtrl', ['$scope', function($scope) {
    $scope.name = 'GitHub';
  }]);

For me, this produces an Argument 'MainCtrl' is not a function, got undefined.

Answer

Michael P. Bazos picture Michael P. Bazos · Sep 30, 2015

Replace 

<script scr="mainCtrl.js"></script>

with

<script src="mainCtrl.js"></script>

Because of the typo (scr instead of src), the source file holding MainCtrl is not loaded, therefore MainCtrl is undefined.

Related questions

AngularJS beginner: ng-controller not working

I'm just trying to get my head around the basics of AngularJS. I tried writing a simple MVC app, but the controller doesn't seem to be working. The file can find the angular lib just find, I already tested that …

Read More
Show pop-ups the most elegant way

I have this AngularJS app. Everything works just fine. Now I need to show different pop-ups when specific conditions become true, and I was wondering what would be the best way to proceed. Currently I’m evaluating two options, but …

Read More
In Angular, how to redirect with $location.path as $http.post success callback

I am attempting to make a simple authentication service by sending a Post to a php file, I need it to load the home page partial on my ng-view when its successful. This is what I tried : function loginCtrl($scope, $…

Read More