I'm using the latest ionic and I want to implement a firebase backend for my app. I followed the ionic get started guide, then used bower install to install firebase and angular fire.
The error produced is:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module starter.controllers due to:
Error: [$injector:modulerr] Failed to instantiate module firebase due to:
Error: [$injector:nomod] Module 'firebase' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
So adding the firebase links to the index.html does not fix this issue at least for me. Using bower to install firebase it should bundle automatically just by passing in 'firebase' into the controller.js, however it produces this error. Any ideas? Thanks in advanced!
This is all that I've changed in the app thus far:
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.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>
</head>
<body ng-app="starter" animation="slide-left-right-ios7">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-icon icon ion-ios7-arrow-back">
Back
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
controller.js
angular.module('starter.controllers', ['firebase'])
.controller('DashCtrl', function ($scope, $firebase) {
// TV Shows Table
var moviesRef = new Firebase("https://moviehunt.firebaseio.com/");
var sync = $firebase(moviesRef);
$scope.movies = sync.$asArray();
})
Okay, here was my solution, I started from scratch completely, instead created the ionic app with a side menu:
ionic start myApp sidemenu
then used bower and bower install firebase install angularfire
and then added the following html links to the index.html:
<script src="lib/firebase/firebase.js"></script>
<script src="lib/firebase-simple-login/firebase-simple-login.js"></script>
<script src="lib/angularfire/dist/angularfire.js"></script>
Related
Am absolutely new to Ionic and Firebase and was trying to create a Sample Project where I am trying to query from the Firebase Database using a check on a value. To make it clear since Firebase doesn't allow a WHERE clause in the SELECT query like conditions, so was trying to learn how to deal with that.
Here is a snapshot of my Firebase database.
My intention is simply to display on my View whichever data has the address value of 700030 in an array as we do in AngularJS using ng-repeat.
var app = angular.module('starter', ['ionic', 'firebase'])
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
app.controller('MainCtrl', function($scope, $firebaseArray){
var ref = new Firebase('https://helpee-70271.firebaseio.com');
$scope.result = $firebaseArray(ref);
ref.orderByChild("address").on("child_added", function(data) {
console.log("Initially :" + JSON.stringify($scope.result));
//console.log(data.val().address);
if(data.val().address == "700030"){
console.log(data.val().address);
$scope.result.push(data.val());
}
console.log(JSON.stringify($scope.result));
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!--Firebase addition start -->
<script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<!--Firebase addition end -->
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title text-center">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content ng-controller="MainCtrl">
<div>
<div ng-repeat ="results in result">
<div>{{results.name}}</div>
<div>{{results.phNumber}}</div>
</div>
</div>
</ion-content>
</ion-pane>
</body>
</html>
Here is my Code snippet. The problem am getting is that while the checking and retrieving of data is being done properly but at the View am seeing that the array containing all the elements irrespective of the Address check is getting printed first followed by the values that should be printed.
Here is the snapshot of the View and the console of the browser
Can anyone please help me how to correct this issue and explain me where am going wrong? Would be highly indebted as am really new to this and am willing to learn. Thanks in advance!!
Your problem is that you are filling your array twice.
First with all the data using this line:
$scope.result = $firebaseArray(ref);
And secondly you add the data you actually want in the child_added listener:
$scope.result.push(data.val());
So the simple solution is to change that first line to:
$scope.result = [];
I'm working on a Node.js project that uses Angular, and I'm trying to implement multiple views and routing. I've followed the instructions outlined here for installing the angular-route.js file and dependent module:
https://docs.angularjs.org/api/ngRoute
But I still get this error in the console:
Uncaught Error: [$injector:modulerr] Failed to instantiate module blogApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngRoute due to:
Error: [$injector:nomod] Module 'ngRoute' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.20/$injector/nomod?p0=ngRoute
Here are the parts that seem relevant from my controller and HTML files:
app.js
var blogApp = angular.module('blogApp', ['ngRoute']);
index.html
<!DOCTYPE html>
<html ng-app="blogApp">
<head>
<title>Blog Posts</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- styles -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="stylesheets/style.css" rel="stylesheet" media="screen">
</head>
<body ng-controller="postController">
// page content
<!-- scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.js"></script>
<script src"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular-route.js"></script>
<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
<script src="javascripts/app.js"></script>
</body>
</html>
I'm new to working with Angular and Node, so any thoughts on this greatly appreciated!
It's just a typo (missing equal sign). This line:
<script src"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular-route.js"></script>
Should be:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular-route.js"></script>
There is a very small typo in the script include for ngRoute. You had src"https:// rather than src="https://
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular-route.js"></script>
<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
<script src="javascripts/app.js"></script>
You can debug these kinds of issues by checking the developer tools and making sure the script is loaded without error.
I've being developing angularjs for the last months and I have an app with some controllers, directives and services. Until now all have gone all right, but with the last controller I'm getting a weird error that it's making me go mad. Because the app its a bigger enough to put here all code I will put the important parts.
In my index.html
<!DOCTYPE html>
<html ng-app="my_app">
<head>
<meta charset="encoding">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="stylesheet" href="lib/ionic/css/ionic.css">
<link rel="stylesheet" href="css/style.css">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/angular-translate/angular-translate.min.js"></script>
<script src="lib/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<!--<script src=""-->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<!--SERVICES-->
<script src="js/services/services.js"></script>
<script src="js/services/s_configDB.js"></script>
<script src="js/services/s_clinicDB.js"></script>
<!-- CONTROLLERS -->
<script src="js/controllers/controllers.js"></script>
<script src="js/controllers/c_splash.js"></script>
<script src="js/controllers/c_communications.js"></script>
<!--<script src="js/controllers/c_communicationsB.js"></script>
<script src="js/controllers/c_clock.js"></script>
<script src="js/controllers/c_menu.js"></script>
<script src="js/controllers/c_language.js"></script>
<!--DIRECTIVES-->
<script src="js/directives/directives.js"></script>
<script src="js/directives/d_menu.js"></script>
</head>
<body ng-controller="AppComms">
<ion-nav-view ></ion-nav-view>
</body>
</html>
At my app.js:
var SDv4 = angular.module('my_app', [
'ionic',
'my_app.services',
'my_app.controllers',
'my_app.directives'
]);
At controllers.js
var app = angular.module('my_app.controllers',[
//'ionic',
'my_app.c_splash',
'my_app.c_clock',
'my_app.c_language',
'my_app.c_comms',
//'my_app.c_commsb',
'pascalprecht.translate',
'my_app.c_menu'
]);
And for example the c_communications.js
var comms = angular.module('my_app.c_comms',[])
comms.controller('AppComms',['$scope',function($scope){
…
}])
This code is working ok, but if I add another controller (c_communicationsB.js) :
var commsb = angular.module('my_app.c_commsb',[])
and add the my_app.commsb to the controllers.js
It gives me the error:
ionic.bundle.js:8895 Uncaught Error: [$injector:modulerr] Failed to instantiate module MY_APP due to:
Error: [$injector:modulerr] Failed to instantiate module my_app.controllers due to:
Error: [$injector:modulerr] Failed to instantiate module my_app.c_commsb due to:
Error: [$injector:nomod] Module ‘my_app.c_commsb' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.4.3/$injector/nomod?p0=MY_APP.c_commsb
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:8895:12
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:10785:17
at ensure (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:10709:38)
at module (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:10783:14)
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13189:22
at forEach (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:9163:20)
at loadModules (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13173:5)
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13190:40
at forEach (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:9163:20)
at loadModules (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13173:5)
http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=MY_APP.c_commsb&…3A63342%2FSD4v040t2%2Fwww%2Flib%2Fionic%2Fjs%2Fionic.bundle.js%3A13173%3A5)
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:8895:12
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13212:15
at forEach (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:9163:20)
at loadModules (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13173:5)
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13190:40
at forEach (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:9163:20)
at loadModules (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13173:5)
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13190:40
at forEach (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:9163:20)
at loadModules (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13173:5)
http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=MY_APP.controlle…3A63342%2FSD4v040t2%2Fwww%2Flib%2Fionic%2Fjs%2Fionic.bundle.js%3A13173%3A5)
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:8895:12
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13212:15
at forEach (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:9163:20)
at loadModules (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13173:5)
at http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13190:40
at forEach (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:9163:20)
at loadModules (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13173:5)
at createInjector (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:13099:11)
at doBootstrap (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:10457:20)
at bootstrap (http://localhost:63342/SD4v040t2/www/lib/ionic/js/ionic.bundle.js:10478:12)
http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=MY_APP&p1=Error%…A63342%2FSD4v040t2%2Fwww%2Flib%2Fionic%2Fjs%2Fionic.bundle.js%3A10478%3A12)
What is happening here?!
you have commented out the line <!--<script src="js/controllers/c_communicationsB.js"></script>
in your code sample, but have said that the method is in here.
It seems like your app is not getting called. Try wrapping your app in an IFFY.
(function () {
var comms = angular.module('my_app.c_comms',[]);
comms.controller('AppComms',['$scope',function($scope){
//controller magic here
}])
}());
This is a self calling function so your app will get called by itself.
//At controllers.js
angular.module('my_app',[
//'ionic',
'my_app.c_splash',
'my_app.c_clock',
'my_app.c_language',
'my_app.c_comms',
//'my_app.c_commsb',
'pascalprecht.translate',
'my_app.c_menu'
]);
Solved,
a week ago I used a script to prevent loading page from cache in browser in order to no need to refresh the site when i was debugging on chrome and force always to read from source.
I don't know who or why it was preventing of loading new controllers or new css in a new html page I've added, this is what has made me think about this script.
I have read every resource I can find on the ngCookies api. I have also read every resource I could find regarding this injector error.
This is my import stack
<!-- Latest compiled and minified jquery -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular.min.js"></script>
<!-- get cookie api support -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular-cookies.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="/javascripts/angularApp.js"></script>
This is the code for my angularApp
angular.module('flapperNews', ['ui.router','ngCookies'])
.config([
'$stateProvider',
'$urlRouterProvider',
'$cookies',
function($stateProvider, $urlRouterProvider, $cookies) {
I am getting this error:
Uncaught Error: [$injector:modulerr]
I have checked every explanation of this error and still cannot figure out what is going wrong. Any ideas would be appreciated.
"$cookies" is not available during the configuration phase in AngularJS.
Use it in your controllers, services, factories etc.
Like in example or e.g.:
.service('cookiesService', ['$cookies', function($cookies){
console.log($cookies);
}]);
I have a problem when I try to use ion-nav-view. When I try to use it, it shows me black screen in the emulator but in ionic serve, it works perfectly for me.
I think it is a syntax error.
Also, when I create a blank project, it works perfectly in the emulator.
My project (doesn't work)
Blank project (does work)
Index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter" animation="slide-left-right-ios7">
<ion-nav-bar></ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
/templates/apps/index.html
<ion-view title="Hello World">
<ion-content>
<h2>Hello World</h2>
</ion-content>
</ion-view>
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('apps', {
url: '/',
templateUrl: '/templates/apps/index.html'
});
// if none of the above states are matched, use this as the fallbac
$urlRouterProvider.otherwise('/');
});
Try to make your templateUrl: 'templates/apps/index.html'. The forward slash makes the path absolute, which will work on ionic serve because its a web server running at the root of the domain. It doesn't work in app because files are loaded over the file:// protocol and are not at the root, so it might crash because you are referencing a file that doesn't exist and would be outside of the app and thus perhaps a permission issue.