We Keep Coding

Loading modules in Angularjs

I have a problem trying to load some modules.
controller1.js:
angular.module('LPC')
.controller('lista_peliculas_controller', ['$scope', function($scope) {
$scope.hola="hola peliculas";
}]);
And app.js:
var app = angular.module('mis_peliculas', []);
app.config(function($routeProvider){
$routeProvider
.when("/pagina_principal",{
templateUrl: "views/pagina_principal.html",
controller: "lista_peliculas_controller"
})
.when("/lista_peliculas",{
templateUrl: "views/lista_peliculas.html",
controller: "lista_peliculas_controller"
})
.when("/lista_series",{
templateUrl: "views/lista_series.html",
controller: "lista_series_controller"
})
.otherwise({
redirectTo: "/pagina_principal"
})
});
The console says that there is a problem with the injector.
Can you find the error?

You must add angular-route.js . Reference
The ngRoute module provides routing and deeplinking services and
directives for AngularJS apps.
How do you fix it?
var app = angular.module('mis_peliculas', ['ngRoute','LPC']);
And
angular.module('LPC', [])

Update your code to use right module name:
angular.module('mis_peliculas')
.controller('lista_peliculas_controller', ['$scope', function($scope) {
$scope.hola="hola peliculas";
}]);
and if you want to use separate modules, you need to initiliaze it first and inject it into your main module
angular.module('LPC',[])
.controller('lista_peliculas_controller', ['$scope', function($scope) {
$scope.hola="hola peliculas";
}]);
var app = angular.module('mis_peliculas', ['LPC']);
I assume your routing is already set correctly.

without the complete log of the error i can't be more precise, but i think that the injection error could be related to your module not being instantiated.
try to change
angular.module('LPC') //here you get a reference to a module, that could cause your error
to
angular.module('LPC', []) //here you instantiate a module

You need to pass in the 'LPC' Module to your app 'mis_peliculas' module for it use the 'lista_peliculas_controller' Controller which is in 'LPC' Module.
Try this code
angular.module('LPC',[])
.controller('lista_peliculas_controller', ['$scope', function($scope) {
$scope.hola="hola peliculas";
}]);
This should be your controller1.js and should be defined before you define your app. Now the app.js should look like
var app = angular.module('mis_peliculas', ['LPC']);
app.config(function($routeProvider){
$routeProvider
.when("/pagina_principal",{
templateUrl: "views/pagina_principal.html",
controller: "lista_peliculas_controller"
})
.when("/lista_peliculas",{
templateUrl: "views/lista_peliculas.html",
controller: "lista_peliculas_controller"
})
.when("/lista_series",{
templateUrl: "views/lista_series.html",
controller: "lista_series_controller"
})
.otherwise({
redirectTo: "/pagina_principal"
})
});
This should remove all the errors and you should be able to use the controller from other module.
Hope it helps

Why do I get "Module 'myControllers' is not available" in AngularJS even though I've already define it?

I am following tutorial from https://github.com/spring-guides/tut-spring-security-and-angular-js/tree/master/single and using structure from https://docs.angularjs.org/tutorial.
But I got this error:
Uncaught SyntaxError: Unexpected token ]
angular.js:4138 Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module myControllers due to:
Error: [$injector:nomod] Module 'myControllers' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
app.js
var myApp = angular.module('myApp', [
'ngRoute',
'ngMessages',
'myControllers'
]);
myApp.config(['$routeProvider', '$httpProvider',
function($routeProvider, $httpProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/home.html',
controller: 'HomeCtrl'
}).
when('/login', {
templateUrl: 'partials/login.html',
controller: 'LoginCtrl'
}).
when('/register', {
templateUrl: 'partials/register.html',
controller: 'RegisterCtrl'
}).
otherwise({
redirectTo: '/'
});
$httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
}]);
controllers.js
var myControllers = angular.module('myControllers', []);
myControllers.controller('HomeCtrl', [ '$scope',
function($scope) {
console.log("HOME");
//another code
}]);
myControllers.controller('LoginCtrl', [ '$scope',
function($scope) {
console.log("LOGIN");
//another code
}]);
myControllers.controller('RegisterCtrl', [ '$scope',
function($scope) {
console.log("REGISTER");
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>

It turns out there is error inside LoginCtrl.
Eclipse didn't said anything if there is error in my code and AngularJS error message is really misleading. As said in http://www.johnpapa.net/easy-fix-to-a-common-angular-module-error/, if this thing happened, make sure all of your code is correct.
and, using format from https://github.com/angular/angular-seed is better I think. I found it after I refactored my code from https:github.com/angular/angular-phonecat to https:github.com/angular/angular-seed

get error after add routing to my anglularjs application

I'm new in angularjs and I want to load new content from another html file I use this below codes but I don't know why I get this errors
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.25/$injector......
app.js
var app = angular.module("boors", ['ngRoute']);
app.config(boorsRouter);
function boorsRouter($routeProvider){
$routeProvider
.when('#/', {templateUrl: 'partials/news.html',
controller: function ($scope) {
$scope.setActive('news');
}})
;
}
I add this script in html file
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
where I go wrong?

Remove # in the when method.
$routeProvider
.when('/', {templateUrl: 'partials/news.html',
controller: function ($scope) {
$scope.setActive('news');
}
});

Angularjs controller not found

As I felt my single controller was growing too large I am now trying to make use of multiple controllers. However, my UserController can't be found for some reason when I navigate to /signup. I'm getting this error:
Error: [ng:areq] Argument 'UserController' is not a function, got undefined
app.js
var app = angular.module('myApp', [
'ui.router',
'ngResource',
'myApp.controllers',
]);
angular.module('myApp.controllers', []);
app.config(function($stateProvider, $urlRouterProvider, $httpProvider) {
$stateProvider
.state('signup', {
url: '/signup',
templateUrl: 'views/signup.html',
controller: "UserController"
});
});
I'm including the .js files in this order:
<script src="angular/controllers/mainCtrl.js"></script> //binded to body tag
<script src="angular/controllers/userCtrl.js"></script> //set in signup state
<script src="angular/app.js"></script>
UserController
angular.module('myApp.controllers').controller('UserController', function () {
//do stuff
});
What am I missing?

Make it easier on yourself and create cleaner code.
var app = angular.module('myApp', [
'ui.router',
'ngResource',
'myApp.controllers',
])
.config(function($stateProvider) {
$stateProvider
.state('signup', {
url: '/signup',
templateUrl: 'views/signup.html',
controller: "UserController"
});
});
you weren't using $urlRoutProvider and $httpProvider so why inject them?
Angular Modules are good for nothing...so far. Except for loading 3rd-party angular code into your app and mocking during testing. Other than that, there is no reason to use more than one module in your app.
To create your UserController do a
app.controller('UserController', function ($scope) {
//do stuff
});

<script src="angular/controllers/mainCtrl.js"></script> //binded to body tag
<script src="angular/controllers/userCtrl.js"></script> //set in signup state
<script src="angular/app.js"></script>
You cant use a module before it's declared.so switch the scripts order.
You should stick to 1 independent module declaration per file and you'll be fine,otherwise you'll have to manage script order.

Your app.js has to be declared first like below BEFORE you pull in its controller subcomponents:
<script src="angular/app.js"></script>
<script src="angular/controllers/mainCtrl.js"></script> //binded to body tag
<script src="angular/controllers/userCtrl.js"></script> //set in signup state

AngularJS routeprovider injection error

I'm learning AngularJS, and I'm now trying the $routeProvider, but I can't get it to work.
index.html:
<!DOCTYPE html>
<html ng-app="App">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular-route.min.js"></script>
<script type="text/javascript" src="scripts/controllers.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
view.html:
<p>Hello World!</p>
controllers.js:
var app = angular.module('App', ['ngRoute']);
app.config(
function($routeProvider){
$routeProvider.when("/something",{
templateUrl: "view.html",
controller: "MyController"
})
.otherwhise({
redirectTo: "/"
});
}
);
function MyController($scope){
}
Whenever I run this, I get an error message that says
Uncaught Error: [$injector:modulerr]
How can I solve this?

Change .otherwhise to .otherwise.
A good practice when you run into these issues is to try the un-minified version of Angular.
The un-minified error is much more helpful:
Uncaught Error: [$injector:modulerr] Failed to instantiate module App
due to: TypeError: Object # has no method 'otherwhise'

Solution: Create a $inject property on your route config as follows: -
var app = angular.module('App', ['ngRoute']);
(function (app) {
var routeConfig = function($routeProvider){
$routeProvider.when("/something",{
templateUrl: "view.html",
controller: "MyController"
})
.otherwhise({
redirectTo: "/"
});
};
routeConfig.$inject = ['$routeProvider'];
app.config(routeConfig);
})(angular.module("App"));
AngularJS will now be able to inject $routeProvider successfully when js is minified.