与 Google App Engine 和 Flask 一起使用时，Angular 路由不起作用
Posted
技术标签:
【中文标题】与 Google App Engine 和 Flask 一起使用时，Angular 路由不起作用【英文标题】：Angular route not working when used with Google App Engine and Flask 【发布时间】：2015-08-14 23:10:38 【问题描述】：我想做的事：
我正在尝试在 Google App Engine 上构建一个 RESTful Flask 应用程序，其中 Angular 处理路由和视图逻辑，而 Flask 处理后端逻辑和资源。
问题：
当我为 GAE 启动开发服务器时，第一页加载完美。问题是当我单击页面顶部的引用链接时，正在加载的模板不会改变。
到目前为止我做了什么
虽然我似乎在下面粘贴了很多代码，但其中大部分是标记，其中并没有任何复杂的应用程序逻辑，因此略读就足够了
我计划先构建前端，然后再构建后端（尽管我已经设置了一些后端）。到目前为止，该应用程序不依赖于烧瓶应用程序（它没有任何应用程序逻辑，也没有任何请求处理程序）
这是我的 app.js 文件，到目前为止我所做的只是路由，没有逻辑：
// app.js, only angular code in project and only does routing
var rcsApp = angular.module('rcsApp', [
'ngRoute'
]);
rcsApp.config(['$routeProvider',
function($routeProvider)
$routeProvider.
when('/',
templateUrl: 'templates/welcome-page.html'
).
when('/index',
templateUrl: 'templates/welcome-page.html'
).
when('/referrals',
templateUrl: 'templates/referrals.html'
).
when('/404',
templateUrl: 'templates/404.html'
).
otherwise(
redirectTo: '/404'
);
]);
这是我的 app.yaml 文件，这是我用来提供静态页面的文件
# This file specifies your Python application's runtime configuration
# including URL routing, versions, static file uploads, etc. See
# https://developers.google.com/appengine/docs/python/config/appconfig
# for details.
# TODO: Enter your application id below. If you have signed up
# using cloud.google.com/console use the "project id" for your application
# id.
application: placeholder
version: 1
runtime: python27
api_version: 1
threadsafe: yes
# Handlers define how to route requests to your application.
handlers:
# App Engine serves and caches static files contained in the listed directories
# (and subdirectories). Uncomment and set the directory as needed.
#- url: /client
# static_dir: client
- url: /css
static_dir: static/css
- url: /img
static_dir: static/img
- url: /js
static_dir: static/js
- url: /templates
static_dir: templates
- url: /api/.*
script: main.app
- url: .*
static_files: templates/app-view-wrapper.html
upload: templates/app-view-wrapper.html
# Third party libraries that are included in the App Engine SDK must be listed
# here if you want to use them. See
# https://developers.google.com/appengine/docs/python/tools/libraries27 for
# a list of libraries included in the SDK. Third party libs that are *not* part
# of the App Engine SDK don't need to be listed here, instead add them to your
# project directory, either as a git submodule or as a plain subdirectory.
# TODO: List any other App Engine SDK libs you may need here.
#libraries:
#- name: jinja2
# version: latest
这是整个应用程序的基本 html 模板：
模板/app-view-wrapper.html
<!-- templates/app-view-wrapper.html -->
<!DOCTYPE HTML>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" ng-app="rcsApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css"/>
<link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/5.5.1/css/foundation.min.css"/>
<link rel="stylesheet" href="/css/style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular-route.min.js"></script>
<script src="/js/app.js"></script>
<title>Website Title</title>
</head>
<body>
<header>
<div class="row">
<div class="large-4 columns"><img src="/img/website-logo.png" ></div>
<div class="large-8 columns">
<a href="#" class="button right">555-555-5555</a>
<a href="#" class=" button right">Make an Appointment</a>
</div>
</div>
<div class="row" id="nav-row">
<nav class=" top-bar">
<section class=" top-bar-section">
<ul class="left">
<li><a href="/">Home</a></li>
<li><a href="/">Services</a></li>
<li><a href="/">Meet the Doctor</a></li>
<li><a href="/">Patients</a></li>
<li><a href="/referrals">Referring Doctors</a></li>
<li><a href="/">Contact Us</a></li>
</ul>
</section>
</nav>
</div>
<div ng-view></div>
</header>
<footer class="row">
<div class="large-5 columns">
<h3>Location</h3>
<div>123 ABC STREET</div>
<div>Phone Number: 555-5555555</div>
<div>Email: email@email.com</div>
</div>
<div class="large-4 columns">
<h3>Quick Contact</h3>
<div>Work: 555-5555555</div>
<div>Cell: 555-5555555</div>
<div>Fax: 555-5555555</div>
</div>
<div class="large-3 columns">
Lorem Ipsum Sit Dolor Amet
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
<script src="/js/script.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
以下是三个模板：
模板/welcome-page.html
<!-- templates/welcome-page.html -->
<div><h1>MAIN PAGE</h1></div>
模板/referrals.html
<!-- templates/referrals.html -->
<div><h1>REFERRALS PAGE</h1></div>
模板/404.html
<!-- templates/404.html -->
<div><h1>404</h1></div>
文件层次结构如下：
- rcsbackend
- templates
- static
- img
- js
- css
- app.yaml
- main.py
【问题讨论】：
您能提供文件层次结构吗？ 【参考方案1】：您的解决方案成功了，因为默认情况下 html5mode 被禁用，这就是为什么只有 URL 之后的 URL 被角度路由识别，并且您在 URL 为您工作之前放置了路由。
解决方案
您需要在您的应用程序中启用html5mode 以使您的路由工作，只需在您的角度配置阶段执行$locationProvider.html5Mode(true)。
代码
.config(function($locationProvider)
$locationProvider.html5Mode(true);
)
现在您可以回到旧代码，将解决您的问题。
更新
要使用相对链接链接您的应用程序，您需要在文档中设置 a。
<base href="/">
在应用程序中启用html5mode 时，请参考此SO answer。
【讨论】：
如果您不介意，您能告诉我在 html5 中启用或添加了哪些功能使这成为可能吗？ （或者说真的，我更感兴趣的是在 html5 让这成为不可能之前的 html 是什么） 好的，这是部分解决方案，我需要做的另一件事是在我的主 html 包装器中放置一个以上是关于与 Google App Engine 和 Flask 一起使用时，Angular 路由不起作用的主要内容，如果未能解决你的问题，请参考以下文章
将 Google 回合制多人游戏与 Google App Engine 集成
Google App Engine 通过内部网络与 Compute Engine 通信
如何将 AJAX 与 Google App Engine (Python) 结合使用