Angular Firebase 3 Auth Ui-Router

Ich habe versucht, mich selbst Firebase und App-Gebäude im Allgemeinen zu lehren. Ich habe meine iOS App fertiggestellt und arbeite jetzt am Backend der Webseite. Ich habe eine Login-Seite (home.html) und eine Account-Seite (account.html).Angular Firebase 3 Auth Ui-Router

Leider kann ich es nicht einmal laden, um den Login-Bereich zu laden, wenn die Seite zum ersten Mal geladen wird. Ich habe den Hintergrund und alles von der index.html, aber für mich ist es nicht von der Login-Seite im HTML setzen, auch wenn niemand angemeldet ist

ich index.html beginnen.

<script src="/bower_components/angular/angular.js"></script> 
<script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-resource.min.js"></script> 
<!-- Firebase --> 
<script src="https://www.gstatic.com/firebasejs/3.2.0/firebase.js"></script> 

<!-- AngularFire --> 
<script src="https://cdn.firebase.com/libs/angularfire/2.0.2/angularfire.min.js"></script> 
<script src="app.js"></script> 

</head> 


    <body ng-app="employeeApp"> 
    <div class="container"> 
    <div ui-view> 

    </div> 
</div> 

</body>

ich habe meine Login-Ansicht als:

<div> 
     <div class="row-fluid"> 

      <div class="row-fluid"> 
       <div class="login-box"> 
        <h2>Login</h2> 
        <form ng-submit="loginUser()" class="form-horizontal"> 
         <fieldset> 

          <div class="input-prepend" title="Username"> 
           <span class="add-on"><i class="halflings-icon user"></i></span> 
           <input class="input-large span10" name="email" id="txtEmail" type="text" placeholder="type email" ng-model="email"/> 

          </div> 
          <div class="clearfix"></div> 

          <div class="input-prepend" title="Password"> 
           <span class="add-on"><i class="halflings-icon lock"></i></span> 
           <input class="input-large span10" name="password" id="txtPassword" type="password" placeholder="type password"/ ng-model="password"> 
          </div> 
          <div class="clearfix"></div> 

          <label class="remember" for="remember"><input type="checkbox" id="remember" />Remember me</label> 

          <div class="button-login"> 
           <button type="submit" class="btn btn-primary" id="btnLogin" ng-model="signIn)">Login</button> 
          </div> 


        </form> 
       </div><!--/span--> 
      </div><!--/row--> 
    </div> 
</div>

Dann ist mein app.js:

var app = angular.module('employeeApp', ['ui.router', 'firebase', 'ngResource']);          

var config = { 
    apiKey: "xxx", 
    authDomain: "xxx.firebaseapp.com", 
    databaseURL: "https://xxx.firebaseio.com", 
    storageBucket: "xxx.appspot.com", 
    }; 

firebase.initializeApp(config); 

app.factory("Auth", ["$firebaseAuth", 
    function($firebaseAuth) { 
    return $firebaseAuth(); 

    } 
]); 

app.run(["$rootScope", "$state", function($rootScope, $state) { 
    $rootScope.$on("$stateChangeError", function(event, toState, toParams, fromState, fromParams, error) { 
    // We can catch the error thrown when the $requireSignIn promise is rejected 

    // and redirect the user back to the home page 
    if (error === "AUTH_REQUIRED") { 
     $state.go("home"); 
    } 
    }); 
}]); 

app.config(["$stateProvider", function ($stateProvider) { 
    $stateProvider 
    .state("home", { 
     // the rest is the same for ui-router and ngRoute... 
     controller: "HomeCtrl", 
     templateUrl: "views/home.html", 
     resolve: { 
     // controller will not be loaded until $waitForSignIn resolves 
     // Auth refers to our $firebaseAuth wrapper in the factory below 
     "currentAuth": ["Auth", function(Auth) { 
      // $waitForSignIn returns a promise so the resolve waits for it to complete 
      return Auth.$waitForSignIn(); 

     }] 

     } 
    }) 
    .state("account", { 
     // the rest is the same for ui-router and ngRoute... 
     controller: "AccountCtrl", 
     templateUrl: "views/account.html", 
     resolve: { 
     // controller will not be loaded until $requireSignIn resolves 
     // Auth refers to our $firebaseAuth wrapper in the factory below 
     "currentAuth": ["Auth", function(Auth) { 
      // $requireSignIn returns a promise so the resolve waits for it to complete 
      // If the promise is rejected, it will throw a $stateChangeError (see above) 
      return Auth.$requireSignIn(); 
     }] 
     } 
    }); 

}]); 

app.controller("HomeCtrl", ["currentAuth", function(currentAuth, $state) { 
    // currentAuth (provided by resolve) will contain the 
    // authenticated user or null if not signed in 
}]); 

app.controller("AccountCtrl", ["currentAuth", function(currentAuth) { 

    // currentAuth (provided by resolve) will contain the 
    // authenticated user or null if not signed in 
}]);

Vielen Dank im Voraus für Ihre Hilfe!

Quelle

2016-09-07 Clinterific

Können Sie versuchen, die Auflösung aus Ihrem Heimatstaat zu entfernen? –

Immer noch nicht angezeigt. Ich habe versucht, die Entschlossenheit aus beiden Staaten zu entfernen. – Clinterific

Versuchen Sie, einen URL-Schlüssel zu Ihrer Statuskonfiguration (en) in app.js hinzuzufügen (siehe ui-router URL Routing für weitere Informationen). Etwas wie folgt aus:

$stateProvider 
    .state("home", { 
     url: '/', // **Add this line** 
     controller: "HomeCtrl",

Wenn Sie die URL wollen etwas anderes (wie/login) sein, obwohl, können Sie auch eine Standardroute angeben $urlRouterProvider.otherwise() verwenden, etwa so:

app.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) { 
    // **Add this** 
    $urlRouterProvider.otherwise('/login'); 
    $stateProvider 
    .state("home", { 
     url: '/login', // **And This** 
     controller: "HomeCtrl",

(I wissen, dass diese Frage bereits ein paar Monate alt ist, aber ich fand es bei der Suche nach etwas anderem und dachte, ich würde meine Lösung teilen, falls jemand anderes auf diesen Beitrag stößt)

Quelle

2016-11-11 02:24:22 brodyprice

Angular Firebase 3 Auth Ui-Router

Antwort

Verwandte Themen