与谷歌App Engine和瓶使用时角路线不工作 [英] Angular route not working when used with Google App Engine and Flask

查看：137 发布时间：2016/4/10 21:42:22 python angularjs google-app-engine flask angularjs-routing

本文介绍了与谷歌App Engine和瓶使用时角路线不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图做的事：

我试图建立与折角处理路由和视图逻辑在谷歌App Engine的一个RESTful应用瓶瓶时处理后端逻辑和资源。

问题：

当我启动开发服务器GAE，第一个页面加载完美。问题是，当我点击介绍人在模板被加载不会改变页面顶部链接。

我到目前为止已经完成

虽然好像我粘贴了很多code以下，大部分是标记并没有真正有任何复杂的应用程序逻辑，所以撇足够

我打算首先构建前端，那么后端（虽然我有一些后端安装的话）。该应用程序不依赖于烧瓶应用，因为这一刻的（它没有任何的应用程序逻辑，并没有任何请求处理）

下面是我的app.js文件，所有我迄今所做的路由，没有逻辑：

  // app.js，项目只角code和只做路由
VAR rcsApp = angular.module（'rcsApp'，[
    ngRoute
]）;rcsApp.config（['$ routeProvider'，
    功能（$ routeProvider）{
        $ routeProvider。
            什么时候（'/'， {
                templateUrl：'模板/欢迎-page.html即可
            }）。
            当（'/指数'，{
                templateUrl：'模板/欢迎-page.html即可
            }）。
            当（'/请示'，{
                templateUrl：'模板/ referrals.html
            }）。
            当（'/ 404'，{
                templateUrl：'模板/ 404.html'
            }）。
            除此以外（{
                redirectTo：'/ 404'
            }）;}]）;

这是我的app.yaml文件，这是我用它来提供静态页面

 ＃此文件指定你的Python应用程序的运行时配置
＃包括URL路由，版本静态文件上传等见
＃https://developers.google.com/appengine/docs/python/config/appconfig
＃了解详情。＃TODO：在下面输入您的应用程序ID。如果您已报名
＃使用cloud.google.com/console使用项目ID为您的应用
＃ ID。
应用：占位符
版本：1
运行时间：python27
API_VERSION：1
线程：是＃处理程序定义如何将请求路由到您的应用程序。
处理程序：
＃App Engine的供应和缓存包含在列出的目录静态文件
＃（和子目录）。取消注释并根据需要设置的目录。
＃ - 网址：/客户端
＃static_dir：客户端 - 网址：/ CSS
  static_dir：静态/ CSS - 网址：/ IMG
  static_dir：静态/ IMG - 网址：/ JS
  static_dir：静态/ JS - 网址：/模板
  static_dir：模板 - 网址：/api/.*
  脚本：main.app - 网址：*。
  static_files：模板/应用 - 视图 -  wrapper.html
  上传：模板/应用 - 视图 -  wrapper.html这包括在App Engine SDK＃第三方库必须列出
＃在这里，如果你想使用它们。看到
＃https://developers.google.com/appengine/docs/python/tools/libraries27为
＃包含在SDK库的列表。第三方库是*不*部分
在App Engine SDK排名，不需要在这里列出来，而不是将它们添加到您的
＃项目目录，无论是作为一个Git子模块或作为一个普通的子目录。
＃TODO：列出你可能需要在这里任何其他的App Engine SDK库。
#libraries：
＃ - 名称：Jinja2的
＃版本：最新

这是整个应用程序的基础HTML模板：

模板/应用 - 视图 - wrapper.html

 ＆LT;！ - 模板/应用 - 视图 -  wrapper.html  - ＆GT;
＆LT;！DOCTYPE HTML＆GT;＆LT;！ -  [如果IE 9]＆GT;＆LT; HTML类=LT-IE10LANG =ENGT＆;百分比抑制率ENDIF]  -  GT！;
＆LT; HTML类=无JSLANG =ENNG-应用=rcsApp＆GT;
    ＆LT; HEAD＆GT;
        ＆LT;间的charset =UTF-8＆GT;
        ＆LT; META NAME =视口CONTENT =WIDTH =设备宽度，初始规模= 1.0＆GT;
        ＆LT;链接rel =stylesheet属性SRC =// normalize-css.google code.com / SVN /主干/ normalize.css/＆GT;
        ＆LT;链接rel =stylesheet属性类型=文/ CSS的href =// cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css\"/>
        ＆LT;链接rel =stylesheet属性HREF =// cdn.jsdelivr.net/foundation/5.5.1/css/foundation.min.css\"/>
        ＆LT;链接rel =stylesheet属性HREF =/ CSS / style.css文件＆GT;
        ＆LT;脚本的src =// cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js\"></script>
        ＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/1.3.15/angular.min.js＆GT;＆LT; / SCRIPT＆GT;
        ＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/1.3.15/angular-route.min.js＆GT;＆LT; / SCRIPT＆GT;
        ＆LT;脚本的src =/ JS / app.js＆GT;＆LT; / SCRIPT＆GT;
        ＆LT;标题＆GT;网站标题＆LT; /标题＆GT;
    ＆LT; /头＆GT;
    ＆LT;身体GT;
        ＆LT;报头GT;
            ＆LT; DIV CLASS =行＆GT;
                ＆LT; DIV CLASS =大4列＆GT;＆LT; IMG SRC =/ IMG公司/网站logo.pngALT =网站标识＆GT;＆LT; / DIV＆GT;
                ＆LT; DIV CLASS =大8列＆GT;
                        ＆LT; A HREF =＃类=按钮右侧＆GT; 555-555-5555＆LT; / A＆GT;
                        ＆LT; A HREF =＃类=按钮右侧＆GT;预约＆LT; / A＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
            ＆LT; DIV CLASS =行ID =导航行＆GT;
                ＆LT;导航类=顶吧＆GT;
                    ＆lt;节类=顶级酒吧节＆GT;
                        ＆LT; UL类=左＆GT;
                            ＆LT;立GT;＆LT; A HREF =/＆GT;家庭和LT; / A＆GT;＆LT; /李＆GT;
                            ＆LT;立GT;＆LT; A HREF =/＆GT;服务及LT; / A＆GT;＆LT; /李＆GT;
                            ＆LT;立GT;＆LT; A HREF =/＆GT;配合医生＆LT; / A＆GT;＆LT; /李＆GT;
                            ＆LT;立GT;＆LT; A HREF =/＆GT;与患者LT; / A＆GT;＆LT; /李＆GT;
                            ＆LT;立GT;＆LT; A HREF =/转诊＆GT;参照医生及LT; / A＆GT;＆LT; /李＆GT;
                            ＆LT;立GT;＆LT; A HREF =/＆GT;联系我们＆LT; / A＆GT;＆LT; /李＆GT;
                        ＆LT; / UL＆GT;
                    ＆LT; /节＆gt;
                ＆LT; / NAV＆GT;
            ＆LT; / DIV＆GT;
            ＆LT; DIV NG-视图＆gt;＆LT; / DIV＆GT;
        ＆LT; /头＆GT;
        ＆LT;页脚类=行＆GT;
            ＆LT; DIV CLASS =大5列＆GT;
                ＆LT; H3＆GT;位置和LT; / H3 GT＆;
                ＆LT; DIV＆GT; 123 ABC STREET＆LT; / DIV＆GT;
                ＆LT; DIV＆GT;电话：555-5555555＆LT; / DIV＆GT;
                ＆LT; DIV＆GT;电子邮件：email@email.com< / DIV＆GT;            ＆LT; / DIV＆GT;
            ＆LT; DIV CLASS =大4列＆GT;
                ＆LT; H3＆GT;快速联系与LT; / H3 GT＆;                ＆LT; DIV＆GT;工作：555-5555555＆LT; / DIV＆GT;
                ＆LT; DIV＆GT;手机：555-5555555＆LT; / DIV＆GT;
                ＆LT; DIV＆GT;传真：555-5555555＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
            ＆LT; DIV CLASS =大3列＆GT;
               Lorem存有悲坐AMET
            ＆LT; / DIV＆GT;        ＆LT; /页脚＆GT;
        ＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js＆GT;＆下; /脚本＆GT;
        ＆LT;脚本的src =// cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js\"></script>
        ＆LT;脚本类型=文/ JavaScript的SRC =// cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js\"></script>
        ＆LT;脚本的src =/ JS /的script.js＆GT;＆LT; / SCRIPT＆GT;
        ＆LT;脚本＆GT;
            （文档）$ .foundation（）;
        ＆LT; / SCRIPT＆GT;
    ＆LT; /身体GT;
＆LT; / HTML＆GT;

下面是三个模板：

模板/欢迎-page.html即可

 ＆LT;！ - 模板/欢迎-page.html即可 - ＆GT;
＆LT; DIV＆GT;＆LT; H1＆GT;主页＆LT; / H1＆GT;＆LT; / DIV＆GT;

模板/ referrals.html

 ＆LT;！ - 模板/ referrals.html  - ＆GT;
＆LT; DIV＆GT;＆LT; H1＆GT; REFERRALS PAGE＆LT; / H1＆GT;＆LT; / DIV＆GT;

模板/ 404.html

 ＆LT;！ - 模板/ 404.html  - ＆GT;
＆LT; DIV＆GT;＆LT; H1＆GT; 404 LT; / H1＆GT;＆LT; / DIV＆GT;

中的文件层次结构如下所示：

   -  rcsbackend
   - 模板
  - 静态的
     -  IMG
     -  JS
     -  CSS
   - 的app.yaml
   -  main.py

解决方案

您的解决方案得到了，因为在默认情况下工作 html5mode 被禁用，之所以只有网址在＃是由角路由的认可，你的推杆路线之前，您的网址得到它为你工作。

解决方案

您需要启用 html5mode 中，为了您的应用程序让你的路由的工作，只是做的 $ locationProvider.html5Mode（真） 在你的配置阶段棱角分明。

code

 的.config（函数（$ locationProvider）{
    $ locationProvider.html5Mode（真）;
}）

现在，你可以回到你的旧code，将解决您的问题。

更新

要使用相对链接您的应用程序链接身边时，你需要设置在你的文件。

 ＆LT;基本href =/＆GT;

转寄此 SO回答 会帮助你，同时支持 html5mode 应用程序。

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@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>

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

解决方案

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.

Solution

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.

这篇关于与谷歌App Engine和瓶使用时角路线不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

与谷歌App Engine和瓶使用时角路线不工作 [英] Angular route not working when used with Google App Engine and Flask

问题描述

解决方案

Solution

相关文章

Python最新文章

热门教程

热门工具

登录关闭

与谷歌App Engine和瓶使用时角路线不工作 [英] Angular route not working when used with Google App Engine and Flask

问题描述

解决方案

Solution

相关文章

Python最新文章

热门教程

热门工具

登录 关闭

登录关闭