This code works; the getData() function is invoked:
var app = angular.module('POC', []);
app.controller('POCCtrl', ['$scope','$timeout', function ($scope, $timeout) {
<snip>
$timeout(function () {
$scope.getData()
}, 250, $scope);
]);
But the code below , which references localStorageService, causes a native error in IE when I try to run and debug the page. The getData() function is never invoked. What am I missing? Does the local storage service have to be included in the module too?
var app = angular.module('POC', []);
app.controller('POCCtrl', ['$scope','$timeout', 'localStorageService',
function ($scope, $timeout, localStorageService) {
$timeout(function () {
$scope.getData()
}, 250, $scope);
]);
use
app.controller('POCCtrl',
function ($scope, $timeout, localStorageService) {
);
I don't know why but the controller just doesn't take localStorageService in the way you are using, I had the same error today. See my question (I am myself looking for an explanation though)
Error in angular-js while using angular-local-storage
Related
I am having an error on this code. I don't know why I am using angularjs 1.7.x version
$(document).ready(function () {
$('#signupBtn-spinner').hide();
var app = angular.module('myApp', []);
$('#signupBtn').click(signup);
function signup() {
app.controller('signupController', ['$scope', '$http', function ($scope, $http) {
alert('hello')
}]);
}
})
I strongly recommend you to avoid to use jquery with Angular/js
If you want to implement signup/login logic, suggest you to use ui-router. Some example.
Also please read this great Josh David Miller's answer “Thinking in AngularJS” if I have a jQuery background
About your problem:
You get this error from ng-app.
Put var app = angular.module('myApp', []); out of $(document).ready
Angularjs is loaded and it does not see any module because it is still not ready.
var app = angular.module('myApp', []);
$(document).ready(function () {
$('#signupBtn-spinner').hide();
$('#signupBtn').click(signup);
function signup() {
app.controller('signupController', ['$scope', '$http', function ($scope, $http) {
alert('hello')
}]);
}
})
I'm probably missing something obvious here, but I'm out of ideas, so:
I have the following code:
app.run(function ($rootScope, $location, $anchorScroll, $stateParams, $timeout, $anchorScrollProvider) {
$rootScope.$on('$stateChangeStart',
function(newRoute, oldRoute) {
$timeout(function () {
$anchorScrollProvider.disableAutoScrolling();
$location.hash($stateParams.scrollTo);
$anchorScroll();
},
100);
});
});
I added the $anchorScrollProvider code today, and I'm getting the following error:
Error: [$injector:unpr] Unknown provider: anchorScrollProviderProvider <- anchorScrollProvider
Reading the documentation, it looks like $anchorScrollProvider is part of the base ng modules, which to me means the above should work, but why doesn't it?
The anchorScrollProvider can be injected in the config phase for calling the disableAutoScrolling function behavior.
anchorScrollProvider is part of the built-in ng-modules. Use $anchorScrollProvider to disable automatic scrolling whenever $location.hash() changes.
Some of the methods are related to the providers in configuration phase and should be invoked during the configuration of the app.
During the config phase, the providers have been registered but not run yet.
app.config(function ( $anchorScrollProvider) {
$anchorScrollProvider.disableAutoScrolling();
})
The rest of the code can be done in the run method:
app.run(function ($rootScope, $location, $anchorScroll, $stateParams, $timeout) {
$rootScope.$on('$stateChangeStart',
function(newRoute, oldRoute) {
$timeout(function () {
$location.hash($stateParams.scrollTo);
$anchorScroll();
},
100);
});
});
Just wondering if there's difference between:
angular.module('app', [])
.controller('myctrl', ['$scope', 'customService',
function($scope, customService) {
// use customService
}
]);
and using $injector
angular.module('app', [])
.controller('myctrl', ['$scope', '$injector',
function($scope, $injector) {
// get customService via injector and use it
$injector.get('customService');
}
]);
Sometimes I need to inject quite a few dependencies and my parameter list ends up to be lengthy. That's why I'm thinking the latter approach may be better for my scenario.
Does the difference affect testing or minification or any other reason?
You are on the right track. Look at John Papa's Style Guide. You will do the injection before the controller function.
/* recommended */
angular
.module('app')
.controller('Dashboard', Dashboard);
Dashboard.$inject = ['$location', '$routeParams', 'common', 'dataservice'];
function Dashboard($location, $routeParams, common, dataservice) {
}
Basically there is not much different, until you first encounter your circular dependency error while loading your module.
Simple Fiddle that demonstrates circular dependency.
Code (from fiddle):
angular.module('app', [])
.service('serviceA', function (serviceB) {
return {};
})
.service('serviceB', function (serviceA) {
return {};
})
.controller('myCtrl', function (serviceA, serviceB) {
});
Using $injector helps prevent that scenario because when you use it inside the Controller/Factory/Service/etc instead of injecting the first way, you are delaying the dependency and therefore solving the problem.
And a simple Fiddle that demonstrates how that problem is solved.
Code (from fiddle):
angular.module('app', [])
.service('serviceA', function (serviceB) {
return {
test: "it works!"
};
})
.service('serviceB', function ($injector) {
return {
test: function() {
var serviceA = $injector.get("serviceA");
return serviceA.test;
}
};
})
.controller('myCtrl', function ($scope, serviceA, serviceB) {
$scope.test = serviceB.test();
});
I'm using an interceptor to add JWT tokens to my http calls. My code works fine like this:
angular
.module("jwtKickStart")
.factory("authInterceptorService", authInterceptorService);
authInterceptorService.$inject = ["$injector", "$q", "$timeout"];
function authInterceptorService($injector, $q, $timeout) {
var $state, loginModal, $http;
//...
But if I wrap that in an IIFE, then I get an Unknown Provider error:
(function () {
"use strict";
angular
.module("jwtKickStart")
.factory("authInterceptorService", authInterceptorService);
authInterceptorService.$inject = ["$injector", "$q", "$timeout"];
function authInterceptorService($injector, $q, $timeout) {
var $state, loginModal, $http;
//...
Am I not allowed to use the IIFE?
EDIT: here are some more details
The error message is this one: http://errors.angularjs.org/1.3.8/$injector/unpr?p0=authInterceptorServiceProvider%20%3C-%20authInterceptorService%20%3C-%20%24http%20%3C-%20%24templateFactory%20%3C-%20%24view%20%3C-%20%24state
The source code is available here:
https://github.com/capesean/JWTKickStart/tree/master/JWTKickStart.APP/app
try to inject like this :
(function () {
"use strict";
angular
.module("jwtKickStart")
.factory("authInterceptorService",["$injector","$q","$timeout" authInterceptorService]);
function authInterceptorService($injector, $q, $timeout) {
// your code
}
I'm testing Angular-translate with angular-traslate-partial-loader and it is not populating the page with the default translation on page load.
here is a plunkr of the problem recreated
app.controller('MainCtrl', ['$scope', '$translate', '$translatePartialLoader',
function($scope, $translate, $translatePartialLoader) {
$translatePartialLoader.addPart('test');
$translate.refresh();
$scope.dotranslate = function() {
$translate.refresh();
};
}
]);
http://plnkr.co/edit/Vts9CW4VoJsXoSdllFsq?p=preview
I added a refresh button to show that the $translate.refresh() works after page load.
What am i missing?
I've never used $translate so I'm not sure exactly what the problem is, but you may be changing a value too late in the digest cycle for the refresh to catch it.
You can use $scope.$evalAsync to fix this. See the angular documentation here: https://docs.angularjs.org/api/ng/type/$rootScope.Scope
Here is an example of your app.js with the change:
var app = angular.module('plunker', ['pascalprecht.translate']);
app.config(function run($translateProvider, $translatePartialLoaderProvider) {
$translateProvider.useLoader('$translatePartialLoader', {
urlTemplate: 'translation-{lang}-{part}.json'
});
$translateProvider.preferredLanguage('fr-FR');
});
app.controller('MainCtrl', ['$scope', '$translate', '$translatePartialLoader',
function($scope, $translate, $translatePartialLoader) {
$translatePartialLoader.addPart('test');
//I wrapped your refresh in the eval async function
$scope.$evalAsync(function() {
$translate.refresh();
});
$scope.dotranslate = function() {
$translate.refresh();
};
}
]);