1. 首頁
  2. 問答
  3. Angular $ stateProvider命中兩個狀態

Angular $ stateProvider命中兩個狀態

2016-04-15 67 views
0

在被賦予將舊的Flask Web應用程序轉換爲Django的任務後，我被引入Angular世界。我還很新，並且在Angular的ui-routerJs上遇到麻煩。這是我的理解，給定下面的Angular模塊，$ urlRouterProvider將經歷每個$ stateProvider狀態，並尋找匹配的url。如果沒有，$ urlRouterProvider.otherwise將提供作爲其參數之一提供的url。當我去到localhost：8000/home /，app.guest觸發的根目錄位置時，它似乎打到兩個狀態，'auth'狀態和'auth.login'狀態，因爲它正在加載靜態/模板/ home/partials/auth/main.html和'static/templates/home/partials/auth/login.html'。此外，由於第一個狀態不提供url，不應該是它首先命中的嗎？

/** ngInject */ 
    function Config($locationProvider, $stateProvider, $urlRouterProvider) { 
    $locationProvider.html5Mode(true); 

    $urlRouterProvider.otherwise('/login'); 

    $stateProvider 
     .state('auth', { 
      abstract: true, 
      templateUrl: 'static/templates/home/partials/auth/main.html', 
      controller: 'Auth', 
      controllerAs: 'auth' 
     }) 
     .state('auth.login', { 
      url: '/login?next', 
      templateUrl: 'static/templates/home/partials/auth/login.html', 
      controller: 'Login', 
      controllerAs: 'vm' 
     }) 
     .state('auth.reset', { 
      url: '/reset', 
      template: "<div class='card card-half'>This screen is not yet ready. ¯\\_(ツ)_/¯</div>", 
      controller: broadcastReady 
     }) 
     .state('auth.join', { 
      abstract: true, 
      templateUrl: '/static/templates/home/partials/auth/join.html', 
      controller: 'Join', 
      controllerAs: 'vm' 
     }) 
     .state('auth.join.personal', { 
      url: '/join?invite', 
      templateUrl: '/static/templates/home/partials/auth/join.personal.html', 
      controller: broadcastReady 
     }) 
     .state('auth.join.team', { 
      templateUrl: '/static/templates/home/partials/auth/join.team.html', 
      controller: broadcastReady 
     }) 
     .state('auth.accept', { 
      url: '/accept/{token}?data', 
      views: { 
       '': { 
        templateUrl: '/views/home/partials/auth/accept.html', 
        controller: 'Accept', 
        controllerAs: 'vm', 
        reloadOnSearch: false 
       }, 
       '[email protected]': { 
        templateUrl: '/views/home/partials/auth/accept.signup.html' 
       }, 
       '[email protected]': { 
        templateUrl: '/views/home/partials/auth/accept.login.html' 
       } 
      } 
     });

site.html

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="shortcut icon" href="/images/favicons/favicon.ico"> 
    <link rel="icon" sizes="16x16 32x32 64x64" href="/images/favicons/favicon.ico"> 
    <link rel="icon" type="image/png" sizes="196x196" 
     href="/images/favicons/favicon-192.png"> 
    <link rel="icon" type="image/png" sizes="160x160" 
     href="/images/favicons/favicon-160.png"> 
    <link rel="icon" type="image/png" sizes="96x96" href="/images/favicons/favicon-96.png"> 
    <link rel="icon" type="image/png" sizes="64x64" href="/images/favicons/favicon-64.png"> 
    <link rel="icon" type="image/png" sizes="32x32" href="/images/favicons/favicon-32.png"> 
    <link rel="icon" type="image/png" sizes="16x16" href="/images/favicons/favicon-16.png"> 
    <link rel="apple-touch-icon" href="/images/favicons/favicon-57.png"> 
    <link rel="apple-touch-icon" sizes="114x114" href="/images/favicons/favicon-114.png"> 
    <link rel="apple-touch-icon" sizes="72x72" href="/images/favicons/favicon-72.png"> 
    <link rel="apple-touch-icon" sizes="144x144" href="/images/favicons/favicon-144.png"> 
    <link rel="apple-touch-icon" sizes="60x60" href="/images/favicons/favicon-60.png"> 
    <link rel="apple-touch-icon" sizes="120x120" href="/images/favicons/favicon-120.png"> 
    <link rel="apple-touch-icon" sizes="76x76" href="/images/favicons/favicon-76.png"> 
    <link rel="apple-touch-icon" sizes="152x152" href="/images/favicons/favicon-152.png"> 
    <link rel="apple-touch-icon" sizes="180x180" href="/images/favicons/favicon-180.png"> 
    <link rel="stylesheet/less" href="../webapp/static/less/accounts/all.less"> 
    <meta name="msapplication-TileColor" content="#FFFFFF"> 
    <meta name="msapplication-TileImage" content="/images/favicons/favicon-144.png"> 
    <meta name="msapplication-config" content="/images/favicons/browserconfig.xml"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script> 
    <script src="https://code.angularjs.org/1.4.5/angular-animate.js"></script> 
    <script src="https://code.angularjs.org/1.4.5/angular-messages.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.1/ui-bootstrap.js"></script> 

    <!--[% assets "css_all" -%]--> 
    <!--<link rel="stylesheet" href="[= ASSET_URL =]" />--> 
    <!--[%- endassets %]--> 

    {% block head %} {% endblock %} 
    {% block styles %} {% endblock %} 
    <script type="text/javascript"> 
    window.HL = {}; 
// window.HL.userdata = {= userdata | tojson | safe =}; 
    </script> 
</head> 

<body class="{% block layout %}{% endblock %}" ng-app={% block ngapp %}{% endblock %}> 

{% block nav %} 
{% include "nav.html" %} 
{% endblock %} 

{% include "site-alert.html" %} 

<div class="{% block container %}container container-main{% endblock %}"> 
    {% block content_wrapper %} 
     {% block content %} 
     {% endblock %} 
    {% endblock %} 
</div> 

{% block footer %} 
{% include "footer.html" %} 
{% endblock %} 

<!--[% assets "js_vendor" -%]--> 
<!--<script src="[= ASSET_URL =]"></script>--> 
<!--[%- endassets %]--> 

<!--[% assets "js_templates" -%]--> 
<!--<script src="[= ASSET_URL =]"></script>--> 
<!--[%- endassets %]--> 

<!--[% assets "js_app" -%]--> 
<!--<script src="[= ASSET_URL =]"></script>--> 
<!--[%- endassets %]--> 

{% block scripts %} {% endblock %} 
</body> 
</html>

'靜態/模板/家庭/諧音/認證/ main.html中'

<div ui-view ng-show="auth.viewReady"></div> 

<div class="card" ng-hide="auth.viewReady"> 
    <h4>Hope you&rsquo;re having a great day!</h4> 
    <p> 
    <i class="fa fa-circle-o-notch fa-spin"></i> 
    Please wait&hellip; 
    </p> 
</div>

home.index.html

{% extends "site.html" %} 
{% load staticfiles %} 

{% block scripts %} 
    <script type="text/javascript" src="{% static "js/humanlink.js" %}"></script> 
{% endblock %} 

{% block title %} Humanlink Home {% endblock %} 

{% block ngapp %}"app.guest"{% endblock %} 

{% block head %} 
<base href="/home/"> 
{% endblock %} 

{% block content %} 
<div> 
    <div ui-view> 
     <i>CONTENT WILL GO HERE</i> 
    </div> 
</div> 
<br> 
{% endblock %}

'static/templates/home/partials/auth/login.html'

<div class="account-login" id="login-view"> 
    <div class="card card-half"> 
    <h2 class="text-center">Welcome back!</h2> 
    <h4 class="text-center">Sign in to your account.</h4> 

    <div class="alert alert-danger" ng-if="vm.errorMessage"> 
     {{ vm.errorMessage }} 
    </div> 

    <form class="form-horizontal" name="form" ng-submit="vm.login(vm.auth)"> 

     <div class="form-group"> 
     <label for="email" class="col-sm-3 control-label">Email</label> 

     <div class="col-sm-9 col-md-7"> 
      <input type="email" id="email" 
       class="form-control" 
       placeholder="[email protected]" 
       ng-model="vm.auth.email" 
       required 
       hl-focus> 
     </div> 
     </div> 

     <div class="form-group"> 
     <label for="password" class="col-sm-3 control-label">Password</label> 

     <div class="col-sm-9 col-md-7"> 
      <input type="password" id="password" name="password" 
       class="form-control" 
       placeholder="******" 
       ng-model="vm.auth.password" 
       required minlength="6"> 

      <div class="has-warning" ng-if="form.password.$dirty"> 
      <div class="help-block" ng-messages="form.password.$error"> 
       <div ng-message="minlength">Please enter at least six characters. 
       </div> 
      </div> 
      </div> 

     </div> 
     </div> 

     <div class="form-group"> 
     <div class="col-sm-3"></div> 
     <div class="col-sm-9 col-md-7"> 
      <button type="submit" class="btn btn-block btn-secondary" 
       ng-disabled="!form.$valid || vm.submitBusy"> 
      Sign in 
      <span ng-if="vm.submitBusy"><i class="fa fa-circle-o-notch fa-spin"></i></span> 
      </button> 
     </div> 
     </div> 

    </form> 

    </div> 
</div> 

<div class="col-sm-6 col-sm-offset-3"> 
    <p>Forgot your password? Reset it 
     <a ui-sref="auth.reset">here</a>.</p> 
    <p>Trying to create a team? 
     <a ui-sref="auth.join.personal">Sign up</a> to get started.</p> 
</div>

enter image description here

來源

2016-04-15 JBT

回答

1

驗證是一種抽象的狀態，因此它不直接加載。相反，它是一個「父」狀態，子狀態被加載進去。

把它看成是這樣的：

驗證

  • 登錄
  • 復位

登錄名和復位狀態加載到AUTH抽象視圖。由於在抽象視圖上設置了templateUrl，因此用於登錄和重置的模板將加載到抽象視圖中設置的ui-view上，即main.html。

只要你的網址加載去了，它就會登錄登錄狀態，因爲沒有設置網址/home，所以會觸發以下行。

$urlRouterProvider.otherwise('/login');

來源

2016-04-15 15:02:32 rabruce

+0

ohhhhh，好吧，這是有道理的。不應該在index.html中使用href爲「/ home /」的base標記告訴app.guest/home /是以下視圖url的根目錄？這是否意味着我只需轉到url/home /沒有登錄狀態觸發，我需要創建一個空的url字符串''的另一個狀態？ – JBT

+0

@TimothyJosephBaney它實際上是'/'，但你在正確的軌道上。既然你有你的基地設置，它只是預先，無論你的國家是什麼。但是，如果您這樣做，請注意您將避免登錄腳本。 – rabruce

相關問題

 相關問題