I hit some problems minifying my Angular code so I turned on ng-strict-di
One problem seems to reside in the way I resolve a promise on a route in my app.js config
.when('/:userId', {
templateUrl: 'views/main.html',
controller: 'MyCtrl',
resolve : {
myDependency : function(Cache, Model, $route){
return Cache.getCached( $route.current.params.userId);
}
}
})
Then I inject this resolved promise into the MyCtrl controller
angular.module('myApp')
.controller('MyCtrl',[ 'myDependency', '$scope', '$rootScope', '$timeout', function (myDependency, $scope, $rootScope, $timeout) {
etc...
However I get an error from Angular
[Error] Error: [$injector:strictdi] myDependency is not using explicit annotation and cannot be invoked in strict mode
The problem appears to be traceable to the resolve definition in app.js because I can change the name of 'myDependency' there in the resolve and the error message uses the name from there rather than the name of the dependency in myCtrl. And I am explicitly listing the name of the dependency in the myCtrl controller. The app works, but I cannot minify this code because of the problem with this error.
Follow strict-di for resolve as well. Hope this works!
resolve : {
myDependency : ['Cache', 'Model', '$route', function(Cache, Model, $route){
return Cache.getCached( $route.current.params.userId);
}
]}
I catched the same problem and #Mahesh Sapkal solution was right.
But if look at this in details then my problem was that ng-annotate does not detect correctly that function must be annotated. So I added /#ngInject/ comment and it works now!
app.config(/*#ngInject*/function ($routeProvider) {
$routeProvider
.when('/tables', {
template: templateList,
controller: 'TableListController',
resolve: {
initial: /*#ngInject*/function (tableListControllerInitial) {
return tableListControllerInitial();
}
}
})
Related
For some reason whatever i do i cannot get my data to the controller no matter what i do, i keep getting this error
Error: [$injector:unpr] Unknown provider: initDataProvider <- initData <- PackingScanController
first file
var Application = angular.module('ReporterApplication', ['ngRoute']);
Application.config(['$routeProvider', '$interpolateProvider',
function($routeProvider, $interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
$routeProvider
.when('/packing/scan.html', {
controller: 'PackingScanController',
templateUrl: 'packing/scan.html',
resolve: {
initData : function () {
return "shite";
}
}
}) etc more code
second file
Application.controller('PackingScanController', ['$scope', '$http', 'initData', function($scope, $http, initData) {
var packer = this;
$scope.packedToday = initData;
The posted code is all right, you are injecting initData properly with resolve route block. However you are probably using explicit ngController in you route template. You don't want it, and of course in this case there is no initData service available which results in error you are getting.
Solution is simple: just remove
ng-controller="PackingScanController"
from your packing/scan.html template and it will work fine.
Explicit controller binding is not needed in this case since template is already bound properly to controller instance created behind the scene by $route service, with all necessary dependencies properly injected.
I am getting unexpected results from both methods.
I have my $state configed
$stateProvider
.state('status', {
url: "/status/:payment",
controller: 'QuestCtrl',
templateUrl: "index.html"
});
And on the Controller I have:
angular.module('quest').controller('QuestCtrl',function($scope,$stateParams,$state){
console.log($stateParams.payment); // undefined
console.log($state); // Object {params: Object, current: Object, $current: extend, transition: null}
}
I already used $stateParams in other projects and it worked but now I can't figure out what is going on here..
['$scope','$stateParams','$state',
function($scope, $http, $stateParams, $state)
The names of the services don't match with the variables.
So $http is actually the $stateParams service, $stateParams is actually the $state service, and $state is undefined.
My advice: stop using this array notation, which clutters the code and is a frequent source of bugs. Instead, use ng-annotate as part of the build procedure, which will do it, correctly, for you.
As I already commented above You forgot to inject $http service
angular.module('quest').controller('QuestCtrl',
['$scope','$http','$stateParams','$state',function($scope,$http,$stateParams,$state){
console.log($stateParams); // Empty Object
console.log($stateParams.payment); // Empty Object
console.log($state); // I get the entire state, I can see that my params are there.
console.log($state.params);
}
So your parameters mismatch and it turns out you will get $state in $stateparms and $state is empty.
And $http hold $state :P
Hope it helps :)
With the ng-annotate library, the controller can be also initiated like this:
angular.module('quest')
.controller('QuestCtrl', function ($scope,$http,$stateParams,$state) {
});
In this case you are avoiding problems with the injected objects ordering. Look at: https://github.com/olov/ng-annotate
If you are building your application with Grunt, use: grunt-ng-annotate package.
Missing parameter in routes.js
My example:
.state('menu.cadastroDisplay', {
url: '/page9',
views: {
'side-menu21': {
templateUrl: 'templates/cadastroDisplay.html',
controller: 'cadastroDisplayCtrl'
}
},
params: { 'display': {} }
})
Without this params in routes the $stateParams.yourParam always returns undefined.
Call 'ngInject'
constructor($scope, $reactive, $stateParams, $state, $sce) {
'ngInject'
I have a AngularJS application and have a requirement to initialize data from a REST API before the controller initializes. I use the "resolve" in the routeProvider and also injected the relevant value in the controller in order to make this data available. The code snippets are as follows:
RouteProvider code snippet:
myApp.config(function($routeProvider) {
$routeProvider
....
.when('/account', {
templateUrl : path + 'admin/js/pages/inputs/account.html',
controller : 'mainController',
resolve: {
data: function() {
return $http.get(api_path + 'dashboard/get_accounts');
}
}
})
myApp.controller('mainController', function($scope,$http, data, $routeParams, DataService) {
...
console.log(data);
}
The console is supposed display the data by I get the following error " Error: [$injector:unpr] Unknown provider: dataProvider <- data "
Your help much appreciated.
It's because the data provider has not instantiated yet and it is instantiating the controller before the provider is ready, coming through as an undefined and unknown provider.
Try something like this that returns a promise:
myApp.config(function($routeProvider, $q) {
$routeProvider, $q
....
.when('/account', {
templateUrl : path + 'admin/js/pages/inputs/account.html',
controller : 'mainController',
resolve: {
data: function() {
return $q.all($http.get(api_path + 'dashboard/get_accounts'));
}
}
})
Now, the controller won't instantiate until the promise has resolved completely. As per the documentation for $routeProvider and how it handles promises in the resolve.
$routeProvider on Angular's website
resolve - {Object.=} - An optional map of dependencies which should be injected into the controller. If any of these dependencies are promises, the router will wait for them all to be resolved or one to be rejected before the controller is instantiated. If all the promises are resolved successfully, the values of the resolved promises are injected and $routeChangeSuccess event is fired. If any of the promises are rejected the $routeChangeError event is fired.
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 recently migrated from ui-router 0.0.1 to 0.2.0. Since the migration, ui-router fails to resolve named dependencies that needs to be injected into a view's controller. Here's the sample code which works fine with ver 0.0.1 but fails in ver 0.2.0
angular.module( 'sample.test', [
'ui.router',
'i18nService'
])
.config(function config($stateProvider) {
$stateProvider.state( 'mystate', {
url: '/mystate',
resolve: {i18n: 'i18nService'},
views: {
'main': {
controller: 'MyCtrl',
templateUrl: 'templates/my.tpl.html'
}
}
});
})
.controller('MyCtrl', ['i18n', function(i18n) {
// fails to resolve i18n
}]);
i18nService is a simple service that return a promise
angular.module('i18nService', [])
.factory('i18nService', ['$http', '$q', function($http, $q) {
var deferred = $q.defer();
$http.get('..').then(..);
return deferred.promise;
}]);
I get the error "Unknown provider: i18nProvider <- i18n" when using v0.2.0
If i change the resolve config to:
resolve: {
i18n: function(i18nService) {
return i18nService
}
},
everything works fine. Is this an expected behaviour, or am I missing some configuration?
Here's the plunker: http://plnkr.co/edit/johqGn1CgefDVKGzIt6q?p=preview
This is a bug that was fixed last month:
https://github.com/angular-ui/ui-router/commit/4cdadcf46875698aee6c3684cc32f2a0ce553c45
I don't believe it's in any currently released version, but you could either get the latest from github or make the change yourself in your js file. It's simply changing key to value in that one line (you can see it in the github commit).
A workarround is to just not change the name for now.... do
resolve :{
i18nService: 'i18nService'
}
Then inject i18nService to your controller instead of i18n. It's a bit of a hack, but it does work (it injects the resolved service not the promise).