We Keep Coding

Exportin/importing javascript modules

Nooby question:
I've got file main.js with module let myModule = {}, defined there inside $(document).ready(function(). And I have another file summary.js where I would like to use it. I declare them all in the head of html file:
<script src="js/main.js"></script>
<script src="js/summary.js"></script>
I would like to use myModule module in the summary.js file and extend it. So I would like to be able to define: myModule.summary = {}. For now I receive the error myModule is undefined even though all js files are uploaded correctly (I can see them in debugger in dev console of the browser). I expect I have to export the mdrx module somehow but export default mdrx at the end of main.js does not do the job. How to do it correctly? I read the documentation but it seems like structural problem as I couldn't figure that out. Can that be that the myModule is not loaded yet before loding summary.js? If so how to prevent that?

You can use the type attribute to achieve this:
<script src="js/main.js" type="module"></script>
Then you can import the module in other JavaScript files:
import yourModule from './main.js'

The problem was that the whole myModule was defined inside function() (called within document.ready event). Moving it outside that solved the problem.

Error: $injector:modulerr Module Error with ui-router

i cant figure out what is the problem
div#wrapper(ng-app="adminApp")
....
js/
var adminApp = angular.module('adminApp', ['ui-router']);
if i use
var adminApp = angular.module('adminApp', []);
the error disappear
why is that?
UPDATE:
adding image from console

the module name is ui-router but you need to inject ui.router and not ui-router
var adminApp = angular.module('adminApp', ['ui.router']);
check out PLUNKER LINK

It's a little late, but maybe it will save someone's time. In my case I've mixed up links: instead of angular-ui-router.min.js I've downloaded angular-route.min.js. Obviously angular-ui-router is necessary for this.

I also had a similar issue and in addition to following the steps outline above by "entre", I had to make sure the angularjs script tag comes before the ui-router tag as such:
<script src="Scripts/angular.min.js" type="text/javascript"></script>
<script src="scripts/angular-ui-router.min.js" type="text/javascript"></script>
The reverse order will also cause an $injector:modulerr

How to load custom named module in RequireJS

I know it is recommended not to use them, but let's say just for fun I'd like to use module with custom name. How can I load it?
I have following structure:
-- ./index.html
-- ./js/app.js
-- ./js/test.js
In HTML, I'm loading RequireJS (2.1.14)
<script src="js/require.js" data-main="js/app" type="text/javascript"></script>
In app.js:
require(["dummy"], function(){
window.console.log("ready");
})
In test.js:
define("dummy", [], function(){
window.console.log("dummy loaded");
})
But RequireJS is trying to load dummy.js. What am I missing here?
Update:
I know I can use require.config to load the file
require.config({
paths: {
"dummy" : "test"
}
})
But then I don't understand why is one able to define custom name if he has to re-declare it again in paths...

I think you need to define this in your config (app.js) as a property of the 'paths' object:
require.config({
paths: {
dummy: 'libs/whatever'
}
});
Edit
A few notes:
In test.js, I think that you don't need to add the empty array if you don't require other modules.
In app.js, you didn't add "dummy" as function argument.
I suspect that requirejs expects you to define a return value from the module definition.
AMD = Asynchronous Module Definition
I don't think that there is a reason to use the 'define' and 'require' methods if you are not using these modules for asynchronous dependency management, rather than for executing a script.

Angular JS Uncaught Error: [$injector:modulerr]

I am having a problem with Angular JS receiving an error : Uncaught Error: [$injector:modulerr].
My JS-file looks
angular.module('MyApp', ['ngRoute']);
angular.module('MyApp',['ngResource']);
function TwitterCtrl($scope,$resource){
}
I also included angular-route-js
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.min.js">
Angular documentation says the problem is http://docs.angularjs.org/api/ngRoute

In development environments I recommend you to use not minified distributives. And all errors become more informative! Instead of angular.min.js, use angular.js.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js">

Try adding this:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>

Try adding:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js">
and:
angular.module('MyApp', ['ngRoute','ngResource']);
function TwitterCtrl($scope,$resource){
}
You should call angular.module only once with all dependencies because with your current code, you're creating a new MyApp module overwriting the previous one.
From angular documentation:
Beware that using angular.module('myModule', []) will create the
module myModule and overwrite any existing module named myModule. Use
angular.module('myModule') to retrieve an existing module.

Make sure you're function is wrapped in a closure, complete with the extra () at the end:
(function(){
var app = angular.module('myApp', []);
})();

I previously had the same issue, but I realized that I didn't include the "app.js" (the main application) inside my main page (index.html).
So even when you include all the dependencies required by AngularJS, you might end up with that error in the console. So always make sure to include the necessary files inside your main page and you shouldn't have that issue.
Hope this helps.

The problem was caused by missing inclusion of ngRoute module. Since version 1.1.6 it's a separate part:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
var app = angular.module('myapp', ['ngRoute']);
This is getting reference from: AngularJS 1.2 $injector:modulerr David answer

I had the same problem. You should type your Angular js code outside of any function like this:
$( document ).ready(function() {});

I got this error because I had a dependency on another module that was not loaded.
angular.module("app", ["kendo.directives"]).controller("MyCtrl", function(){}...
so even though I had all the Angular modules, I didn't have the kendo one.

ok if you are getting a Uncaught Error: [$injector:modulerr] and the angular module is in the error that is telling you, you have an duplicate ng-app module.

Make sure that the variable that holds your angular.module is structured correctly.
This will fail with "Uncaught Error: [$injector:modulerr]":
var angApp = angular.module("angApp");
This works:
var angApp = angular.module("angApp", []);
It's a sneaky one since the error message doesn't point to one thing in particular (Thus the wide variety of answers). Additionally, most js linters won't catch the particulars. Keep at it!

I had exactly the same problem and what resolved it was to remove the closure:
$(function(){
var app = angular.module("myApp", []);
app.controller('myController', function(){
...
});
});
becomes:
var app = angular.module("myApp", []);
app.controller('myController', function(){
...
});

The error means that the dependency injector was unable to locate the dependency 'ngResource'. The script tag in the accepted answer provides this dependency.
You will also get the same error if you add any custom modules in the dependencies but did not add the script tag for including the '.js' file containing the dependency.

Just throwing this in in case it helps, I had this issue and the reason for me was because when I bundled my Angular stuff I referenced the main app file as "AngularWebApp" instead of "AngularWebApp.js", hope this helps.

I had also same issue, I have just removed following line of code from BundleConfig.cs file and my code is working fine.
BundleTable.EnableOptimizations = true;

Do not load the javascript inside the cdn link script tag.Use a separate script tag for loading the AngularJs scripts.
I had the same issue but I created a separate <script>
Then the error gone.

AngularJS error: 'argument 'FirstCtrl' is not a function, got undefined'

I noticed the same question was asked a few times here, I tried so solve it but nothing helps.
I'm following this tutorial with the egghead videos.
But when I get at the section of Controllers and Sharing data between controllers, I can't get it to work.
When I run it with Chrome, I get this error in the console:
'argument 'FirstCtrl' is not a function, got undefined'.
I really don't know what's wrong. The code is the same from in the tutorial.
HTML
<!DOCTYPE html>
<html ng-app>
<head>
<title>AngularJS Tutorials: Controllers</title>
<link rel="stylesheet" href="mystyle.css">
<script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<div ng-controller="FirstCtrl">
<h1> {{data.message + " world"}}</h1>
<div class="{{data.message}}">
Wrap me in a foundation component
</div>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
main.js
function FirstCtrl($scope){
$scope.data = { message: "Hello" };
}

You have 2 unnamed ng-app directives in your html.
Lose the one in your div.
Update
Let's try a different approach.
Define a module in your js file and assign the ng-appdirective to it. After that, define the controller like an ng component, not as a simple function:
<div ng-app="myAppName">
<!-- or what's the root node of your angular app -->
and the js part:
angular.module('myAppName', [])
.controller('FirstCtrl', function($scope) {
$scope.data = {message: 'Hello'};
});
Here's an online demo that is doing just that : http://jsfiddle.net/FssbL/1/

I got exactly the same error message and in my case it turned out i didn't list the controller JS file (e.g. first-ctrl.js) in my index.html

I just did this tutorial and followed #gion_13 answer. Still did not work. Solved it by making my ng-app name in the index identical to the one in my js file. Exactly identical, even the quotes. So:
<div ng-app="myapp">
<div ng-controller="FirstCtrl">
and the js:
angular.module("myapp", [])
.controller('FirstCtrl',function($scope) {
$scope.data= {message:"hello"};
});
Weird how the ng-app has to be identical but the ng-controller doesn't.

You must name your ng-app, giving your app a namespace; simply using ng-app is not enough.
Instead of:
<html ng-app>
...
You will need something like this instead:
<html ng-app="app">
...
Then, like so:
var app = angular.module("app", []).controller("ActionsController", function($scope){});

Another nice one: Accidentally redefining modules. I copy/pasted stuff a little too eagerly earlier today and ended up having a module definition somewhere, that I overrode with my controller definitions:
// controllers.js - dependencies in one place, perfectly fine
angular.module('my.controllers', [/* dependencies */]);
Then in my definitions, I was supposed to reference it like so:
// SomeCtrl.js - grab the module, add the controller
angular.module('my.controllers')
.controller('SomeCtrl', function() { /* ... */ });
What I did instead, was:
// Do not try this at home!
// SomeCtrl.js
angular.module('my.controllers', []) // <-- redefined module, no harm done yet
.controller('SomeCtrl', function() { /* ... */ });
// SomeOtherCtrl.js
angular.module('my.controllers', []) // <-- redefined module - SomeCtrl no longer accessible
.controller('SomeOtherCtrl', function() { /* ... */ });
Note the extra bracket in the call to angular.module.

remove ng-app="" from
<div ng-app="">
and simply make it
<div>

Me too faced the same issue. But the problem was I forgot to list the module in the list of modules the ng-app depends on.

I have faced this issue and it fixed with following way:
first remove ng-app from:
<html ng-app>
add name of ng-app to myApp:
<div ng-app="myApp">
add this line of code before function:
angular.module('myApp', []).controller('FirstCtrl',FirstCtrl);
final look of script:
angular.module('myApp', []).controller('FirstCtrl',FirstCtrl);
function FirstCtrl($scope){
$scope.data = {message: "Hello"};
}

In my case, this message comes from forgotten dependency injection in main module

This can happen if you have gulp misconfigured to add your angular app code more than once. In my case, this was in index.js, and it was adding it as part of the directory of js files (globbed in gulp) before and after my controller declarations. Once I added an exclusion for index.js not to be minified and injected the second time, my app began to work. Another tip if any of the solutions above don't address your problem.

Firstly - If the module name is not defined, in the JS you will not be able to access the module and link the controller to it.
You need to provide the module name to angular module.
there is a difference in using defining module as well
1. angular.module("firstModule",[])
2. angular.module("firstModule")
1 - one is to declare the new module "firstModule" with no dependency added in second arguments.
2 - This is to use the "firstModule" which is initialized somewhere else and you're using trying to get the initialized module and make modification to it.

i faced this issue but i was able to correct this issue by renaming the controller, please have a try on it.
ctrlSub.execSummaryDocuments = function(){};

sometimes something wrong in the syntax of the code inside the function throws this error. Check your function correctly. In my case it happened when I was trying to assign Json fields with values and was using colon : to make the assignment instead of equal sign = ...

I had two controllers with the same name defined in two different javascript files. Irritating that angular can't give a clearer error message indicating a namespace conflict.

I am not sure about this tutorial but I had the same problem when I forgot to include the file into grunt/gulp minimization process.
grunt.initConfig({
uglify: {
my_target: {
files: {
'dest/output.min.js': ['src/input1.js', 'src/missing_controller.js']
}
}
}
});
Hope that helps.

Watch your letter casing too. I spent a good hour chasing this bug.
<section id="forgotpwd" ng-controller="ForgotPwdController">
while I name the controller
angular
.module('app')
.controller('ForgotpwdController', ForgotpwdController);
They all should be consistently named, in this case ForgotpwdController with lower case p.