Angular Firebase 3 Auth Ui-Router

Question

我一直在尝试自学 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
}]);

提前感谢您的帮助！

Answer 1

尝试在 app.js 中将 url 键添加到您的状态配置（请参阅 ui-router URL Routing 了解更多信息）。像这样的：

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

如果您希望 URL 是其他内容（例如 /login），您也可以使用 $urlRouterProvider.otherwise() 指定默认路由，如下所示：

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

（我知道这个问题已经有几个月的历史了，但我在搜索其他内容时发现了它，并认为我会分享我的解决方案以防其他人看到这篇文章）