AngularJS没有在Flask应用程序中运行

Question

I am following this simple tutorial for creating a pinterest clone. 我正在按照这个简单的教程创建一个pinterest克隆。 http://blog.jetbrains.com/pycharm/2013/12/video-pycharm-web-magic-building-a-pinterest-clone/ http://blog.jetbrains.com/pycharm/2013/12/video-pycharm-web-magic-building-a-pinterest-clone/

I'm having trouble getting Angular to work. 我无法让Angular工作。

html code: 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 code: app1.js代码：

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

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

When I reload the page I simply get to see the text: {{ app1.message }} This is in the browser. 当我重新加载页面时，我只是看到文本：{{app1.message}}这是在浏览器中。

Console states this on reload: 控制台在重新加载时声明：

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 -

This is on Ubuntu 14.04. 这是在Ubuntu 14.04上。 I'm using Bower to install Angular into the project. 我正在使用Bower将Angular安装到项目中。

AngularJS version 1.2.17 AngularJS版本1.2.17

Bower 1.3.4 凉亭1.3.4

node version v0.10.28 节点版本v0.10.28

npm version 1.4.9 npm版本1.4.9

Project Folders: 项目文件夹：

文件夹

Edit 1, Flask Code in Home_Site.py: 在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()

Answer 1

You have a typo in your ngApp declaration: 您的ngApp声明中有拼写错误：

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

should be: 应该：

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

(Note the lack of 1 in the ng-app declaration.) （注意ng-app声明中缺少1 ）

Answer 2

You need to load your static resources through the /static route: 您需要通过/static路由加载静态资源：

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

This also means you need to move your js folder into the static folder of your project. 这也意味着您需要将js文件夹移动到项目的static文件夹中。

AngularJS没有在Flask应用程序中运行

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-06-08 02:29:45

解决方案2
1 2014-06-08 01:27:22

AngularJS没有在Flask应用程序中运行

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-06-08 02:29:45

解决方案2 1 2014-06-08 01:27:22

解决方案1
2 已采纳 2014-06-08 02:29:45

解决方案2
1 2014-06-08 01:27:22