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:

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()

By default Flask static resources are served from /static/..., not the site root. By the looks of it, that is how the tutorial also sets it up. Are you certain that /bower_components/angular/angular.js is not a 404? The js folder I'd expect to also live under the static folder, and use the same prefix. — Martijn Pieters
– Martijn Pieters, Commented Jun 7, 2014 at 17:43
Martijn, thanks for replying. I went to run this again to inspect if I get a 404. I get one when the browser initially loads the page 127.0.0.1 - - [07/Jun/2014 21:09:26] "GET /favicon.ico HTTP/1.1" 404 - I do not know what this is referencing. — asarenski
– asarenski, Commented Jun 8, 2014 at 1:11

Sean Vieira · Accepted Answer · 2014-06-08 02:29:45Z

2

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.)

answered Jun 8, 2014 at 2:29

Sean Vieira

161k34 gold badges321 silver badges297 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

asarenski Over a year ago

Wow. Thanks man I was going to lose my mind over that. This ended up working. The web page now states, "not working".

Martijn Pieters · Accepted Answer · 2014-06-08 01:27:22Z

1

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.

answered Jun 8, 2014 at 1:27

Martijn Pieters

1.1m326 gold badges4.2k silver badges3.4k bronze badges

2 Comments

asarenski Over a year ago

Martijn, thanks again. Unfortunately I can confirm that the js folder was in the static folder. This is also the case with index1.html. I tried adding /static to the src string. Unfortunately this has no effect.

Martijn Pieters Over a year ago

@asarenski: right, I found the screenshot somewhat ambiguous. You appear to load the homepage from / however, not from /static/index1.html. You may want to detail your Flask setup.

Collectives™ on Stack Overflow

AngularJS not running in Flask application

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related