CODEWITHSUNDEEP
javascriptangularjsangularjs-controller
WJA
WJA

Reputation: 7004

Why does the controller not work when script is outside index.html?

I am puzzled with the following. When I copy the following tutorial from https://www.firebase.com/tutorial/#session/xa9242ucksy:

<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>

And instead of having the script in the index page, but I remove that part, copy it to a file called app.js and save it, then it does not work anymore??? Basically in the head I add:

<head>
    // OTHER
    <script src="js/app.js"></script>
  </head>

EDIT: When I try the following then it does work. But again, what is wrong with the reference in the first place?? I want to store it in a JS folder.

<head>
        // OTHER
        <script src="app.js"></script>
      </head>

EDIT 2: Oke it seems that the problem is that I had multiple .js files stored. So the question becomes more on angularJS. Basically I had multiple files because I want to split up my controllers, so when I have the following 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>

My other files look similar to app.js

Upvotes: 0

Views: 157

Answers (1)

krillgar
krillgar

Reputation: 12805

JavaScript will always be parsed as it gets to it in the page. In the case of the script you wrote, it is all going to be run as it is parsed.

Having it in the <head> section of your HTML means that none of the DOM exists at the point that it is run.

Put the <script src="app.js"></script> in the same spot as you have the <script> in the top sample, and it will work as it did before.

Upvotes: 1

Related Questions