Firebase ReferenceError: Firebase is not defined - angularjs

I'm working on a Angular tutorial that uses the boilerplate Angular-seed and Firebase. The error I am getting is: ReferenceError: Firebase is not defined.
This is my contact.js where my error is being referenced:
'use strict';
angular.module('myContacts.contacts', ['ngRoute','firebase'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/contacts', {
templateUrl: 'contacts/contacts.html',
controller: 'ContactsCtrl'
});
}])
// Contacts Controller
.controller('ContactsCtrl', ['$scope', '$firebaseArray', function($scope, $firebaseArray) {
// Init Firebase
var ref = new Firebase('https://mycontacts-app.firebaseio.com/contacts');
// get Contacts
$scope.contacts = $firebaseArray(ref);
console.log($scope.contacts);
}]);
This is my app.js
'use strict';
// Declare app level module which depends on views, and components
angular.module('myContacts', [
'ngRoute',
'firebase',
'myContacts.contacts'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.otherwise({redirectTo: '/contacts'});
}]);
this is my index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myContacts" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myContacts" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myContacts" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myContacts" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MyContacts App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/foundation/css/foundation.css">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="large-12 columns">
<h1>myContacts</h1>
<hr>
</div>
</div>
<div ng-view></div>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/firebase/firebase.js"></script>
<script src="bower_components/angularfire/dist/angularfire.js"></script>
<script src="bower_components/foundation/js/foundation.js"></script>
<script src="app.js"></script>
<script src="contacts/contacts.js"></script>
</body>
</html>
this is my contact.html
<div class="row" ng-controller="ContactsCtrl">
<div class="large-10 columns">
<h3>Your Contacts</h3>
<table>
<thead>
<tr>
<th width="200px">Name</th>
<th width="200px">Company</th>
<th width="25%">Email</th>
<th width="25%">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Some Company</td>
<td>sothing#something.com</td>
<td>Edit
Delete</td>
</tr>
</tbody>
</table>
</div>
<div class="small-12 large-2 columns">
+
</div>
</div>
These are all the files that I've changed from the boilerplate angular-seed. If anyone can help I would be grateful.

You are looking at a tutorial that is outdated. Things are a little bit changed with the new version of Firebase.
Things like this:
var app = angular.module('app', ['firebase']);
app.controller('Ctrl', function($scope, $firebaseArray) {
var ref = new Firebase('https://...');
$scope.contacts = $firebaseArray(ref);
...
});
are changed into this:
var app = angular.module('app', ['firebase']);
app.controller('Ctrl', function($scope, $firebaseArray) {
var config = {
apiKey: "***",
authDomain: "***.firebaseapp.com",
databaseURL: "https://***.firebaseio.com",
storageBucket: "***.appspot.com",
messagingSenderId: "***"
};
firebase.initializeApp(config);
var ref = firebase.database().ref().child("contacts");
$scope.contacts = $firebaseArray(ref);
...
});
Of course you need to include firebase.js and angularfire.js into your index.html but you already did that.
I wasn't sure if you just want to read your data from the database or something more but I think this example is enough. Also try to read the official documentation first before you try to implement something from a tutorial (especially an old one). In the world of web development changes are very frequent.

Related

File Not Found when Bootstrapping AngularJS 1.6.2 with NodeJS and Express

I'm trying to setup an AngularJS application but I keep running into issues when bootstrapping it, I am able to get it run on an express server via node.
But when I go to initiate a controller my developer tools console won't return the console logged hello world in the console.
I can't seem to figure it out as I have (as far as I'm concerned) written it correctly. I have used ng-app as well as as ng-view and tried to instantiate it with ng-controller calling the controller name.
File Structue:
HTML:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Contact List App</title>
</head>
<body>
<div class="container" ng-controller="AppCtrl" ng-view>
<h1>Contact List App</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Number</th>
</tr>
</thead>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<script src="controllers/controller.js"></script>
</body>
</html>
Controller:
var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', ['$scope', '$http', function($scope, $http) {
console.log("Hello World from controller");
}]);
Errors:
EDIT: I have added the server.js code here:
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public' ));
app.listen(3000);
console.log('Server running on 3000');

Angular Js Is not Displaying Data on Detail Page

I'm new to angular js. Trying to use Angular Routing to show data from the database on a list page and a detail page. There is a table call employees in the database, I'm trying to use Angular Js $http service to display the list of employees and users can click each list to view details. I got it to listing results on the table.html page but it's not outpouring results on the view.html page. Any help, please? Thanks
Here is the angular script.
/* App Module */
var employeeApp = angular.module('employeeApp', [
'ngRoute',
'tableControllers'
]);
/* Controllers */
var tableControllers = angular.module('tableControllers', []);
tableControllers.controller('ListCtrl', ['$scope', '$http',
function($scope, $http) {
$http.get('data/json.php').success(function(data) {
$scope.employees = data;
});
}]);
tableControllers.controller('DetailCtrl', ['$scope', '$routeParams', '$http',
function($scope, $routeParams, $http) {
$http.get('data/json.php').success(function(data) {
$scope.employee = data;
});
}]);
employeeApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/page', {
templateUrl: 'pages/table.html',
controller: 'ListCtrl'
}).
when('/page/:employee_id', {
templateUrl: 'pages/view.html',
controller: 'DetailCtrl'
}).
otherwise({
redirectTo: '/page'
});
}]);
Here is the Index File
<!DOCTYPE html>
<html lang="en" ng-app="employeeApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Graphic Editor</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<header></header>
<section>
<div class="container">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Here is the view page
<table width="500" class="table table-striped table-bordered">
<tbody>
<tr>
<td width="22%">Name</td><td width="22%">{{employee.firstName}} {{employee.firstName}}</td>
</tr>
<tr>
<td>employee</td><td>{{employee.employee}}</td>
</tr>
<tr>
<td>Address</td><td>{{employee.addressLine1}} {{employee.addressLine2}}</td>
</tr>
<tr>
<td>Action</td><td>Edit</td>
</tr>
</tbody>
</table>
<p>{{caption}}</p>

angular.js:12520 Error: [ng:areq] Argument 'clickable' is not a function, got undefined

Now I have read that angular doesn't allow global controllers but I don't believe I am making it global. What is even more odd is that I even created a script in the HTML file and it gave me the same error. I am positive that code should have worked.
I am using Intellij and used its template to generate a small boiler plate via bower.
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body ng-app="myApplication">
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-controller="clickable">
<input type="button" value="Click Me" ng-click="clickMe()">
{{clickable.click}}
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
<script src="controllers/clickablecontroller.js"></script>
</body>
</html>
clickablecontroller.js
angular.module('myApplication',[])
.controller('clickable',['$scope', function($scope){
$scope.clickMe = function(){
$scope.click = click++;
}
}]);
----------------UPDATE 1 -----------
app.js
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
clickable is your controller. If you want to output value of click property you need {{click}}. Angular will know what the controller is and show to value of click property of $scope in that controller.
Maybe you can try this:
var myModule = angular.module('myApplication', []);
myModule.controller('clickable', function ($scope) {
$scope.clickMe = function(){
$scope.click = click++;
}
});
Besides,
use {{click}} to instead of {{clickable.click}}
I had to had my new module in my apps.js file.
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.version',
'myApplication'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
Then I had to declare click as a variable like so:
angular.module('myApplication',[])
.controller('clickable',['$scope', function($scope){
console.log("I am in the controller")
var click = 0
$scope.clickMe = function(){
$scope.click = click++;
}
}]);
Then in my index.html file I could simply use:
<div ng-controller="clickable">
<input type="button" value="Click Me" ng-click="clickMe()">
{{click}}
</div>

i18n using Angular Translate StaticFilesLoader

I am facing similar issues while using angularJS-translate module.
Reference Url to similar issue:
i18n using Angular Translate StaticFilesLoader
This is my JS code:
var app = angular.module('myApp', ['pascalprecht.translate']);
app.config(function ($translateProvider) {
$translateProvider.useStaticFilesLoader({
prefix: 'locale-',
suffix: '.json'
});
$translateProvider.preferredLanguage('en_US');
});
app.controller('langController', ['$scope', '$translate', function ($scope, $translate) {
$scope.switchLanguage = function (key) {
$translate.use(key);
};
}]);
html:
<!doctype html>
<!--[if lt IE 7]> <html class1="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="Description" content="angular translate brings internationalization (i18n) and localization (l10n) to your Angular apps!">
<meta name="fragment" content="!">
<title>angular translate - i18n for your Angular apps, made easy.</title>
<script src="js/angular.js"></script>
<script src="js/angular-translate.min.js"></script
<script src="https://rawgithub.com/PascalPrecht/bower-angular-translate-loader-static-files/master/angular-translate-loader-static-files.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp">
<div class="span4">
<div class="well">
<h2 translate>Hello</h2>
<p translate>This is a paragraph</p>
<p translate>Welcome to Hello world!</P>
</div>
<div ng-controller="langController">
<button class="btn" ng-click="changeLanguage('en')" translate="BUTTON_LANG_EN" class="ng-scope">english</button>
<button class="btn" ng-click="changeLanguage('de')" translate="BUTTON_LANG_DE" class="ng-scope">german</button>
</div>
<hr>
<div ng-controller="langController">
<select ng-model="lang" ng-selected="selected">
<option disabled="disabled" selected="selected">Select Language</option>
<option ng-click="changeLanguage('en')" class="ng-scope">English</option>
<option ng-click="changeLanguage('de')" class="ng-scope">German</option>
</select>
</div>
</div>
</body>
</html>
locale-en_US.json:
"TITLE":"Hello",
"FOO":"This is a paragraph.",
"BUTTON_LANG_EN":"english",
"BUTTON_LANG_DE":"german",
"TEXT":"Welcome to Hello world!"
locale-de_DE.json:
"TITLE":"Hallo",
"FOO":"Dies ist ein Paragraph.",
"BUTTON_LANG_EN":"englisch",
"BUTTON_LANG_DE":"deutsch",
"TEXT":"herzlich willkommen auf Hallo Welt!"
i have placed .js,.html, locale-en_US.json,locale-de_DE.json language files in the same folder and I am not able to get the output as desired , getting error in Firefox console: Error: [$injector:unpr] Unknown provider: $translateStaticFilesLoaderProvider <- $translateStaticFilesLoader.
Can you help me on this please?
Thanks,
Ketan
change ng-click="changeLanguage('en')"
with: ng-click="changeLanguage('en_EN')"
change ng-click="changeLanguage('de')"
with: ng-click="changeLanguage('de_DE')"
the language json file is
{
"TITLE":"Hallo",
"FOO":"Dies ist ein Paragraph.",
"BUTTON_LANG_EN":"englisch",
"BUTTON_LANG_DE":"deutsch",
"TEXT":"herzlich willkommen auf Hallo Welt!"
}
You need this js in index file
<script src="https://rawgithub.com/PascalPrecht/bower-angular-translate-loader-static-files/master/angular-translate-loader-static-files.js"></script>

Can't figure out why my angular view is blank

Im scaffolding an app for a prototype. I have everything together, but when I do grunt serve I get my index page but the view doesn't initialize. Ive compared it to other apps i have running, but i can't find anything wrong. Any of you see anything wrong.
I should mention, I used Yeoman to generate the basic scaffold, but I have been systematically stripping various things (Primarily Bower) from it as we are not allowed to use it on our network. So I have been rebuilding a basic seed app that likes our network and plays well with our CI server.
app.js
'use strict';
angular.module('angularApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ui.router'
])
.run(['$rootScope', '$state', '$stateParams',
function($rootScope, $state, $stateParams) {
// It's very handy to add references to $state and $stateParams to the $rootScope
// so that you can access them from any scope within your applications.For example,
// <li ng-class="{ active: $state.includes('contacts.list') }"> will set the <li>
// to active whenever 'contacts.list' or one of its decendents is active.
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$state.transitionTo('home');
}
])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider.state('home', {
//name: 'home',
url: '/',
templateUrl: 'views/main.html',
controller: 'MainCtrl'
});
}
]);
main.js
'use strict';
angular.module('angularApp', [])
.controller('MainCtrl', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});
index.html
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/vendor.css -->
<link rel="stylesheet" href="libs/sass-bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="libs/ng-grid-2.0.7/ng-grid.css" />
<!-- endbuild -->
<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="angularApp">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div ui-view></div>
test
<a ui-sref="home">home</a>
<!--[if lt IE 9]>
<script src="libs/es5-shim/es5-shim.js"></script>
<script src="libs/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- build:js scripts/vendor.js -->
<script src="libs/jquery-1.10.2/jquery.js"></script>
<script src="libs/angular-1.2.10/angular.js"></script>
<script src="libs/sass-bootstrap/dist/js/bootstrap.js"></script>
<script src="libs/angular-resource/angular-resource.js"></script>
<script src="libs/angular-cookies/angular-cookies.js"></script>
<script src="libs/angular-sanitize/angular-sanitize.js"></script>
<script src="libs/ui-router-0.2.8/release/angular-ui-router.js"></script>
<script src="libs/ngStorage/ngStorage.js"></script>
<script src="libs/ng-grid-2.0.7/ng-grid-2.0.7.min.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->
</body>
</html>
main.html
<div class="header">
<ul class="nav nav-pills pull-right">
<li class="active"><a ng-href="#">Home</a></li>
<li><a ng-href="#">About</a></li>
<li><a ng-href="#">Contact</a></li>
</ul>
<h3 class="text-muted">angular</h3>
</div>
<div class="jumbotron">
<h1>'Allo, 'Allo!</h1>
<p class="lead">
<img src="images/yeoman.png" alt="I'm Yeoman"><br>
Always a pleasure scaffolding your apps.
</p>
<p><a class="btn btn-lg btn-success" ng-href="#">Splendid!</a></p>
</div>
<div class="row marketing">
<h4>HTML5 Boilerplate</h4>
<p>
HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.
</p>
<h4>Angular</h4>
<p>
AngularJS is a toolset for building the framework most suited to your application development.
</p>
<h4>Karma</h4>
<p>Spectacular Test Runner for JavaScript.</p>
</div>
<div class="footer">
<p>♥ from the Yeoman team</p>
</div>
Two things that I see would break your angular bootstrap process:
First, include your app.js last:
<script src="scripts/controllers/main.js"></script>
<script src="scripts/app.js"></script>
Then, .config should come before .run:
'use strict';
angular.module('angularApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ui.router'
])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {}
])
.run(['$rootScope', '$state', '$stateParams',
function($rootScope, $state, $stateParams) {}
]);

Resources