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
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');
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>
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>
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>
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) {}
]);