We Keep Coding

The $routeProvider in Angular can't be found in undefined

I'm following a guide on how to include AngularJS in a MVC project and I got to the point where I'm connecting my controllers (the section's name is Routing).
It seems not to work and when I open the console, I see the following error message.
TypeError: Cannot read property '$routeProvider' of undefined
I've checked all the files in the solution for that string and the only usage of it is in the file where I registered my module. It looks like this.
var CoolApp = angular.module('CoolApp', ["ngRoute"]);
CoolApp.controller('CoolController', CoolController);
var configFunction = function ($routeProvider) {
$routeProvider
.when("/one", { templateUrl: "angularRoute/first" })
.when("/two", { templateUrl: "angularRoute/second" })
.when("/thr", { templateUrl: "angularRoute/third" });
}
configFunction.$inject["$routeProvider"];
CoolApp.config(configFunction);
I have MVC controller class named AngularRouteController and as far I can see, the only place where I'm "dotting" the $routeProvider is in when statements. Commenting them out doesn't resolve my issue, though. Instead, the line that seems to be the cause of the error is this one.
configFunction.$inject["$routeProvider"];
Due to my ignorance with Angular, I can't see why. As a consequence, I have no idea how to solve the problem. Any suggestions would be welcome. I've googled the issue but that didn't give me anything useful (as far I could judge).
The closest hits I've got was this and this one and they didn't make me any wiser. Not even sure if those are relevant to my problem.
I've made sure that I reference the routing package of Angular separately as suggested in this answer. Should I skip ngRoute and go for ui.router? Not sure what that changes for the guide...

It looks like you have to change that line to:
configFunction.$inject = [
"$routeProvider"
];

Injecting Angular modules: Unknown provider

I followed a tutorial on how to organize and Angular project. I have a ng directory that contains all my controllers, services and my routes.js. This is then bundled all together into an app.js by my gulp config.
My module.js is like this:
var app = angular.module('app', [
'ngRoute',
'ui.bootstrap'
]);
Here's a bit of my routes.js:
angular.module('app')
.config(function ($routeProvider) {
.when('/login', { controller: 'LoginCtrl', templateUrl: 'login.html'})
});
Here's what my working LoginCtrl looks like:
angular.module('app')
.controller('LoginCtrl', function($scope, UserSvc) {
$scope.login = function(username, password) {
...
}
})
The tutorial didn't make use of any Angular modules and I wanted to try one out. I added ui.bootstrap to my page from a CDN and try to change the LoginCtrl to:
angular.module('app')
.controller('LoginCtrl', function($scope, $uibModal, UserSvc) {
...
})
But this throws me the following error:
"Error: [$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $uibModal
What is causing this error? In every tutorial I find this seems to be how they load a module, the only difference I see is that the tutorial don't seem to be using a router.
PS: Note that if I use an empty module list [] I get the exact same error. If I use a non-existing module ['helloworld'] I get an errorModule 'helloworld' is not available'. So I'm concluding that my `ui.bootstrap' module is indeed available.
EDIT: Plunker fiddle here: http://plnkr.co/edit/FWHQ5ZDAByOWsL9YeMUH?p=preview

angular route is another module you should not only include but also use like this
in the app module creation
means DI of route
angular.module('app', ['ngRoute']);
Please go through the angular route doc

Remove ['ui.bootstrap'] form controller. You should add dependencies only one time but you add it twice so the second dependency list override the first one.
angular.module('app')
.controller('LoginCtrl', function($scope, UserSvc) {
... })

your routes snippet looks wrong, you should be hanging the when call off $routeProvider and maybe declare $routeProvider as an injected val if it's not being picked up e.g.
angular.module('app')
.config(["$routeProvider", function ($routeProvider) {
$routeProvider.when('/login', { controller: 'LoginCtrl', templateUrl: 'login.html'})
}]);

I have checked your link. I think there is a serious issue with angular and ui bootstrap version.In ui-boostrap dashboard, it is written that 0.12.0 is the last version that supports AngularJS 1.2.x. I have tried with all combinations but it doesn't work with your angular version.
I suggest you to change angular version to latest and ui-bootstrap version to latest so it will work.
Please check out this working Plukr
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.js'></script> //change this to latest also.
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.0.3/ui-bootstrap.min.js'></script>
<script src='./app.js'></script>
If you want to go with your angular version only. I'd request you to do some R&D. Try with different versions of ui-bootstrap. still if it doesn't work you can make PR.

Angular UI-router, controller is undefined

I am kind of new to the AngularJS framework and I am trying to migrate my test project using the standard router to use the UI-router, but I get the following error:
Error: [ng:areq] Argument 'mainCtrl' is not a function, got undefined
What I have done so far is:
Controller:
// mainCtrl.js
angular.module("sm-web")
.controller('mainCtrl',['$scope',
function($scope) {
...
}]);
Router:
angular.module('sm-web', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function( $stateProvider, $urlRouterProvider ) {
$urlRouterProvider.otherwise('root');
$stateProvider
.state('root', {
url: '',
templateUrl: path + 'ng/sm/view/main.html',
controller: 'mainCtrl'
});
}]);
Index:
<body ng-controller="mainCtrl">
<main-menu></main-menu>
<div class="container">
<div ui-view></div>
</div>
</body>
This works when I use the standard router, but not with the UI-router. Does anyone have any idea of what I am doing wrong?

It seems you have an issue w/the order you declare things. For you to declare the module "sm-web" you need to do this:
angular.module('sm-web', ['ui.router']);
Note that the presence of that 2nd array argument is what tells Angular that you're declaring the module (eg. creating a new module). When you leave that 2nd argument out, you're retrieving the module you previously declared.
So with that in mind, look at how it all is coming together in your code:
To declare the controller, you retrieve the module "sm-web" (by leaving off the 2nd array arg).
When configuring the router states, you declare a new module "sm-web". But note that immediately after you declare this new module, you try to register a state with the controller named "mainCtrl" -- but that doesn't exist yet.
You need to create the module somewhere before doing all of the above. After creating the module, then register the controller on the module. Finally, with the controller defined, then you can register the state that uses the controller.
There's too many ways to solve this ordering problem, so I'm not going to suggest anything further. It depends on what files the code lives in and the order you load those files in index.html.

In order to avoid your problem change your code by the following code:
// mainCtrl.js
angular.module("sm-web")
.controller('mainCtrl',['$scope',
function($scope) {
...
}]);

Angular and Rails

I was following a tutorial on implementation of angular and rails and I ran into problems performing data binding. I followed the tutorial perfectly but I hit a stumbling block I cannot solve. I am trying to display the value of foo in public/templates/home.html.
Here is my code:
public/templates/home.html
Value of "foo": {{ foo }}
app/assets/angular/controllers/HomeCtrl.js.coffee
#restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
$scope.foo = 'bar'
]
app/assets/javascripts/main.js.coffee
#restauranteur = angular.module('restauranteur', [])
#restauranteur.config(['$routeProvider', ($routeProvider) ->
$routeProvider.
otherwise({
templateUrl: '../templates/home.html',
controller: 'HomeCtrl'
})
])
app/assets/javascripts/angular/controllers/HomeCtrl.js.coffee
#restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
]

The tutorial I was following incorrectly told me to create 2 controllers with the same name. Once I deleted the controller app/assets/angular/controllers/HomeCtrl.js.coffee I was good to go.

Check and see if main.js.cofee file is included, in your chrome console under sources tab. I also had the same issue. This issue comes when you do //=require ./angular or something like that. If you want the file to get included, then just paste it under app/assets/angular directory and after that you might have to shift your angular directory inside app/assets/javascript directory.

$routeParams in a controller for index.html

I have an application that only uses an index with a controller main.js. I want the content to be defined by the URL, so I want to use $routeParams in the controller. My problem is that it turns up empty.
This is in my app.js
.config(function ($routeProvider) {
$routeProvider
.when('/:guid', {
templateUrl: '/index.html',
controller: 'MyCollectionUnitCtrl'
})
.otherwise({
redirectTo: '/'
});
});
The controller:
.controller('MyCollectionUnitCtrl',
function ($scope, $location, $routeParams) {
console.log($routeParams.guid); // Undefined
}
I've doubled checked that the module-names are the same.
The problem is that none of the code from the controller runs. I tested this by adding a console.log at the top. Index is not even a template, as I use no partials. I can't find anything about routing when only using one view, so here's where I'm stuck.
It doesn't work when I just define the controller with ng-controller neither.
Ideas? Something I'm missing? Is this a stupid question that's easily explained by documentation? I appreciate all comment, answers and feedback you can give me.
Thank you!
EDIT:
I've also tried to define ng-controller in the index.html, and then only have controller in the routingConfig, but that did not work either.
EDIT2: Plunker

Its hard to find out actual problem with your code snippet, but i think you are missing ngRoute module.
Add angular-route.js script in your html and add ngRoute dependency in your module.