3

I am trying to get my Angular-Flask App to render partial HTML files in a base html file. The application loads the base html (Window Title and Footer load) but nothing loads for the ng-view. Perhaps my angular routing to the partials is not correct?

File Structure

->flaskapp
    ->static
        ->js
            ->appController.js
            ->routing.js
            ->homeController.js
            ...
    ->views
        ->home
            ->__init__.py
            ...
    ->templates
        ->partials
            ->home.html
            ...
        ->base.html

home

mod = Blueprint('home', __name__)

@mod.route('/')
def index():
    return render_template('main.html')

base.html

<!DOCTYPE html>
<html ng-app="FlaskApp">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
    <script src=/static/js/appController.js></script>
    <script src=/static/js/homeController.js></script>
    <script src=/static/js/bootstrap.js></script>

    {% block head %}
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %} - Flask POC</title>
    {% endblock %}
</head>

<body>
    <div ng-controller="AppController">
        <div ng-view>
    </div>
    <br />
    <div id="footer">
        {% block footer %}
        &copy; Copyright 2014
        {% endblock %}
    </div>
</body>
</html>

home.html

<p>Just some Random Text</p>

appController.js

'use strict';
var app = angular.module('FlaskApp', ['ngRoute']);

app.controller('AppController', function($scope){

});

homeController.js

'use strict';

var app = angular.module('FlaskApp');

app.controller('HomeController', function(){

});

routing.js

'use strict';

var app = angular.module('FlaskApp');

app.config(function($routeProvider){
    $routeProvider.when('/', {
        templateURL: 'partials/home.html',
        controller: 'HomeController'    
    }).otherwise({ redirectTo: '/' });
});

Does anyone know why I cant get partials to load? Thanks a lot.

Attempts

  1. Changed templateURL to:
    • /partials/home.html
    • ../partials/home.html
    • static/partials/home.html
    • /static/partials/home.html
    • ../static/partials/home.html

If it helps, here is the link of the tutorial I have been following: http://blog.pangyanhan.com/posts/2013-08-27-ngtut.html

  1. Moved base.html into the static folder
majorpayne327
  • 45
  • 1
  • 6

2 Answers2

6

Flask doesn't serve files from the templates folder. If you wish to keep home.html in there, you will need to define a route that matches the URL and serves the file. You can use this as a starting point.

@app.route('/partial/<path:path>')
def serve_partial(path):
    return render_template('/partial/{}'.format(path))

If you don't want to have to create such a view, you can also move the partial templates into static. If your directory structure looked like

static
|---- partial
|     |---- home.html

you'd be able to access the template with

app.config(function($routeProvider){
    $routeProvider.when('/', {
        templateURL: '/static/partials/home.html',
        controller: 'HomeController'    
    }).otherwise({ redirectTo: '/' });
});
dirn
  • 19,454
  • 5
  • 69
  • 74
  • So taking the second suggestion, nothing seems to happen. The Chrome Console still doesn't throw any errors. Would the view for the serve_partial function be a seperate view? or something I would throw into any of the other views I have? – majorpayne327 Jul 10 '14 at 20:16
  • Ok so this worked, just made a new view, registered it, and opens the partial. I'll let you know if I hit any other unexpected errors with other templates – majorpayne327 Jul 10 '14 at 20:49
  • You'd most likely want to place `serve_partial` in `home/__init__.py` and use `@mod.route` to attach it to your blueprint. – dirn Jul 10 '14 at 20:50
-1

Try naming your partials with .tpl.html.

Would changing templateURL to:

templateURL: 'home.tpl.html',

work at all for you?

Aaron
  • 2,367
  • 3
  • 25
  • 33
  • No, that gave me a 404 when searching for the file (404 given via Chrome console) – majorpayne327 Jul 10 '14 at 20:17
  • Thinking about this again, could it be because your file name is not of the form .tpl.html? I think that could be why it's not being loaded. – Aaron Jul 10 '14 at 20:41