CODEWITHSUNDEEP
angularjsfirebaseangularfire
Bryan Coxwell
Bryan Coxwell

Reputation: 119

AngularFire createUser example not working outside of Firebase website

In an attempt to learn AngularFire, I've been messing around with AngularFire user authentication methods. On the Firebase website, an example is given that, when I plug in my Firebase address in the proper place, works. When I copy and paste the code into Notepad++ and attempt to run it that way, the HTML works, but none of the Javascript does. I added an alert box to the Javascript, and on opening the page, the alert box popped up, but none of the rest of the JS worked. I feel like I'm missing something very obvious. What am I doing wrong?

Thanks for any help!

My code is as follows: 

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

Upvotes: 0

Views: 520

Answers (1)

Graham
Graham

Reputation: 162

I think what has happened is that you have used the ng-app directive twice in your html. If you look at the Angular documentation for ng-app, the first ng-app tag is auto bootstrapped as an application, any additional ng-app have to be manually loaded. Also, you cannot nest applications in a page. When I tried to run your application the SampleCtrl controller is undefined.

I've removed the first ng-app directive and the rest of your code seems to work fine in this plunker I've created.

<!DOCTYPE html>
<!--
ng-app directive is already delclared in the body, removing this one
<html ng-app>
-->

<html>

<head>
...
</head>

<body>
  <div ng-app="sampleApp" ng-controller="SampleCtrl">
  ...
</body>
</html>

Upvotes: 3

Related Questions