AngularJS 未在 Flask 应用程序中运行答案

【问题标题】：AngularJS not running in Flask applicationAngularJS 未在 Flask 应用程序中运行
【发布时间】：2014-06-07 17:28:10
【问题描述】：

我正在按照这个简单的教程来创建 pinterest 克隆。 http://blog.jetbrains.com/pycharm/2013/12/video-pycharm-web-magic-building-a-pinterest-clone/

我无法让 Angular 正常工作。

html代码：

<!DOCTYPE html>
<html>
<head>
    <title>Pin Clone</title>
</head>
<body ng-app1="app1" ng-controller="AppCtrl as app1">

{{ app1.message }}

<script src="bower_components/angular/angular.js"></script>
<script src="js/app1.js"></script>
</body>
</html>

app1.js 代码：

var app1 = angular.module("app1", []);

app1.controller("AppCtrl", function () {
    var app1 = this;
    app1.message = "not working"
})

当我重新加载页面时，我只会看到文本： {{ app1.message }} 这是在浏览器中。

控制台在重新加载时声明：

127.0.0.1 - - [07/Jun/2014 12:59:50] "GET / HTTP/1.1" 304 -
127.0.0.1 - - [07/Jun/2014 12:59:50] "GET /bower_components/angular/angular.js HTTP/1.1"     304 -
127.0.0.1 - - [07/Jun/2014 12:59:50] "GET /js/app1.js HTTP/1.1" 304 -

这是在 Ubuntu 14.04 上。我正在使用 Bower 将 Angular 安装到项目中。

AngularJS 版本 1.2.17

鲍尔 1.3.4

节点版本 v0.10.28

npm 版本 1.4.9

项目文件夹：

编辑1、Home_Site.py中的Flask代码：

from flask import Flask
from flask.ext.restless.manager import APIManager
from flask.ext.sqlalchemy import SQLAlchemy
from sqlalchemy import Column, Integer, Text

# instantiating Flask
app = Flask(__name__, static_url_path='')
# setting the SQLALCHEMY_DATABASE_URI to the pin database
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///pin.db'

# setting an instance of SQLAlchemy
db = SQLAlchemy(app)

# creates a database model with an id, title, image
class Pin(db.Model):
    id = Column(Integer, primary_key=True)
    title = Column(Text, unique=False)
    image = Column(Text, unique=False)

db.create_all()

# automatically creates an api for the pins in the db
# api stands for application programming interface
api_manager = APIManager(app, flask_sqlalchemy_db=db)
api_manager.create_api(Pin, methods=['GET', 'POST', 'DELETE', 'PUT'])

# type route and hit tab to create this
# this allows you to route to the main html file in the static folder
@app.route('/')
def index1():
    return app.send_static_file('index1.html')

# reloads the server on its own
app.debug = True

if __name__ == '__main__':
    app.run()

【问题讨论】：

默认情况下，Flask 静态资源来自/static/...，而不是站点根目录。从外观上看，教程也是这样设置的。您确定 /bower_components/angular/angular.js 不是 404 吗？我希望js 文件夹也位于static 文件夹下，并使用相同的前缀。
Martijn，感谢您的回复。我再次运行它以检查是否收到 404。当浏览器最初加载页面 127.0.0.1 - - [07/Jun/2014 21:09:26] “GET /favicon.ico HTTP/1.1 " 404 - 我不知道这是指什么。

标签： javascript python node.js angularjs flask

【解决方案1】：

您的ngApp 声明中有错字：

<body ng-app1="app1" ng-controller="AppCtrl as app1">

应该是：

<body ng-app="app1" ng-controller="AppCtrl as app1">

（注意ng-app 声明中缺少1。）

【讨论】：

哇。谢谢伙计，我会为此失去理智。这最终奏效了。网页现在显示“不工作”。

【解决方案2】：

你需要通过/static路由加载你的静态资源：

<script src="/static/bower_components/angular/angular.js"></script>
<script src="/static/js/app1.js"></script>

这也意味着您需要将js 文件夹移动到项目的static 文件夹中。

【讨论】：

Martijn，再次感谢。不幸的是，我可以确认 js 文件夹位于静态文件夹中。 index1.html 也是如此。我尝试将 /static 添加到 src 字符串。不幸的是，这没有效果。
@asarenski：是的，我发现截图有点模棱两可。您似乎是从/ 加载主页，但不是从/static/index1.html。您可能需要详细说明您的 Flask 设置。