【发布时间】：2016-08-07 14:39:40
【问题描述】：
在被赋予将旧的 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
},
'signup@auth.accept': {
templateUrl: '/views/home/partials/auth/accept.signup.html'
},
'login@auth.accept': {
templateUrl: '/views/home/partials/auth/accept.login.html'
}
}
});
网站.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’re having a great day!</h4>
<p>
<i class="fa fa-circle-o-notch fa-spin"></i>
Please wait…
</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="name@example.com"
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>
【问题讨论】：
标签： angularjs django url state