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.
Related
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']);
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'
})
}
Please consider the this code where the routeProvider is needed to inject page(n).html in ng-view.
In addition to the console error:
unknown provider: $routeProviderProvider <- $routeProvider
The argument to function routeIt is the name of the page to navigate to, How can I mix a conditional switch with routeProvider.when in order to call the page matching the argument in the most efficient manner? Thanks
(function () {
'use strict';
angular
.module('appModule')
.controller('MainMenuCtrl', ['$scope', '$http', 'TogglerFactory', '$routeProvider', MainMenuCtrl]);
function MainMenuCtrl($scope, $http, Toggler, routeProvider) {
$http.get('models/mainMenu.json').then(
function (response) {
$scope.menuItems = response.data;
},
function (error) {
alert("http error");
}
)
function routeIt (page) {
routeProvider
.when('/page1', {
url: "/page1",
templateUrl: 'views/page1.html',
controller: 'Page1Ctrl'
})
.when('/page2', {
url: "/page2",
templateUrl: 'views/page2.html',
controller: 'Page2Ctrl'
})
}
$scope.itemClicked = function (item){
Toggler.menuToggle();
routeIt(item);
}
}
})();
Service providers aren't available for injection in run phase (i.e. anywhere but provider services and config blocks). It is possible to make route provider injectable and configure it after config phase,
app.config(function ($provide, $routeProvider) {
$provide.value('$routeProvider', $routeProvider);
});
And controllers aren't the best places to implement any logic (e.g. route hot-plug).
Ok you're using your routeProvider wrong you need to configure your routes inside .config blocks
angular.module('myApp', [])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/page1', {
url: "/page1",
templateUrl: 'views/page1.html',
controller: 'Page1Ctrl'
}
})
If you want to change the url from your controller use $location.path('/page1'); inside your controller.
File inclusion in the index.html is
<script src="js/app.js"></script>
<script src="js/providers/jokeService.js"></script>
<script src="js/controllers/mainController.js"></script>
app.js is the main declaration of the module, and the route declaration with accompanying controller and template:
angular.module('jsekoApp', [ 'ui', 'ngRoute' ])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainController'
})
.otherwise({
redirectTo: '/'
})
});
jokeService.js is factory Provider
angular.module('jsekoApp')
.factory('JokeService', function($resource) {
return $resource('data.json');
});
and the mainController.js is a controller, with the jokeService injected into it:
angular.module('jsekoApp')
.controller('MainController', function MainController($scope, JokeService) {
console.log(JokeService);
JokeService.get(function(data){
$scope.jokes = data;
});
$scope.jokeTypeList = function(){...};
});
My understanding is that all 3 (app.js, controller, and factoryProvider) should be declared in the html.
Why am I getting the unknown Provider error:
Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- JokeService
http://errors.angularjs.org/1.2.15/$injector/unpr?p0=%24resourceProvider%20%3C-%20%24resource%20%3C-%20JokeService
Also, anyway to get the stack to show where the error is coming from? it just shows the errors in the angular.js file, but which 'JokeService' are they referring to? This might have helped me debug this on my own.
AngularJS is complaining about the missing $resource service. You forgot to include the angular-resource.js file, and to make your main module depend on the ngResource module, as explained in the documentation.