AngularJS not running in Flask application
Question
I am following this simple tutorial for creating 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.
html code:
<!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:
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.
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. I'm using Bower to install Angular into the project.
AngularJS version 1.2.17
Bower 1.3.4
node version v0.10.28
npm version 1.4.9
Project Folders:
Edit 1, Flask Code in Home_Site.py:
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 answers
solution1
2 ACCPTED 2014-06-08 02:29:45
You have a typo in your ngApp declaration:
<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.)
solution2
1 2014-06-08 01:27:22
You need to load your static resources through the /static route:
<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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.