Menu
What I'm trying to do:
I am trying to build a RESTful Flask application on Google App Engine with Angular handling the routing and view logic while Flask handles back end logic and resources.
The Problem:
When I start the development server for GAE, the first page loads perfectly. The problem is that when I click the Referrals link at the top of the page the template being loaded doesn't change.
What I've done so far
While it seems like I pasted a lot of code below, most of it is markup and there isn't really any complex app logic in there so skimming is enough
I was planning on building the front end first, then the back end (although I have some of the backend setup already). The app does not rely on the flask app as of this moment (it doesn't have any app logic and doesn't have any request handlers)
Here is my app.js file, all I've done so far is routing, no logic:
// 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'
});
}]);
This is my app.yaml file, this is what I use to serve static pages
# 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
This is the base html template for the entire app:
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>
Below are the three templates:
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>
The files hierarchy is as follows:
- rcsbackend
- templates
- static
- img
- js
- css
- app.yaml
- main.py
246
Your solution got worked because by default html5mode is disabled, that is the reason why only the URL after # is recognized by the angular routing, and you putted route before your URL got it worked for you.
You need to enable html5mode in your application in order make your routing work, just by doing $locationProvider.html5Mode(true) in your configuration phase of angular.
Code
.config(function($locationProvider) {
$locationProvider.html5Mode(true);
})
Now you could back to your old code, will solve your issue.
Update
To link around your application using relative links, you will need to set a in the of your document.
<base href="/">
Refer this SO answer would help you while enabling html5mode in application.
55
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
