AngularJS在Flask应用中无法运行
我正在跟着一个简单的教程，想要制作一个类似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。
Bower的版本是1.3.4。
Node的版本是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()
2 个回答
1
你需要通过 /static 路径来加载你的静态资源：
<script src="/static/bower_components/angular/angular.js"></script>
<script src="/static/js/app1.js"></script>
这也意味着你需要把你的 js 文件夹移动到项目的 static 文件夹里。
2
你的 ngApp 声明里有个拼写错误：
<body ng-app1="app1" ng-controller="AppCtrl as app1">
应该是：
<body ng-app="app1" ng-controller="AppCtrl as app1">
（注意 ng-app 声明里没有 1。）