I have included the Firebase and AngularFire js files via CDN. I have injected the AngularFire into my app and thereafter injected the $firebaseArray into my controller. Yet for some reason I am still getting the 'Firebase not defined error' in my dev console.
I have looked at the following links:
AngularFire - Firebase not defined
Firebase Error - "FireBase is not defined"
Angularfire 'Firebase' is not defined
Angularfire Uncaught ReferenceError: Firebase is not defined
and none of them addresses my situation. Am I missing something? I am including my code below:
//App
angular.module("TestApp", ['ngAnimate', 'ui.router', 'ui.bootstrap', 'firebase']);
//Controller
angular.module('TestApp')
.controller('DetailsController',['$scope', '$firebaseArray', '$http', function ($scope, $firebaseArray, $http) {
console.log($firebaseArray); // <- verified here that the injection works
var rootRef = new Firebase("https://<my-ref-url>.firebaseio.com");
//load data from firebase db
$scope.loadCommunity = function(){
$scope.hasCommunity = true;
$scope.messages = $firebaseArray(rootRef);
};
}]);
and the following is the code I included in the index.html file:
<script src="https://www.gstatic.com/firebasejs/3.0.3/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.0.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.0.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.0.3/firebase-database.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "MY API KEY HERE",
authDomain: "<my-ref-url>.firebaseapp.com",
databaseURL: "<my-ref-url>.firebaseio.com",
storageBucket: "",
};
firebase.initializeApp(config);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularFire/2.0.1/angularfire.min.js"></script>
The problem is that you are trying to get the rootRef using new Firebase("https://<my-ref-url>.firebaseio.com"); and thats from the legacy 2.x firebase sdk.
This is one of the changes of firebase 3.x. You have to do this in a slightly different way.
var rootRef = firebase.database().ref();
You can do some tests using this jsFiddle
Related
I have an angularJS app with three modules: myApp(parent/core module), services(contains all the factories and services), and controllers(contains all the controllers).
This is my app.js file
angular.module('services', []);
angular.module('controllers', []);
var app = angular.module('myApp', ['services', 'controllers']);
I read here that setting up my modules and defining dependencies in this way will allow each of my modules to access the other without having to inject the dependencies.
Here's my index.html file
<script src="/js/app.js"></script>
<script src="/js/services/testFactory.js"></script>
<script src="/js/controllers/testCtrl.js"></script>
testFactory.js file
angular.module('services').factory('testFactory', ['$rootScope', 'apiCall', function($rootScope, apiCall){
let testFactory = {};
testFactory.testFunc = function(){
console.log('testFactory.testFunc called');
}
return testFactory;
}])
testCtrl.js file
angular.module('controllers').controller('testCtrl', ['$scope', 'testFactory', function($scope, testFactory){
console.log("inside testCtrl");
$scope.testing = function(){
console.log("testing function called");
testFactory.testFunc();
}
}])
When I call the testFactory.testFunc inside the myApp module, it functions correctly. But, when I try calling it in the controller module, I'm getting the following error
TypeError: Cannot read property 'testFunc' of undefined
I even tried injecting the service module inside the controller module as a dependency, but I still got the same error.
How do I get the service module to work inside the controller module?
I have a factories called ReportService and IndexService. I want to use IndexService inside of ReportService.
But in ReportService, it says that the IndexService is undefined. I'm not quite sure why.
Here's my code so far:
indexService.js
angular.module('IndexService', []).factory('IndexService', ['$http', function ($http) {
return {
// Sending npm config from server (node) to front-end as JSON so we can use it in front-end.
// See localhost.json.
getConfig: function() {
return $http.get("/api/get-config");
}
}
}]);
reportService.js
angular.module('ReportService', []).factory('ReportService', ['$http', 'IndexService', function ($scope, $http, IndexService) {
// Sending npm config from server (node) to front-end as JSON so we can use it in front-end.
// See localhost.json.
IndexService.getConfig()
.then(function(response) {
var configs = response.data
});
return {
generateExcelReport: function(searchCriteriaList) {
var requestConfig = {
responseType: "arraybuffer",
headers: { "Content-Disposition": "attachment" }
};
// I want to call IndexService.getConfig()
// so I can change my base URL and port based on environment. My configs are in node.js back-end
var url = configs.url;
var port = configs.port;
return $http.post(url + ":" port + "/my-api-link", searchCriteriaList, requestConfig);
},
}
}]);
app.js
angular.module('myApp', ['ngStorage', 'ngRoute', 'appRoutes', 'IndexController', 'IndexService', 'ReportController', 'ReportService', 'PackageController', 'PackageService', 'FarmService', 'DesignService', 'UserService', 'oitozero.ngSweetAlert', 'ui.select', 'ui.materialize', 'ngSanitize', 'ngFileSaver'])
my index.html script imports
<!-- Our Angular Controllers and Services JS -->
<script src="./js/controllers/indexController.js"></script>
<script src="./js/controllers/reportController.js"></script>
<script src="./js/controllers/nerdController.js"></script>
<script src="./js/controllers/packageController.js"></script>
<script src="./js/services/indexService.js"></script>
<script src="./js/services/reportService.js"></script>
<script src="./js/services/farmService.js"></script>
<script src="./js/services/packageService.js"></script>
<script src="./js/services/designService.js"></script>
<script src="./js/services/userService.js"></script>
<script src="./js/appRoutes.js"></script>
<script src="./js/app.js"></script>
Kindly help. I've been over 2 hours on this and I can't still find the problem.. Thanks in advance :)
You need to inject it first, like:
angular
.module('ReportService')
.factory('ReportService', ReportService);
ReportService.$inject = ['IndexService'];
function ReportService(IndexService) {
// You code blah blah here
}
At least this is a way, how i am doing.
I am new to Angular & Firebase. I am currently developing an Ionic app. Somehow I came to know that, to use Firebase, I need to set up authentication system (I prefer Google).
It was not easy to integrate the code into AngularJS which were mentioned in official Firebase website. So I just picked up someone's working code and replaced his Firebase database URL to mine, I could get it done. But it was a mistake.
This is the unchanged code and his output (which is working as expected).
index.html
<script src="lib/angularfire/dist/angularfire.min.js"></script>
<script src="lib/firebase/firebase.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'firebase'])
.constant('FirebaseUrl', 'https://ionicle.firebaseio.com/')
.service('rootRef', ['FirebaseUrl', Firebase])
So first, I removed his Firebase URL to add mine and got this error:
We have detected that you are using the v2.x or lower authentication SDKs with a project that was created at console.firebase.google.com. You must use the 3.0.0 or greater authentication SDKs with projects that have been created in the new console.
Then I updated firebase.js file to 3.4.1 version. Then I got a Reference error in browser's Dev console: ReferenceError: Firebase is not defined
.service('rootRef', ['FirebaseUrl', Firebase])
So what I finally need is a working Google OAuth with Firebase 3.x and AngularJS.
Although you didn't provide enough examples of your code (dependency injection is not enough), I think that the main problem you are having is that you are using old examples of the code with the new Firebase version.
Things like this:
var app = angular.module('app', ['firebase']);
app.controller('Ctrl', function($scope, $firebaseAuth) {
var ref = new Firebase('https://...');
$scope.authObj = $firebaseAuth(ref);
...
});
are changed into this:
var app = angular.module('app', ['firebase']);
app.controller('Ctrl', function($scope, $firebaseAuth) {
var config = {
apiKey: "***",
authDomain: "***.firebaseapp.com",
databaseURL: "https://***.firebaseio.com",
storageBucket: "***.appspot.com",
messagingSenderId: "***"
};
firebase.initializeApp(config);
$scope.authObj = $firebaseAuth(firebase.auth());
...
});
Then on that authObj you can add a provider for the client you want to use to authenticate (Google/GitHub/Facebook...):
var provider = new firebase.auth.GoogleAuthProvider();
$scope.authObj.$signInWithPopup(provider).then(function(result) {
console.log(result);
});
Keep in mind that you must enable Authentication with Google (or any other provider) in your Firebase console. For detailed instructions please check this link.
Just started using firebase v3 (released roughly two weeks ago) with angularfire v2 (which according to this post fully supports firebase v3). But I am struggling to simply retrieve some data into an angular view.
Here is the controller that simply returns user array and bind it to the view. It breaks on the line using $firebaseArray and says: TypeError: Object expected
I am using AngularJs 1.5.6. Just to show the versions of firebase and angularfire I am using:
<script src="https://cdn.firebase.com/libs/angularfire/2.0.1/angularfire.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
(function() {
var app = angular.module("FirebaseTest");
var mainCtrl = function($scope, $firebaseArray) {
var root = firebase.database().ref();
var users = root.child('users');
console.log(users); // this works fine so no problem with firebase connection
//NOTE: this doesn't work and throws exception
$scope.users = $firebaseArray(users);
}
app.controller("mainCtrl", ["$scope", mainCtrl]);
})();
try this
app.controller("mainCtrl", ["$scope", '$firebaseArray', mainCtrl]);
This should work
I try to add 2 Services to my AngularJS Module. One should access my Employees and one my Products, but I get an Unknown provider: EmployeeServiceProvider <- EmployeeService <- BookingController.
All Javascript-Files are added to the html.
App/Module
var coffeewatchApp = angular.module('coffeewatchApp', [
'ngRoute',
'coffeewatchControllers',
'coffeewatchServices'
]);
//Routing
var coffeewatchControllers = angular.module('coffeewatchControllers', []);
var coffeewatchServices = angular.module('coffeewatchServices', []);
EmployeeService.js
var coffeewatchServices = angular.module('coffeewatchServices', ['ngResource']);
var employeeServiceUrlPart = "EmployeeService/";
coffeewatchServices.factory('EmployeeService', ['$resource',
function($resource){
return $resource('all/', {}, {
all: {method:'GET',url:REST_BASEURL+employeeServiceUrlPart+"all", params:{}, isArray:true}
});
}]);
ProductController.js is exactly the same but with Product
var coffeewatchServices = angular.module('coffeewatchServices', ['ngResource']);
var productServiceUrlPart = "ProductService/";
coffeewatchServices.factory('ProductService', ['$resource',
function($resource){
return $resource('all/', {}, {
all: {method:'GET',url:REST_BASEURL+productServiceUrlPart+"all", params:{}, isArray:true}
});
}]);
Controller accessing the two Services
coffeewatchControllers.controller('BookingController', ['$scope', 'EmployeeService', 'ProductService',
function ($scope, EmployeeService, ProductService) {
$scope.employees = EmployeeService.all();
$scope.products = ProductService.all();
}]);
Any help is appreciated; Thanks in advance.
EDIT:
I implemented the EmployeeService first and everything was working great.
So I don't really understand why adding the ProductService kills my EmployeeService. The only thing I can think of is that the ProductService somehow "overwrites" my EmployeeService because it gets injected second.
All added JS-Files in index.html
<script src="js/config/app-config.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/DashboardController.js"></script>
<script src="js/controllers/StatisticController.js"></script>
<script src="js/controllers/BookingController.js"></script>
<script src="js/services/EmployeeService.js"></script>
<script src="js/services/ProductService.js"></script>
EDITEDIT
After looking at this answer I am even more confused why my code is not working, but maybe the other code will help somone spotting the difference.
In both of your controller files, retrieve the module like this (remove dependency list) -
var coffeewatchServices = angular.module('coffeewatchServices');
Add the dependency to ngResource here instead, while declaring in App/Module -
var coffeewatchServices = angular.module('coffeewatchServices', ['ngResource']);
Your module is getting re-created on the second call in ProductController, so overriding previous module and service definitions.