如何让Angular-Flask app加载html partials?

maj*_*327 3 jinja2 flask angularjs ng-view

我试图让我的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
Run Code Online (Sandbox Code Playgroud)

mod = Blueprint('home', __name__)

@mod.route('/')
def index():
    return render_template('main.html')
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

home.html的

<p>Just some Random Text</p>
Run Code Online (Sandbox Code Playgroud)

appController.js

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

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

});
Run Code Online (Sandbox Code Playgroud)

homeController.js

'use strict';

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

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

});
Run Code Online (Sandbox Code Playgroud)

routing.js

'use strict';

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

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

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

尝试

  1. 将templateURL更改为:
    • /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移动到静态文件夹中

dir*_*irn 6

Flask不提供文件templates夹中的文件.如果您希望保留home.html在那里,则需要定义与URL匹配的路由并提供文件.您可以将此作为起点.

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

如果您不想创建此类视图,还可以将部分模板移动到static.如果你的目录结构是这样的

static
|---- partial
|     |---- home.html
Run Code Online (Sandbox Code Playgroud)

你可以使用访问模板

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