My app is working correctly, but AS SOON AS I add $stateParams in the controller I'm get this error:
angular.js:14791 Error: [$injector:unpr] Unknown provider: $stateParamsProvider <- $stateParams <- ClienteViniCtrl
This is from: app.js
.when('/clienti/:id_cliente', {
templateUrl: 'views/cliente-vini.html',
controller: 'ClienteViniCtrl'
})
This is from: controller.js
.controller('ClienteViniCtrl', function($scope, $stateParams, Vini){
Vini.getWines($stateParams.id_cliente).then(function (result) {
$scope.vini = result;
})
What's the problem?
Do you have added angular-ui-router.js at your project?
var myApp = angular.module('myApp', ['ui.router']);
Related
I'm learning Angular#1.6.4, I try to do a routing with $routeParams.
(() => {
'use strict'
config.$inject = ['$routeProvider','$locationProvider', '$routeParams']
function config ($routeProvider, $locationProvider, $routeParams) {
$routeProvider
.when('/:category', {
template : `<star-wars-component category="'${$routeParams.category}'"></star-wars-component>`
})
.otherwise({
redirectTo : '/'
})
$locationProvider.html5Mode(true)
}
angular
.module('starWarsApp')
.config(config)
})()
It goes perfectly until I inject $routeParams, then angular throw me this :
Error: $injector:unpr Unknown Provider
Unknown provider: $routeParams
I tried to fix it but I don't really understand why angular throw that error if I inject $routeParams and I'm using ngRoute.
i'm trying to use the $state service to load a particular state i defined. The problem is that i'm getting all kind of errors when trying to do it. I've read about the circular dependencies and also tried the methods provided in other threads of stackoverflow like using:
$injector.get($state)
But it also fails, i'm getting unknown provider $state error. Hope someone can help me...
this is my code:
'use strict';
angular.module("home", ['ui.router', 'home.controllers', 'urlLanguageStorage', 'pascalprecht.translate'])
.config(['$stateProvider', '$translateProvider', '$state',
function($stateProvider, $translateProvider, $state){
$translateProvider.useUrlLoader("home/mensajes");
$translateProvider.useStorage("UrlLanguageStorage");
$translateProvider.preferredLanguage("euk");
$translateProvider.fallbackLanguage("en");
$stateProvider
.state("introduccion", {
url : "/prueba",
templateUrl : "resources/js/home/views/introduccion.html",
controller : "HomeController"
});
$state.go('introduccion');
}]);
'use strict';
angular.module("home.controllers", ['home.services'])
.controller('HomeController', ['$scope', 'HomeService', function($scope, HomeService) {
probar();
function probar(){
$scope.texto = HomeService.prueba().get();
}
}]);
'use strict';
angular.module('home.services',['ngResource'])
.factory('HomeService',function($resource){
return {
prueba: function() {
return $resource('http://192.168.11.6:8080/web/home/prueba');
}
};
});
'use strict';
angular.module('urlLanguageStorage',['ngResource'])
.factory('UrlLanguageStorage', ['$location',function($location){
return {
put : function (name, value) {},
get : function (name) {
return $location.search()['lang']
}
};
}]);
The error i'm getting is the following one:
Failed to instantiate module home due to: Error: [$injector:unpr]
http://errors.angularjs.org/1.5.5/$injector/unpr?p0=%24state
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:6:412
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:43:84
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:40:344)
at e (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:41:78)
at Object.invoke (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:41:163)
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:39:321)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:39:445
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js:39:222
You confused with $stateProvider and $state.
$stateProvider is a Provider, and $state is a Service. They are not the same. Short answer: you use $stateProvider at config phase, and use $stateProvider in your controller.
Your error happens because you injected $state service in your .config, which is wrong:
.config(['$stateProvider', '$translateProvider', '$state'
Remove the $state and you are okay:
angular.module("home", ['ui.router', 'home.controllers', 'urlLanguageStorage', 'pascalprecht.translate'])
//take out $state from config phase
.config(['$stateProvider', '$translateProvider', '$state',
function($stateProvider, $translateProvider, $state) {
$translateProvider.useUrlLoader("home/mensajes");
$translateProvider.useStorage("UrlLanguageStorage");
$translateProvider.preferredLanguage("euk");
$translateProvider.fallbackLanguage("en");
$stateProvider
.state("introduccion", {
url: "/prueba",
templateUrl: "resources/js/home/views/introduccion.html",
controller: "HomeController"
});
//remove this line, set this in controller
//$state.go('introduccion');
}
]);
What is the problem with the following code?
(function() {
angular
.module('myapp')
.config(ConfigureProvider);
ConfigureProvider.$inject = ['$routeProvider'];
function ConfigureProvider($routeProvider){
$routeProvider.
when('/',{
templateUrl:'main.html',
controller:'GalleryController'
}).
when('/1',{
templateUrl:'favourites.html',
controller:'FavouritesController'
})
}
})();
I am getting the following error: Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.5.3/$injector/nomod?p0=myapp
You have not defined your module
angular.module('myapp',[])
and then
angular
.module('myapp')
.config(ConfigureProvider);
ConfigureProvider.$inject = ['$routeProvider'];
function ConfigureProvider($routeProvider){
$routeProvider.
when('/',{
templateUrl:'main.html',
controller:'GalleryController'
}).
when('/1',{
templateUrl:'favourites.html',
controller:'FavouritesController'
})
}
I am using the angular seed project and try to use ui-router for user login based routing.
I get following error in the console:
Uncaught Error: [$injector:modulerr] Failed to instantiate module MyApp due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router.state due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router.router due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router.util due to:
TypeError: forEach is not a function
at new $UrlMatcherFactory
...
My code in app.js is:
'use strict';
// Declare app level module which depends on views, and components
angular
.module('MyApp', [
'ui.router'
])
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state("root", {
url: "",
template: "<section ui-view></section>",
controller: function($state, user) {
if ($state.is("root")) $state.go(user.loggedIn ? "main" : "login");
}
})
.state("login", {
templateUrl: "login/login.html",
controller: "LoginCtrl"
})
.state("main", {
templateUrl: "main/main.html",
controller: "MainCtrl"
});
}])
.controller("MainCtrl", function($scope, user, $state) {
$scope.user = user;
$scope.logout = function() {
user.loggedIn = false;
$state.go("root");
}
})
.controller("LoginCtrl", function($scope, user, $state) {
$scope.login = function() {
user.loggedIn = true;
$state.go("root");
}
});
I didn't find anything with Google and hope someone can help me here.
Best regards
Probably a solution here ?
See this link : https://github.com/ded/script.js/issues/86
I'm using Jasmine for testing AngularJS controller and I'm struggling to find a way of injecting $routeProvider into the module.
Here's my controller:
var app = angular.module('testApp', []);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/smth', {
templateUrl: 'smth.html',
controller: 'testController'
});
}]);
app.controller('testController', ['$scope', function ($scope) {
$scope.data = 'GG';
}]);
Here's my test:
describe('Test Suite', function () {
var myScope, ctrl;
beforeEach(module('testApp'));
beforeEach(inject(function ($controller, $rootScope) {
myScope = $rootScope.$new();
ctrl = $controller('testController', {
$scope: myScope
});
}));
it('data is GG', function () {
expect(myScope.data).toEqual('GG');
});
});
When I try to run it, I receive a following error:
Error: [$injector:modulerr] Failed to instantiate module testApp due to:
Error: [$injector:unpr] Unknown provider: $routeProvider
But if I try to run again - I get this:
TypeError: 'undefined' is not an object (evaluating 'myScope.data')
Errors keep alternating if tests are run again. I'm using Visual Studio 2013 and Resharper 8 to run the Jasmine tests.
Add the angular-route bower component to your project and then inject the ngRoute into your module like this
var app = angular.module('testApp', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/smth', {
templateUrl: 'smth.html',
controller: 'testController'
});
}]);
app.controller('testController', ['$scope', function ($scope) {
$scope.data = 'GG';
}]);
First make sure you have included angular-route.min.js.
This module has been separated from angularJs library, so you have will have to include it separately
then make sure you have added dependency for your module to ngRoute
e.g. angular.module('testApp', ['ngRoute']);
then in the test make sure you inject $route so its available in your tests as well