2

私はFirebaseと一般的なアプリケーションビルディングを自分自身で教えようとしています。私はiOSアプリケーションを完成させました。私は現在、Web側のバックエンドで作業しています。私はログインページ(home.html)とアカウントページ(account.html)を持っています。角型ファイアベース3 Auth Ui-Router

残念ながら、最初にページを読み込むときにログインセクションを読み込むことさえできません。私は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 
}]); 

ご協力いただきありがとうございます!

+0

あなたの家の状態から解決を取り除こうとすることはできますか? –

+0

まだ表示されていません。私は両方の状態からの解決を取り除こうとしました。 – Clinterific

答えて

0

app.jsの状態設定(詳細についてはui-router URL Routingを参照)にURLキーを追加してみてください。このような何か:

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

あなたはURLが(/ログインのような)何か他のものにしたい場合は、しかし、あなたはまたそうのように、$urlRouterProvider.otherwise()を使用してデフォルトルートを指定することができます。

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

(私はこの質問はすでに数ヶ月前ですが、何か他のものを探している間に見つけました。他の誰かがこの投稿に出会った場合に私の解決策を共有すると思いました)

関連する問題