I am trying to access $routeProvider in one of my controller in order to add a route.
How do I do that?
function Cont($scope,$routeProvider) {
};
This doesn't work for me; I am getting: Error: Unknown provider: $routeProviderProvider <- $routeProvider
$routeProvider and other providers can only be injected to a modules config block. What is it that you want to do with the $routeProvider inside a controller?
In the controller, $route is accessible but $routeProvider is not. Maybe you can just copy the function out, for example, the 'when' and 'pathRegExp'
See jsfiddle:
http://jsfiddle.net/5FUQa/1/
function addRoute(path, route) {
//slightly modified 'when' function in angular-route.js
}
addRoute('/dynamic', {
templateUrl: 'dynamic.tpl.html'
});
Also see: How to defer routes definition in Angular.js?
Related
There are a ton of examples of using the newer angular directives like ng-blur, ng-focus, form validation, etc. They all work great in a single page, or in plinkr, jsfiddle, etc. with the exception of the people who try to define the function on the global namespace, that mistake is WELL documented.
However, I was having a different problem.
I was using an example from Scotch.io. This one works great...until you introduce it into an SPA that is using angular-route :(
After many hours of fighting with the error 'Argument 'mainController' is not a function, got undefined', I found the answer in a comment from Hajder Rabiee.Thanks Hadjer, Love you man!
Hajder left this comment and in it, he says:
If you're using routes (high probability) and your config has a reference to a controller in a module that's not declared as dependency then initialisation might fail too.
E.g assuming you've configured ngRoute for your app, like
angular.module('yourModule',['ngRoute'])
.config(function($routeProvider, $httpProvider) { ... });
Be careful in the block that declares the routes,
.when('/resourcePath', {
templateUrl: 'resource.html',
controller: 'secondModuleController' //lives in secondModule
});
Declare secondModule as a dependency after 'ngRoute' should resolve the issue. I know I had this problem.
Even with this help it took me a minute to get it working, so I thought I would share my sample code here to help the next poor bastard that gets stuck on this.
First, in the place where i declare my routes:
var app = angular.module('sporkApp', ['ngRoute','validationApp']);
app.config(function ($routeProvider) {
$routeProvider
.when('/home',
{
controller: 'HomeController',
templateUrl: 'home/home.template.html'
})
.when('/tags',
{
controller: 'TagsController',
templateUrl: 'tags/tags.template.html'
})
.when('/test',
{
controller: 'mainController',
templateUrl: 'test/test.template.html'
})
.otherwise({ redirectTo: '/home' });
});
Then, you need to add your controller code somewhere, where it will get loaded in your shell page:
// create angular app
var validationApp = angular.module('validationApp', []);
// create angular controller
validationApp.controller('mainController', function($scope) {
// function to submit the form after all validation has occurred
$scope.submitForm = function() {
// check to make sure the form is completely valid
if ($scope.userForm.$valid) {
alert('our form is amazing');
}
};
});
Finally, you need to add the corresponding ng-app and ng-controller to some page element that wraps the controls you want to validate. I put the following inside of a div tag:
<div ng-app="validationApp" ng-controller="mainController">
I want to have a url with two different patterns for instance:
http://127.0.0.1:27469/views/Home.html#/forcast
and
http://127.0.0.1:27469/views/Home.html#/forcast/7
As you can see, I in the second uri i send a parameter to server too. To do this, I have made this routing
app.config(function($routeProvider){
$routeProvider
.when('/forcast',{
templateUrl:'forcast.html',
controller:'forcastController'
});
when('/forcast/:days',{
templateUrl:'forcast.html',
controller:'forcastController'
})
});
But i got an error like:
Error: $injector:modulerr Module Error
What is wrong with this code?
You are not properly chaining the function calls. You are closing out the first .when() with a semi-colon. Additionally, you are missing the period before the second when(). You will also run into into an issue where all of your requests will fall into the route without a parameter, switch the order around for the routes so that when a parameter is provided, it will land in the correct route.
app.config(function($routeProvider){
$routeProvider
.when('/forcast/:days',{
templateUrl:'forcast.html',
controller:'forcastController'
})
.when('/forcast',{
templateUrl:'forcast.html',
controller:'forcastController'
});
});
Another recommendation, rather than declaring 2 routes here, you can specify days as an optional parameter:
app.config(function($routeProvider){
$routeProvider
.when('/forcast/:days?', {
templateUrl: 'forcast.html',
controller: 'forcastController'
});
});
The problem is with your syntax. You have a semicolon after the first when, should be a period. Like this:
app.config(function($routeProvider){
$routeProvider
.when('/forcast',{
templateUrl:'forcast.html',
controller:'forcastController'
})
.when('/forcast/:days',{
templateUrl:'forcast.html',
controller:'forcastController'
});
});
This kind of error appears when you fail to load some module!
Make sure you add ng-route.js to your html:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.min.js">
nHello,
I am trying to use parameters in my router as follows :
my url call in my html file:
Edit
And my router :
packApp
.config(['$routeProvider', '$httpProvider', '$translateProvider', '$stateParams',
function ($routeProvider, $httpProvider, $translateProvider, $stateParams) {
$routeProvider
.when('/itemlist/:listId', {
templateUrl: 'views/itemlists.html',
controller: 'ItemlistController',
resolve:{
resolvedHikelist: ['Hikelist', function (Hikelist,$stateParams) {
return Itemlist.get({id: $stateParams.listId});
}]
}
})
}]);
But when i run my app, I have this error :
Error: [$injector:unpr] Unknown provider: $stateParams
Do you know where it can come from?
Thank you.
You have included or using both ui-router and angularjs standard $route service which are incompatible as both do the same thing. You would have to choose one of them.
See documentation on ui-router to understand how routes are setup if you go the ui-router way.
Else look at $routeProvider documentation and use $routeParams instead of $stateParams
Update: Based on the comments, the issue is that config method cannot be injected with services but only provider, so you cannot inject $routeParams in .config method so remove from there.
If you want to inject routeparams use
resolvedHikelist: ['Hikelist','$routeParams', function (Hikelist,$routeParams) {
return Itemlist.get({id: $routeParams.listId});
}]
If you use $stateParams in ItemlistController don't forget to inject it to that controller as well.
I'm trying to apply routing to my Typescript-based Angular application. The app should get $routeProvider injected with a code like this:
var app = angular.module("MyApp", ["ui.bootstrap"]);
// app.service's and controller's here...
app.config(["$routeProvider",
function ($routeProvider: ng.IRouteProvider) {
$routeProvider
.when("/", {
controller: MyApp.Controllers.ItemsController,
templateUrl: "/Items.html"
})
// ... other routes ...
.otherwise({
redirectTo: "/"
});
}]);
Anyway, when I start the application I get an exception from angular telling me that it cannot find the provider named $routeProviderProvider:
Error: Unknown provider: $routeProviderProvider <- $routeProvider at Error (<anonymous>)
at http://.../Scripts/angular.js:2734:15
at Object.getService [as get] (http://.../Scripts/angular.js:2862:39)
at http://.../Scripts/angular.js:2739:45
at getService (http://.../Scripts/angular.js:2862:39)
at invoke (http://.../Scripts/angular.js:2880:13)
at Object.instantiate (http://.../Scripts/angular.js:2914:23)
at $get (http://.../Scripts/angular.js:4805:24)
at $get.i (http://.../Scripts/angular.js:4384:17)
at forEach (http://.../Scripts/angular.js:137:20) undefined angular.js:5754
By peeking at the angular source (1.0.7), I can tell this comes from the fact that at line 2737 where the instanceInjector is created, its name comes from appending a variable named providerSuffix, whose value is "Provider", to the requested provider name (here "$routeProvider"). Thus, this results in an exception. Yet, the correct name should right be "$routeProvider"; if I change it into just "$route" in my code, this error disappears as expected, as now the built name is "$routeProvider"; but I get another exception telling me that the service "$route" is not defined. So, what should I do to resolve this?
Updated answer:
Like I mentioned in the comments below
e.g. it would be invalid in a controller. FYI The section that you are talking about "ProviderProvider" is just for logging, not how it is internally searching for the dependency
And found in your code:
export class MainController {
static $inject = ["$scope", "$routeProvider"];
constructor(private $scope: IMainScope,
private $routeProvider: ng.IRouteProvider) {
}
}
you cannot have routeProvider in your controllers. Your app.config is not what is giving you the error. Change your controller to and the error goes away:
export class MainController {
static $inject = ["$scope"];
constructor(private $scope: IMainScope) {
}
}
Additionally I recommend not implementing your own scope when using controllers. Here's why: http://www.youtube.com/watch?v=WdtVn_8K17E&feature=youtu.be&t=5m36s
Hope you enjoy angular + typescript as much as I do :)
I am still very new to AngularJS and am working through setting up my first application. I would like to be able to do the following:
angular.module('App.controllers', [])
.controller('home', function () {
$scope.property = true;
}]);
angular.module('App', ['App.controllers'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {templateUrl: 'partials/home.html', controller: home});
}]);
Using this setup the following error is generated:
Uncaught ReferenceError: home is not defined from App
My question is: How can I register controllers using angular.module.controller() (or $controllerProvider.register() directly) and use the registered controller elsewhere in my app.
My motivation: I would like to avoid using either global constructor functions as my controllers (as most of the examples on angularjs.org use) or complex namespacing. If I can register and use controllers as single variable names (that are not then put in the global scope) that would be ideal.
Try using a string identifier.
routeProvider.when('/', {templateUrl: 'partials/home.html', controller: 'home'});
When you use a literal, it is looking for a variable called home, but that doesn't exist in this case.
If you are getting controller is not defined error you have to write your controller name within the quotes.
or define your controller like this
function controllerName()
{
//your code here
}
refer this: Uncaught ReferenceError:Controller is not defined in AngularJS