Angular $ stateProvider trifft zwei Zustände

Mit der Aufgabe, eine alte Flask-Webanwendung in Django zu konvertieren, wurde ich in die Welt von Angular eingeführt. Ich bin immer noch sehr neu und habe Probleme mit Angulars UI-Router. Ich bin davon überzeugt, dass $ urlRouterProvider, wenn das Angular-Modul unten verwendet wird, jeden $ stateProvider-Status durchsucht und nach einer passenden URL sucht. Wenn keine vorhanden ist, liefert $ urlRouterProvider.otherwise die URL, die als eines der Argumente angegeben wurde. Wenn ich zu localhost: 8000/home/gehe, der Stammort, an dem app.guest ausgelöst wird, scheint es zwei Zustände zu treffen, den "auth" -Zustand und den "auth.login" -Zustand, weil es sowohl statische als auch Vorlagen lädt. home/partials/auth/main.html und 'statisch/templates/home/partials/auth/login.html'. Außerdem, da der erste Zustand keine URL liefert, sollte das nicht das sein, was er zuerst trifft?

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

'static/templates/home/partials/Auth/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 %}

'statisch/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>

Quelle

2016-04-15 JBT

Auth ist ein abstrakter Zustand, so dass er nicht direkt geladen wird. Stattdessen ist es ein "Eltern" -Zustand, in den die Unterzustände geladen werden.

Betrachten Sie es wie folgt aus:

Auth

Login
zurückgesetzt

Die Anmeldung und Reset-Zustände laden in die Auth abstrakte Sicht. Da templateUrl in der abstrakten Ansicht festgelegt ist, werden die Vorlagen für das Anmelden und Zurücksetzen in die ui-view-Ansicht in der abstrakten Ansicht geladen, die main.html lautet.

Soweit Ihre URL geladen wird, trifft es den Anmeldestatus, weil die URL /home nicht festgelegt ist, so dass die folgende Zeile ausgelöst wird.

$urlRouterProvider.otherwise('/login');

Quelle

2016-04-15 15:02:32 rabruce

ohhhhh, das macht Sinn. sollte nicht das Basis-Tag mit einem href von "/ home /" in index.html app.guest mitteilen, dass/home/das root für die folgenden URLs ist? bedeutet das für mich, einfach zur URL/home/zu gehen, ohne dass der Login-Status auslöst, müsste ich einen anderen Zustand mit einer leeren URL-Zeichenkette erstellen? – JBT

@TimothyJosephBaney es wäre eigentlich '/' aber du bist auf dem richtigen Weg. Da du deine Basis festgelegt hast, geht es nur voraus, was auch immer deine Zustände sind. Beachten Sie dabei jedoch, dass Sie Ihr Anmeldeskript meiden würden. – rabruce

Angular $ stateProvider trifft zwei Zustände

Antwort

Verwandte Themen