I find myself caught up in a dilemma. Whenever I attempt to replicate the tutorial from , by copying and pasting the code below:
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/1.1.1/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.8.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>
<script>
var myApp = angular.module("myApp", ["firebase"]);
myApp.controller('MyController', ['$scope', '$firebase',
function($scope, $firebase) {
//CREATE A FIREBASE REFERENCE
var ref = new Firebase("https://xa9242ucksy.firebaseio-demo.com/");
// GET MESSAGES AS AN ARRAY
$scope.messages = $firebase(ref).$asArray();
//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>
</body>
</html>
However, when I move the script content from the index page to a separate file named app.js and link it within the head like this, the functionality ceases to work:
<head>
// OTHER
<script src="js/app.js"></script>
</head>
EDIT: Upon experimentation, I discovered that it only functions properly when I include the script directly without referencing a folder structure. But what is the issue with the initial reference? I aim to organize it within a JS directory.
<head>
// OTHER
<script src="app.js"></script>
</head>
EDIT 2: It appears that the root of the problem lies in having multiple .js files stored. This prompts a deeper exploration into AngularJS. Essentially, I have split up my controllers into various files which leads to the following scenarios at the end of the index.html file:
DOES NOT WORK
<script src="js/maps.js"></script>
<script src="js/app.js"></script>
<script src="js/controller-fb.js"></script>
<script src="js/controller-maps.js"></script>
DOES WORK
<script src="js/app.js"></script>
The structure of my other files mirrors that of app.js