and - python flask
La ruta angular no funciona cuando se usa con Google App Engine y Flask (1)
Su solución funcionó porque, de manera predeterminada, html5mode está deshabilitado, esa es la razón por la que solo la URL después de # es reconocida por el enrutamiento angular, y usted puso la ruta antes de que su URL funcionase para usted.
Solución
html5mode habilitar html5mode en su aplicación para que su enrutamiento funcione, simplemente haciendo $locationProvider.html5Mode(true) en su fase de configuración de angular.
Código
.config(function($locationProvider) {
$locationProvider.html5Mode(true);
})
Ahora podría volver a su código anterior, resolverá su problema.
Actualizar
Para vincular su aplicación con enlaces relativos, deberá establecer una en el documento.
<base href="/">
Consulte esta respuesta SO que le ayudaría mientras habilita html5mode en la aplicación.
Lo que intento hacer
Intento crear una aplicación RESTful Flask en Google App Engine con Angular manejando la lógica de enrutamiento y visualización mientras Flask maneja la lógica y los recursos de back-end.
El problema:
Cuando inicio el servidor de desarrollo para GAE, la primera página se carga perfectamente. El problema es que cuando hago clic en el enlace Referencias en la parte superior de la página, la plantilla que se está cargando no cambia.
Lo que hice hasta ahora
Si bien parece que pegué una gran cantidad de código a continuación, la mayor parte es de marcado y no hay realmente ninguna lógica de aplicación compleja por lo que rozar es suficiente
Estaba planeando construir primero la parte delantera, luego la parte posterior (aunque ya tengo parte de la configuración de backend). La aplicación no depende de la aplicación del matraz a partir de este momento (no tiene ninguna lógica de aplicación y no tiene ningún controlador de solicitudes)
Aquí está mi archivo app.js, todo lo que he hecho hasta ahora es enrutamiento, sin lógica:
// 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''
});
}]);
Este es mi archivo app.yaml, esto es lo que uso para servir páginas estáticas
# 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
Esta es la plantilla html base para toda la aplicación:
templates / 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" alt="Website logo"></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 protected]</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>
A continuación están las tres plantillas:
templates / welcome-page.html
<!-- templates/welcome-page.html -->
<div><h1>MAIN PAGE</h1></div>
templates / referrals.html
<!-- templates/referrals.html -->
<div><h1>REFERRALS PAGE</h1></div>
templates / 404.html
<!-- templates/404.html -->
<div><h1>404</h1></div>
La jerarquía de archivos es la siguiente:
- rcsbackend
- templates
- static
- img
- js
- css
- app.yaml
- main.py