Как заставить приложение Angular-Flask загружать фрагменты html?

Я пытаюсь заставить свое приложение Angular-Flask отображать частичные HTML-файлы в базовом html-файле. Приложение загружает базовый html (заголовок окна и нижний колонтитул), но для ng-view ничего не загружается. Возможно, моя угловая маршрутизация к партиалам неверна?

Структура файла

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

домой

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: '/' });
});

Кто-нибудь знает, почему я не могу загрузить частичные файлы? Большое спасибо.

Попытки

  1. Changed templateURL to:
    • /partials/home.html
    • ../partials/home.html
    • статические/частичные/home.html
    • /static/partials/home.html
    • ../static/partials/home.html

Если это поможет, вот ссылка на учебник, по которому я следил: http://blog.pangyanhan.com/posts/2013-08-27-ngtut.html

  1. Перемещен base.html в статическую папку

flask angularjs jinja2 ng-view
person majorpayne327    schedule 10.07.2014    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Flask не обслуживает файлы из папки templates. Если вы хотите сохранить home.html там, вам нужно будет определить маршрут, который соответствует URL-адресу и обслуживает файл. Вы можете использовать это как отправную точку.

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

Если вы не хотите создавать такое представление, вы также можете переместить частичные шаблоны в static. Если ваша структура каталогов выглядела как

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

вы сможете получить доступ к шаблону с помощью

app.config(function($routeProvider){
    $routeProvider.when('/', {
        templateURL: '/static/partials/home.html',
        controller: 'HomeController'    
    }).otherwise({ redirectTo: '/' });
});
person dirn    schedule 10.07.2014
comment
Итак, принимая второе предложение, похоже, ничего не происходит. Консоль Chrome по-прежнему не выдает никаких ошибок. Будет ли представление для функции serve_partial отдельным представлением? или что-то, что я бы добавил в любое из других представлений, которые у меня есть? - person majorpayne327; 11.07.2014
comment
Итак, это сработало, только что создал новое представление, зарегистрировал его и открыл партиал. Я дам вам знать, если я столкнусь с другими непредвиденными ошибками с другими шаблонами. - person majorpayne327; 11.07.2014
comment
Скорее всего, вы захотите поместить serve_partial в home/__init__.py и использовать @mod.route, чтобы прикрепить его к вашему чертежу. - person dirn; 11.07.2014

arrow_upward
-1
arrow_downward

Попробуйте назвать свои части с помощью .tpl.html.

Изменил бы templateURL на:

templateURL: 'home.tpl.html',

вообще работать на вас?

person Aaron    schedule 10.07.2014
comment
Нет, это дало мне 404 при поиске файла (404 выдается через консоль Chrome). - person majorpayne327; 11.07.2014
comment
Подумав об этом еще раз, может быть, это потому, что имя вашего файла не имеет формы .tpl.html? Я думаю, что это может быть причиной того, что он не загружается. - person Aaron; 11.07.2014