如何让Angular-Flask应用加载html partial

我试图让我的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。

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

有谁知道为什么我不能得到部分加载?非常感谢。

尝试

将templateURL更改为:
- /泛音/home。
- . ./泛音/home。
- 静态/泛音/home。
- /静态/泛音/home。
- . ./静态/泛音/home。

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

移动base.html到静态文件夹

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

尝试用.tpl.html来命名你的部分。

将templateURL改为:

templateURL: 'home.tpl.html',

对你有用吗?

相关内容

最新更新

热门标签：