3

In app.js I have:

(function(){ var app = angular.module("myApp", []); })();

in process.js which is included after app.js I have:

(function(){ app.controller('ProcessController', ['$http', function($http){ this.something = "Test" }]); });

and in my HTML file I have a div

<html class="no-js" lang="en" ng-app="myApp"> ... <div class="row" ng-controller="ProcessController">

This is throwing an error in my console:

Error: [ng:areq] Argument 'ProcessController' is not a function, got undefined

I'm pretty new to angular and have never used multiple files like this before. What am I doing wrong?

Improve this question
2
  • You need to put var app = angular.module("myApp"); in the process.js before the app.controller(...). Commented Mar 21, 2016 at 20:06
  • @ShaohaoLin shouldn't app be available from the file included before hand? The error isn't complaining that app doesn't exist. Commented Mar 21, 2016 at 20:08

4 Answers 4

Reset to default
5

Use angular.module("myApp") inside other JS file & don't forget to call function which will make sense to have IIFE pattern, which will help you to make ProcessController controller available.

Code

(function(){ angular.module("myApp") .controller('ProcessController', ['$http', function($http){ this.something = "Test" }]); })(); //<-- () function should get called to self execute it.
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

This was part of the problem... adding var app = angular.module("myApp"); as @slackmart suggested was the second piece to the puzzle
@Deekor angular.module("myApp") should be there ideally.. why you want var app = angular.module("myApp"); again there.? honestly I don't understand what else you wanted?
IIFE stands for Immediately Invoked Function Expression. For more information about IIFE, take a look of this repo: github.com/shaohaolin/You-Dont-Know-JS/blob/master/…
2

Change your process.js to:

(function(){ var app = angular.module("myApp"); app.controller('ProcessController', ['$http', function($http){ this.something = "Test" }]); })();

Also consider to use the syntax: ng-controller="ProcessController as process" in order to have access to this.something varialble after in your template {{ process.something }}.

Improve this answer

3 Comments

shouldn't app be available from the file included before hand? The error isn't complaining that app doesn't exist.
also I tried your answer and got the same error :-/
In app.js you're defining your module, then inside process.js you need to get the module definition in order to define your ProcessController. In other words: the angular.module function can be used as a setter (angular.module('modName', [/* dependencies */]); or as a getter (i.e. angular.module('modName');
1

At the top of your app.js

var app = angular.module('myApp', ['myApp.controllers']);

At the top of your processor.js

var app = angular.module('myApp.controllers', []);
Improve this answer

1 Comment

You should probably answer in a more detailed manner, like "You should add [what] [where] [in addition/instead of] [what you have now]"
0

'use strict' ; Defines that JavaScript code should be executed in "strict mode". so it needs declaration first then definition . So in case you have declared the module added in app.js & added js to the index.html but not injected in the mainApp module , you have chances for ngareq ControllerName is not a function or undefined. Hope so it would help .

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.