AngularJS code not working

Question

I have the following code:

<!doctype html>
<html ng-app>
<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>    
</head>
<body>
<script>
var app = angular.module("sampleApp", ["firebase"]);

        // let's create a re-usable factory that generates the $firebaseAuth instance
    app.factory("Auth", ["$firebaseAuth",
      function($firebaseAuth) {
        var ref = new Firebase("https://xxxxx.firebaseio.com/?page=Auth");
        return $firebaseAuth(ref);
      }
    ]);

    // and use it in our controller
    app.controller("SampleCtrl", ["$scope", "Auth",
      function($scope, Auth) {
        $scope.createUser = function() {
          $scope.message = null;
          $scope.error = null;

          Auth.$createUser({
            email: $scope.email,
            password: $scope.password
          }).then(function(userData) {
            $scope.message = "User created with uid: " + userData.uid;
          }).catch(function(error) {
            $scope.error = error;
          });
        };

        $scope.removeUser = function() {
          $scope.message = null;
          $scope.error = null;

          Auth.$removeUser({
            email: $scope.email,
            password: $scope.password
          }).then(function() {
            $scope.message = "User removed";
          }).catch(function(error) {
            $scope.error = error;
          });
        };
      }
    ]);
  </script>
      <div ng-app="sampleApp" ng-controller="SampleCtrl">
               Email: <input type="text" ng-model="email">
               Password: <input type="text" ng-model="password">

  <br><br>

  <button ng-click="createUser()">Create User</button>

  <br><br>

  <button ng-click="removeUser()">Remove User</button>

  <p ng-if="message">Message: <strong>{{ message }}</strong></p>
  <p ng-if="error">Error: <strong>{{ error }}</strong></p>

</div>
</body>
</html>

For whatever reason, the Javascript isn't working. I feel like I'm missing something painfully obvious.

The code is copied and pasted from the AngularFire tutorials.

Any ideas?

Thanks!

Will you explain "isn't working" in this context? What do you expect to happen, and what is happening instead? — George Cummins
– George Cummins, Commented Mar 30, 2015 at 1:23
@George Cummins The code should be registering a user at my Firebase account. If the email address isn't an email address, an error code should appear. Same goes for if you leave one of the forms empty. None of that happens. I added an alertbox at the top of the javascript to see if it would pop up, and it did, but none of the rest of the javascript works — Bryan Coxwell
– Bryan Coxwell, Commented Mar 30, 2015 at 2:09

Nicholas Daley-Okoye · Accepted Answer · 2015-03-30 06:01:33Z

Multiple ng-app on same page won't work. Angular will only compile 1st ng-app other ng-app directive will be neglected. You mentioned ng-app two times on the page, remove one from the html tag will start your application.

Markup

<div ng-app="sampleApp" ng-controller="SampleCtrl">
    Email:
    <input type="text" ng-model="email"> Password:
    <input type="text" ng-model="password">

    <br/>
    <br/>

    <button ng-click="createUser()">Create User</button>

    <br/>
    <br/>

    <button ng-click="removeUser()">Remove User</button>

    <p ng-if="message">Message: <strong>{{ message }}</strong></p>
    <p ng-if="error">Error: <strong>{{ error }}</strong></p>

</div>

An Alternative

However you can have multiple AngularJS apps on the same page without using ng-app, by using the function angular.bootstrap().

As it says on the docs page for ng-app

Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other.

May want to extend this answer to note that you can have multiple apps on the page if you start them using angular.bootstrap()
edited. Though I suppose in the OP's question, the problem is really that one of the ng-apps isn't needed.
@NicholasDaley Thanks for Edit, I accepted it and explanation is too good. :)

Collectives™ on Stack Overflow

AngularJS code not working

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related