3

我正在尝试让我的 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>

主页.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(){

});

路由.js

'use strict';

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

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

有谁知道为什么我无法加载部分内容？非常感谢。

尝试

  1. 将 templateURL 更改为：
    • /partials/home.html
    • ../partials/home.html
    • 静态/partials/home.html
    • /static/partials/home.html
    • ../static/partials/home.html

如果有帮助，这里是我一直关注的教程的链接：http: //blog.pangyanhan.com/posts/2013-08-27-ngtut.html

  1. 将 base.html 移至静态文件夹
4

2 回答 2

6

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: '/' });
});
于 2014-07-10T20:09:18.053 回答
-1

尝试使用 .tpl.html 命名您的部分。

将 templateURL 更改为：

templateURL: 'home.tpl.html',

为你工作吗？

于 2014-07-10T19:55:54.887 回答