CODEWITHSUNDEEP
javascripthtmlangularjs
Bryan Coxwell
Bryan Coxwell

Reputation: 119

AngularJS code not working

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!

Upvotes: 1

Views: 116

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

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.

Upvotes: 2

Related Questions