Develop Reference

AngularJS "Argument 'mainController' is not a function"

im new to Angular and need some help.
I'm trying to setup a basic directory structure where i have modules and controllers in seperate JS-files. However, when i do this i get the error stated in the posts title.
The module looks like this:
var myApp = angular.module('myApp', ['ngRoute']);
Controllers like this:
myApp.controller('mainController', function ($scope) {
$scope.message = 'Test message';
});
And routes:
myApp.config(function ($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl: 'components/home/home.html',
controller: 'mainController'
})
// route for the about page
.when('/about', {
templateUrl: 'components/about/about.html',
controller: 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl: 'components/contact/contact.html',
controller: 'contactController'
});
});
Then in my HTML i use ng-app="myApp" and ng-controller="mainController" and trying to write out: {{message}} from it. But it doesn't work.
If i put all the angular code in the same JS-file, then it works. But not when they are seperated.
Help and an explaination is highly appreciated!

As the comments have suggested, this error is usually caused my a missing reference to the file that contains your mainController. Your index.html should contain script references to your javascript files. Here is an example from one of my small apps:
<!-- Custom scripts -->
<script src="/app.js"></script>
<!-- Controllers -->
<script src="/login/loginCtrl.js"></script>
<script src="/home/homeCtrl.js"></script>
<!-- Directives -->
<script src="/common/directives/pageHeader/pageHeader.directive.js"></script>
<script src="/common/directives/footerGeneric/footerGeneric.directive.js"></script>
<script src="/common/directives/queryBuilder/queryBuilder.directive.js"></script>
<script src="/common/directives/scroll/infScroll.js"></script>
All of this should come after including jquery and angular. Additionally (I don't know where you include app.js successfully, you may have already done this) you need to direct AngularJS routes to the index.html file from your express server (assuming express/node backend) in your main app file like so:
app.use(express.static(path.join(__dirname, 'app_client')));
app.use(function (req,res){
res.sendfile(path.join(__dirname, 'app_client', 'index.html'))
});
I hope this was helpful. If you post the code where you attempt to include your application and controller then I can provide a more detailed answer.

Uncaught Error: [$injector:modulerr with angualrJs when i use routing

this is part of my problem = https://jsfiddle.net/2vrz38d6/
it contain just the js part open the console to see what i have
i get confused to solve this error
Error: $injector:modulerr
Module Error
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.10/$injector/modulerr?p0=myApp&p1=Error%3A%…3A9641%2Fassets%2Fglobal%2Fplugins%2Fangularjs%2Fangular.min.js%3A38%3A435)
My Error happen with routing in angularJs
the error which i took it is :
my Error page here
my code is :
(function () {
var MyApp = angular.module('myApp');
MyApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/expenses.html',
controller: 'CurriculumController'
})
.otherwise({
redirectTo: '/'
});
and the controller
MyApp.controller('CurriculumController', ['$scope', '$rest', function ($scope, $rest) {
//some stuf here
for my script angular file :
in the first i have this
<script src="/assets/global/plugins/angularjs/angular.min.js"></script>
and in the middle of the project i have
the file of my angular apps
<script src="/Scripts/NGModel/Curriculum/Curriculum.js"></script>
and after that the file of the routing part for angularjs
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>

As people above have suggested, you need to include that file, but you also need to make sure that you are doing it in the correct order as well in your index file. I suppose trying a different set of CDNs wouldn't hurt either.
<script src="https://code.angularjs.org/1.3.15/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular-route.min.js"></script>
Also, in your route configurations, just a mention that you can do this as well for your otherwise:
MyApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/expenses.html',
controller: 'CurriculumController'
})
.otherwise("/");
});

you have to include angular-route.js.
Dependency injection would be angular.module('myApp', ['ngRoute']);
EDIT as the inclusion of Angular libraries were updated in the OP's problem statement :-
Replace
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script> with
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.10/angular-route.min.js"></script> as you have mentioned in comments that you are using v1.3.10
And as #Garrett has suggested, add,
.otherwise("/");

You will need to make this work:
1) Add the angular-route file:
Include the file below the angular.js
<script src="angular-route.js">
2) Inject the ng-route at the definition of your app:
angular.module('myApp', ['ng-route']);

you should add your dependencies in to the module like this
var app = angular.module('myApp', ['ngRoute']);

AngularJS Separating The Controllers, Argument is not a function, it is undefined

I know it is asked hundreds of times, but I cannot really find out the error. I have looked all the similar questions At first, I did everything in one page, it was working, but obviously I needed to learn to separate my controllers to different files. I have did the following:
partials/hosts.html:
Hosts Page
<div ng-controller="HostsCtrl">
{{ title }}
</div>
index.html
<html>
<head>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="js/myApp.js"></script>
<script src="js/HostsCtrl.js"></script>
</head>
<body ng-app="MyApp">
...
js/MyApp.js
Create MyApp module, and a submodule named controllers
var app = angular.module('MyApp', ['ngRoute', 'ui.bootstrap']);
console.log("index.js file loaded");
angular.module('MyApp.controllers', []);
js/HostsCtrl.js
Just a simple controller in MyApp.controllers module that displays hello world and time.
console.log("HostsCtrl.js file loaded");
angular.module('MyApp.controllers').controller("HostsCtrl", function($scope) {
$scope.title = "Hello world" + new Date().getTime();
});
The console output:
index.js file loaded MyApp.js:2
HostsCtrl.js file loaded HostsCtrl.js:1
Error: [ng:areq] Argument 'HostsCtrl' is not a function, got undefined
I assume the loading order is correct, however I do not understand why it gives an error and cannot resolve HostsCtrl. What am I doing wrong?

Looks like you never declare MyApp.controllers dependency (since your controllers are in separate module). Try this:
var app = angular.module('MyApp', [
'ngRoute',
'ui.bootstrap',
'MyApp.controllers'
]);

Run angular.js as a callback ($.ajax, for example)

I'm writing an app with mostly two javascripts, resources_loader.js and app.js, where the first loads some json files used by app.js.
The problem is: app.js (which has angular.js stuff) should run only after resources_loader.js. I tried to run angular code inside the success callback (resources_loader contains a deferred), but this not seems to work well. Here's my index.html:
<!doctype html>
<html ng-app="myapp">
<body>
<script src="angular.js"></script>
<script src="resources_loader.js"></script>
</body>
</html>
Consider that I moved app.js to resources_loader, inside the success callback. Everytime I try to run it, angular raises the following exception: Uncaught Error: No module: myapp.
My guess is that angular.module('myapp', []) should run before onload's event, which is not the case here.
Another thing is that I want to use yepnope.js in my project like this:
<script "yepnope.js"></script>
<script "resources_loader.js"></script>
<script>
var loader = load_stuff();
yepnope({
test: loader.resolved(),
yep: ['angular.js', 'app.js', 'foo.js', 'bar.js'],
nope: ['fail.js']
});
</script>
app.js contains angular code. I think it's more performant because it only loads angular if the resources are loaded. But how can I do it?

Remove ng-app from <html> tag and use angular.bootstrap(document, ['myapp']); to fire it up once your resources are loaded, like this:
var app = angular.module('myapp', []);
app.config(['$routeProvider', '$locationProvider', function($router, $location) {
$location.html5Mode(true);
$router
.when('/', {
templateUrl: 'some_template.html',
controller: 'myController'
});
}]);
// and then, after everything, run
angular.bootstrap(document, ['myapp']);

Angular module config not called

I'm trying to get my head around AngularJS and ran into a problem.
var myApp = angular.module('myApp', ['myApp.services']);
myApp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
console.log('Configuring module "myApp"');
$routeProvider.when('/dashboard', {templateUrl: 'partial/dashboard', controller: DashboardController});
$routeProvider.when('/menu', {templateUrl: 'partial/other', controller: OtherController});
$routeProvider.otherwise({redirectTo: '/dashboard'});
$locationProvider.html5Mode(true);
}]);
To my understanding the configuration function should be called when the module gets loaded. But it does not!
I have the ng-app="myApp" directive on the <body> tag. And scripts loaded just before the body closing tag in the correct order (as far as that matters).
<script src="angular.js"></script>
<script src="app.js"></script>
<script src="services.js"></script>
<script src="controllers.js"></script>
</body>
I'm pretty sure I must be overlooking something trivial here. There should be a message printed to the console. But it remains empty with no errors or warnings whatsoever.
The parts of the app not depending on the routes runs just fine.
Update: simplified version of my service.js
'use strict';
angular.module('myApp', function ($provide) {
$provide.factory('myService', function ($http) {
var service = function () {
...
service implementation
...
};
return new service();
});
});

It seems that the method I used for defining the service was overriding my myApp module.
This is the overriding line
angular.module('myApp', function ($provide) ...
This code simply redefines the myApp module and adds a function to configure that one.
I refactored service.js to this simplified version and it started to work.
var myApp = angular.module('myApp');
myApp.factory('securityService', function () {
return SomeFancyServiceObject();
});

I was missing ng-app="myApp" inside my html tag - and I realized this while reading your question :-)

I usually see routing applied by chaining them together:
$routeProvider
.when('/dashboard', {templateUrl: 'partial/dashboard', controller: DashboardController})
.when('/menu', {templateUrl: 'partial/other', controller: OtherController})
.otherwise({redirectTo: '/dashboard'});
Can't see why yours would not work, but might be worth a go.