We Keep Coding

Link module from external file in AngularJS

I'm working on new project and I want to use two modules placed in separated files. Unfortunetaly, when I try to declare second in my root one I receive an error
Uncaught Error: [$injector:modulerr]
So, here is my root file, app.js:
var beerMe = angular.module("beerMe", ["admin", "ngRoute"])
.config(["$routeProvider", function($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "../views/home/home.html",
controller: "MyCtrl"
})
.otherwise({
redirectTo: "/home"
})
}])
.controller("MyCtrl", ["$scope", function($scope) {
}]);
And second one, which I want to bind, admin.js:
var admin = angular.module("admin", ["firebase", "ngRoute"]);
admin.config(["$routeProvider", function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/add.html",
controller: "AdminCtrl"
}).when ("/edit", {
templateUrl: "views/edit.html",
controller: "AdminCtrl"
}).otherwise({
redirectTo: "/"
})
}]);
admin.controller("AdminCtrl", ["$scope", "$firebaseArray", function($scope, $firebaseArray) {
// my code goes here
}]);
In admin.js I connnect to firebase and I want to have access to all data from my module "beerMe".
I'd be very grateful if you could help me to figure out why there's a problem with binding these two.

Change var admin = angular.module("admin", ["firebase", "ngRoute"]);
to var admin = angular.module("admin");
and change root module like this
var beerMe = angular.module("beerMe", ["admin", "ngRoute", "firebase"])

It looks like your dependencies are the wrong way round. Having admin as a dependency of beerMe will not make the beerMe module available in your admin module.
If you want your admin module to be able to access data from inside the beerMe module then beerMe should be a dependency of admin.
var admin = angular.module('admin', ['firebase', 'ngRoute', 'beerMe']);

AngularJS not loading templates in Codeigniter

I'm trying to use Angular with my Codeigniter project. The problem is that it doesn't load the proper template file through angular router.
In the root instead of showing templateUrl: 'index.php/welcome/home', it loads the index.php/welcome. It loads the index page inside the controller instead of the ones I have specified.
Below is my code:
JS
var app = angular.module('MyCtrl', ['ngRoute', "ui.bootstrap.modal"]);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'index.php/welcome/home',
controller: 'mainController'
})
.when('/user', {
templateUrl: 'index.php/user/account',
controller: 'userController'
})
});
app.controller('mainController', function($scope) {
$scope.message = 'main con';
});
app.controller('userController', function($scope) {
$scope.message = 'user con!';
});
Welcome controller in Codeigniter:
public function home(){
$this->load->view('home');
}
Can someone tell me why this is not working and what I have done wrong?

Unhandled exception in anjular.min.js

I am using angularjs to make a MVC web application...But it gives an error when i'm opening it on internet explorer... But I don't receive an error in other browsers and views are not loading either when click on the links.
This is the error received in Internet Explorer
Unhandled exception at line 33, column 487 in //localhost:18012/Scripts/angular.min.js
0x800a139e - JavaScript runtime error: [$injector:modulerr] http://errors.angularjs.org/1.2.27/$injector/modulerr?p0=sampleApp&p1=Error%3A%20%5B%24injector%3Aunpr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.27%2F%24injector%2Funpr%3Fp0%3D%2524routeProvider%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A36%3A196)%0A%20%20%20at%20c%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A34%3A273)%0A%20%20%20at%20d%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A34%3A487)%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A33%3A386)%0A%20%20%20at%20r%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A7%3A288)%0A%20%20%20at%20e%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A33%3A207)%0A%20%20%20at%20ec%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A36%3A307)%0A%20%20%20at%20c%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A18%3A168)%0A%20%20%20at%20dc%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A18%3A380)%0A%20%20%20at%20Wc%20(http%3A%2F%2Flocalhost%3A18012%2FScripts%2Fangular.min.js%3A17%3A415)
I have attached my angular model below. Please help me to solve this.
app.js
//Define an angular module for our app
var sampleApp = angular.module('sampleApp', []);
sampleApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'templates/homeContent.html',
controller: 'AddOrderController'
}).
when('/AddNewOrder', {
templateUrl: 'templates/add_order.html',
controller: 'AddOrderController'
}).
when('/ShowOrders', {
templateUrl: 'templates/show_orders.html',
controller: 'ShowOrdersController'
}).
when('/players', {
templateUrl: 'templates/playersMen.html',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/'
});
}]);
sampleApp.controller('AddOrderController', function ($scope) {
$scope.message = 'This is Add new order screen';
});
sampleApp.controller('ShowOrdersController', function ($scope) {
$scope.message = 'This is Show orders screen';
});

you are inject $routeProvider
please make sure you loaded:
angular-route.js
cdn:
https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular-route.js
when u loaded,then
add dependency to your app with ngRoute
angular.module('app', ['ngRoute']);

Firstly you have to inject 'ngRoute' in your angular module in the way:
var sampleApp = angular.module('sampleApp', ['ngRoute']);
Another thing is include angular-route.js in your index.html file
This will resolve your problem

Your module is missing ngRoute dependency.Make sure first you add angular-route.min.js
Then added ngRoute dependency inside your app
Your app should look like below.
var sampleApp = angular.module('sampleApp', ['ngRoute']);
Add script reference to html exact after angular.min.js
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular-route.js"></script>
Hope this is helpful to you.

My answer to another case with similar error, if you do not VS2015 US cord that will find it: references the Angular after platformOverrides.js
<body>
<div class="app">
<p id="deviceready" class="event">Connecting to Device</p>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"</script>
<script src="angular/angular.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
</body>

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

Infinite loops inside of angular controller

When I open up my app in a window, I get stuck in an infinite loop where angular keeps calling the GameCtrl and freezes the window. Here's the code:
index.html
<!DOCTYPE html>
<html ng-app="baseball">
<head>
<script src="/js/vendor/angular.min.js"></script>
<script src="/js/vendor/d3.v3.min.js"></script>
<script src="/js/baseball.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
baseball.js
var app = angular.module('baseball', []);
function GameCtrl ($scope) {
}
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: GameCtrl,
})
.otherwise({redirectTo:'/'});
});
I feel like this should be trivial; any help would be much appreciated.
Edit
Even with the templateUrl, it still goes into an infinite loop. Here's the updated config and the template code:
baseball.js
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: GameCtrl,
templateUrl: '/templates/field.html'
})
.otherwise({redirectTo:'/'});
});
templates/field.html
<div>hi</div>

Add the content you want to display here <div ng-view></div>
in your route
$routeProvider
.when('/', {
controller: GameCtrl,
templateUrl: path/to/your_content.html
})

You need to include angular-route.js in the head
and then inject 'ngRoute' into your module.
See http://docs.angularjs.org/api/ngRoute and http://docs.angularjs.org/api/ngRoute.$routeProvider