I am implementing $firebaseObject in my code. However, when I include $firebaseObject as a dependency in my controller (or service), I immediately receive the following Angular error:
Unknown provider:
My controller:
angular.module('myapp.controllers-account', [])
.controller('AccountCtrl',
function($firebaseObject, $state, $anchorScroll, $location, $rootScope, $stateParams,
OtherDependencies) {
var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com");
// download physicsmarie's profile data into a local object
// all server changes are applied in realtime
$scope.profile = $firebaseObject(ref.child('profiles').child('phsyicsmarie'));
})
Removing the dependency, fixes the issue. What is going on?
Note: I have put firebase as a dependency in my module, as I am using it on other places and it works fine.
You need to register firebase as a module with angular app.
angular.module('myapp.controllers-account', ["firebase"])
Refrences
Related
I am attempting to upgrade a large angular.js app (1.5.9) to the latest version of Angular.
I am in the process of turning the app into a hybrid AngularJs/Angular app and have reached this step in the guide:
https://angular.io/guide/upgrade#bootstrapping-hybrid-applications
So far I have changed from using gulp to webpack 4 and the app is working the same as before.
The issue I am having is, when I switch from using the ng-app directive in my index.html to bootstrapping in Javascript the app fails to start, throwing this error:
Uncaught Error: [$injector:unpr] Unknown provider: StateServiceProvider <- StateService
This is coming from my app.js file which looks like this:
angular.module('app-engine', [
'app-engine.state',
'app-engine.api',
// other modules
])
.factory('bestInterceptor', bestInterceptor)
// other configs which aren't throwing Unknown provider errors
.run(startUp);
bestInterceptor.$inject = ['StateBootstrappingService'];
function bestInterceptor(StateBootstrappingService) {
return {
request: config => {
if (!StateBootstrappingService.isBestSsoOn()) {
config.headers['x-impersonated-user'] = StateBootstrappingService.getUserName();
}
return config;
}
};
}
startUp.$inject = ['$rootScope', '$state', '$timeout', 'StateService']
function startUp($rootScope, $state, $timeout, StateService) {
// start up code
}
There is a separate app.modules.js file, which defines the other modules in the app.
Including:
angular.module('app-engine.state', ['rx', 'app-engine.api']);
The service which is mentioned in the Unknown provider error looks like this:
(function() {
'use strict';
angular
.module('app-engine.state')
.factory('StateService', StateService);
StateService.$inject = [
'$state',
'$log',
'rx',
// a few other services that exist in the app
];
function StateService(
// all the above in $inject
) {
// service code
}
})();
As the guide instructs, I am removing the ng-app="app-engine" from my index.html and adding it into the JavaScript instead. I've added it at the bottom on my app.modules.js file.
angular.bootstrap(document.body, ['app-engine']);
After this change is when the Unknown provider error is thrown. I have confirmed the source is my startUp function in app.js. I have tried including all the modules in the app in the 'app-engine' requires array, which did not change anything. It's interesting that the bestInterceptor function is not throwing any errors, despite also using a service (The StateBootstrappingService is being set up in the same way as the StateService).
Is there anything obvious I am doing wrong? Or anyone have any ideas how to solve this?
Try this:
angular.element(document).ready(function () {
angular.bootstrap(document.body, ['app-engine'])
})
For me this was necessary because the other sub components (providers and services) had not yet been added to the module yet. Running the it on "document.ready()" gives those items an opportunity to attach before trying to manually bootstrap (because they cannot be added later when manually bootstrapping)
I don't love the use of document.ready() so I'm still looking for a more offical way to do this
I don't know why I am getting this error.
The error I am getting is Error: [ng:areq] Argument 'PreviewController' is not a function, got undefined.
Can someone help me out with this?
Also is there any other way to inject services in a controller?
My code is as follows:
(function() {
'use strict';
angular
.module('MyModule')
.controller('PreviewController' ['$scope','Service1','Service2',
function($scope, $http) {
$http.get("https://api.myjson.com/bins/30e2a")
.success(function(response) {
//Dummy data taken from JSON file
$scope.firstName = response.firstName;
$scope.lastName = response.lastName;
$scope.dateAdded = response.dateAdded;
});
//Functions have been defined. Functionality to be added.
$scope.cancelAndBack = function() {
window.history.back();
};
}]);
}());
You are defining you module incorrectly.
`angular.module('MyModule')`
Is looking for an already initialised module called 'MyModule'.
If you are creating a module from scratch you need to empty array. This would be more module dependencies.
`angular.module('MyModule', [])`
This is how angular knows the difference between, 'create an app' and 'get me an app'.
Finally services. Your using angulars array notation. That is so you can minify your javascript.
angularjs injection system works by name, that's how it can find the dependencies your require, that's also why you can list them in any order you like. However minifying your code changes your variable names and so breaks angular's injection.
The solution is to provide an array of strings telling angular the services you wish to inject and the order they are injected in.
So your array values and properties passed into your controller function must match.
Correct:
.controller('test', ["$scope", "$http", "myService", function( $scope, $http, myService){}]);
Incorrect: (myService won't be defined as its missing from the array)
.controller('test', ["$scope", "$http", function( $scope, $http, myService){}]);
I am trying to include ngCookies in a project. The angular cookies library is included in my index.html after the ionic.bundle.
I can see on the network tab of the developer tools that it is actually loading. Angular doesn't show any error when loading the page, as it usually does when a module is missing. The problem is that, when in my code I try to access the functions of the $cookies service, the $cookies variable is actually pointing to an empty object.
Here are some relevant code snippets:
On the definition of my app.js
angular.module('myApp', [
'ionic',
'ngCookies',
'ngMessages',
'rt.eventemitter',
'myApp.views']);
On my factory:
angular.module('myApp.views')
.factory('UserStore', ['$rootScope', '$q', '$cookies', '$timeout',
function($rootScope, $q, $cookies, $timeout){
var user = {};
function setSessionId(sessionId){
console.log(">> setting sessionId to:",sessionId);
user.sessionId = sessionId;
$cookies.put('sessionId', user.sessionId);
}
return{ setSessionId:setSessionId}
}
]);
In this case, when I try to call the setSessionId method I get an error that $cookies.put is not a function since, as I mentioned above, $cookies is just an empty object.
Any Ideas?
it depends on which angular version you use!
they changed a lot in angular 1.4.. in angular 1.3 when you set a cookie you can just assign it:
$cookies.sessionId = user.sessionId;
I'm trying to make a login session persist upon a page refresh but I'm not being successful in this matter. I took a look at this solution found here which uses the $firebaseSimpleLogin service to maintain a login session.
From that solution all I've done is basically deleted his wrapper that points to the Firebase instance, replaced it with my own var ref and put it as an argument of the $firebaseSimpleLogin. I also implemented array notation since I've done it with my controllers as well.
However, this function isn't even being executed because when I run the code it throws this error:
Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.3.10/$injector/unpr?p0=%24firebaseSimpleLoginProvider%20%3C-%20%24firebaseSimpleLogin
Does anyone know why I'm getting this? I can't see anything wrong with my injections like the error is telling me.
var pieShopApp = angular.module('pieShopApp', ['ngRoute', 'ngAnimate', 'firebase']);
var ref = new Firebase ('https://pie-shop.firebaseio.com/users');
pieShopApp.run(['$rootScope', '$location', '$firebaseSimpleLogin', function($rootScope, $location, $firebaseSimpleLogin) {
$rootScope.auth = $firebaseSimpleLogin(ref);
$rootScope.auth.$getCurrentUser().then(function(user) {
if (user) {
$rootScope.currentUser = user;
console.log($rootScope.currentUser);
}
else {
$location.path('/pies/login');
}
});
}]);
I'm confused about how to create services and inject (use) them in my controllers. It seems it is very simple but I can't get my code to work. I'm stuck with this error:
Error: [$injector:unpr] Unknown provider: Flickr
I define the service:
angular.module('myApp.services', [])
.provider('Flickr', function(){
// service code
})
Include it in my app module:
var app = angular.module('myApp', [
'ngResource',
'ngRoute',
'myApp.services'
]);
and then reference it in a controller:
app.controller('FlickrCtrl', ['$scope', '$routeParams', 'Flickr', function($scope, $routeParams, Flickr){
// controller stuff
});
and reference the files at the bottom of index.html
<script src='js/app.js'></script>
<script src='js/config.js'></script>
<script src='js/services/Flickr.js'></script>
<script src='js/controllers/flickr.js'></script>
Why can't angular find the service I defined when I ask it to inject it into the controller?
When using .provider, you are creating a provider that should return a configurable singleton. In many cases, this singleton is a singleton factory, spitting back an object that has services you can use.
First, you would need to refer to it as FlickrProvider instead of Flickr when you call it to set a config.
Without seeing more of your code, I can't tell if you're returning a new Flickr from your provider, which is what you would need to do in order to use a service instance in the way I think you're trying to do.
check out: http://docs.angularjs.org/guide/providers
Basically though, in order to inject and use Flickr like you are trying to do, you would need to do something like this:
.provider('Flickr',function FlickrProvider(){
this.$get = function(){
return new Flickr()
}
})
function Flickr(){
this.doSomething: function(){
//do something or return something
}
}
If you only want to define a service, and not make it a configurable provider, then use .factory instead, which will only need Flickr to be injected in order to be used.