Angular and Firebase app won't work
This is my html:
<!DOCTYPE html>
<html ng-app="sampleApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<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>
<script src="scripts/app.js"></script>
</head>
<body ng-controller="SampleCtrl">
<!-- anything typed in here is magically saved to Firebase! -->
<input type="text" ng-model="data.text"/>
<!-- all changes from Firebase magically appear here! -->
<h1>You said: {{ data.text }}</h1>
</body>
</html>
and this is my app.js file:
(function() {
var app = angular.module("sampleApp", ["firebase"])
app.controller("SampleCtrl", function($scope, $firebaseObject) {
var ref = new Firebase("https://fiery-inferno-4208.firebaseio.com/data");
var syncObject = $firebaseObject(ref);
syncObject.$bindTo($scope, "data");
});
})();
I copied this from this example: https://www.firebase.com/docs/web/libraries/angular/quickstart.html
When I try to run it on my own computer, I get these errors in the console:
Unprepared SyntaxError: Unexpected token <
and
Unprepared error: [$ injector: modulerr]
I can't figure out what's wrong!
+3
source to share
2 answers
Your module is not loading because the function you created is never executed. It looks like you are missing ()
right before the final ;
in your script. This fixes it for me:
(function() {
var app = angular.module("sampleApp", ["firebase"])
app.controller("SampleCtrl", function($scope, $firebaseObject) {
var ref = new Firebase("https://fiery-inferno-4208.firebaseio.com/data");
var syncObject = $firebaseObject(ref);
syncObject.$bindTo($scope, "data");
});
})();
+3
source to share
$ injector: modulerr basically means the module is not loading, there could be a couple of things.
<script>
var myApp = angular.module("myApp", ["firebase"]);
myApp.controller("MyController", ["$scope", "$firebaseArray",
function($scope, $firebaseArray) {
//CREATE A FIREBASE REFERENCE
var ref = new Firebase("https://qst13ns0z14.firebaseio-demo.com/");
// GET MESSAGES AS AN ARRAY
$scope.messages = $firebaseArray(ref);
//ADD MESSAGE METHOD
$scope.addMessage = function(e) {
//LISTEN FOR RETURN KEY
if (e.keyCode === 13 && $scope.msg) {
//ALLOW CUSTOM OR ANONYMOUS USER NAMES
var name = $scope.name || "anonymous";
//ADD TO FIREBASE
$scope.messages.$add({
from: name,
body: $scope.msg
});
//RESET MESSAGE
$scope.msg = "";
}
}
}
]);
</script>
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<link rel="stylesheet" href="/resources/tutorial/css/example.css"/>
</head>
<body ng-controller="MyController">
<!-- CHAT MARKUP -->
<div class="example-chat l-demo-container">
<header>Firebase Chat Demo</header>
<div class="example-chat-toolbar">
<label for="nameInput">Username:</label>
<input ng-model="name" type="text" id="nameInput" placeholder="enter a username...">
</div>
<ul id="example-messages" class="example-chat-messages">
<li ng-repeat="msg in messages">
<strong class="example-chat-username">{{ msg.from }}</strong>
{{ msg.body }}
</li>
</ul>
<footer>
<input ng-model="msg" ng-keydown="addMessage($event)" type="text" id="messageInput" placeholder="Type a message...">
</footer>
</div>
</body>
</html>
0
source to share