flask + angularjs: ng-include is 404'ing

Question

I've been trying like mad to get angularjs' ng-include to work properly with a Flask application, and it seems like no matter what I try, the GET keeps returning 404'd. The main page (angular_test.html) loads up fine, but nothing from angular_entry.html.

Flask:

basedir = c.get('basedir')
app = Blueprint('angulartest', __name__, static_folder=basedir+'/display/static',
                template_folder=basedir+'/display/angulartemplates')

def before_blueprint_request():
    g.user = current_user

app.before_request(before_blueprint_request)

@app.route('/angular_test.html', methods=['GET'])
def ang_test():

    print 'testing angular'

    return make_response(open(basedir+'/display/templates/angular_test.html').read())
    # 
    # return app.send_static_file('angular_test.html')  (I've tried both)

HTML:

<div id='content' ng-app='FeedEaterApp' ng-controller='MainController'>

    <select ng-model="template" ng-options="t.name for t in templates">
        <option value="">(blank)</option>
    </select>
    url of the template: <tt>{{template.url}}</tt>

    <div ng-include src="'angular_entry.html'"></div>
    <div ng-include src="template.url"></div>
    <div ng-include="'angular_entry.html'"></div>
    <div ng-include="template.url"></div>
</div>

JS:

app.controller("MainController", function($scope){
    $scope.message = 'this is a message from scope!~'
    $scope.templates =
    [ { name: 'template1.html', url: 'angular_entry.html'},
      { name: 'template2.html', url: 'template2.html'} ];
  $scope.template = $scope.templates[0];
});

I've also tried every single relative/absolute path I can think of, and still nothing but 404s. I've also tried changing around the static and template folders in Flask. No dice.

Is Flask interfering with the GET on angular_entry.html? Is my application root path not set correctly or something?

help!

Sean Vieira · Accepted Answer · 2014-06-24 17:18:23Z

2

It's not possible to tell fully without knowing what c is or what it's get method does, but the most likely possibility is that you are mis-using the templates argument to flask.Blueprint. If you want to expose the templates to Angular they need to be accessible over HTTP. Flask's templates are fed through the Jinja templating engine on the server side via render_template and are not exposed to the end user over HTTP directly.

If that is the issue you will want to move angulartemplates under static and change your include paths to properly reference /static/angularetemplates/{your_template_name} (you can also remove the keyword argument templates in your Blueprint initializer).

edited Jun 24, 2014 at 17:18

answered Jun 24, 2014 at 16:26

Sean Vieira

161k34 gold badges321 silver badges297 bronze badges

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

4 Comments

jake madison Over a year ago

that just grabs the base directory for the app. It's returning: '/home/jmadison/Development/FeedEater/feedeater'. I've tried changing the template keyword for the blueprint, separating out the angular templates from the flask templates, and also removing the template and static keywords entirely. I've tried moving the angular templates to the static folder.

Sean Vieira Over a year ago

@jake - best to add that information to the question then :-)

jake madison Over a year ago

haha true! BUT, I found a combination that worked! <div ng-include src="'/static/angulartemplates/angularentry.html'"></div> After moving to static, obvs. Thank you!!

Sean Vieira Over a year ago

Smacks head Yep, missed the leading static - apologies about that.

Collectives™ on Stack Overflow

flask + angularjs: ng-include is 404'ing

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related