Angular Firebase 3 Auth Ui-Router

我一直在尝试自学Firebase和应用程序构建。我有我的iOS应用程序完成，我现在在web端后端工作。我有一个登录页面(home.html)和一个帐户页面(account.html)。

不幸的是，当第一次加载页面时，我甚至不能让它加载登录部分。我有背景和一切从index.html，但对我来说，它不是把从登录页面的HTML，即使没有人登录。

从index.html:

开始

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

我的登录视图为:

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

然后我的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
}]);

提前感谢您的帮助!

尝试在app.js中的状态配置中添加url键(更多信息请参见ui-router url Routing)。像这样:

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

如果你希望URL是其他东西(比如/login)，你也可以使用$ urlrouterprovider . else()指定一个默认路由，如下所示:

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

(我知道这个问题已经有几个月了，但是我在寻找其他东西的时候发现了它，我想我会分享我的解决方案，以防其他人看到这篇文章)

相关内容

最新更新

热门标签：