AngularJS不在Flask应用程序中运行
我正在按照这个简单的教程创build一个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
项目文件夹：
在Home_Site.py中编辑1，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()
您的ngApp声明中有一个错字：
<body ng-app1="app1" ng-controller="AppCtrl as app1">
应该：
<body ng-app="app1" ng-controller="AppCtrl as app1">
（注意在ng-app声明中缺less1 ）
您需要通过/static路由加载您的静态资源：
<script src="/static/bower_components/angular/angular.js"></script> <script src="/static/js/app1.js"></script>
这也意味着你需要将你的js文件夹移动到你的项目的static文件夹中。