如何让 Angular-Flask 应用加载 html 部分?

2024-05-15

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

home

mod = Blueprint('home', __name__)

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

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

有谁知道为什么我无法加载部分内容? 多谢。

Attempts

  1. Changed templateURL to:
    • /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 http://blog.pangyanhan.com/posts/2013-08-27-ngtut.html

  1. 将 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: '/' });
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何让 Angular-Flask 应用加载 html 部分? 的相关文章

  • gcloud app deploy:此部署有太多文件

    当我尝试通过 gcloud 部署我的 GAE 应用程序时 出现以下错误 Updating service default failed ERROR gcloud app deploy Error Response 400 This depl
  • 取消嵌套 ng-click 调用之间的事件传播的最佳方法是什么?

    这是一个例子 假设我想要像很多网站一样有一个图像叠加层 因此 当您单击缩略图时 整个窗口上会出现黑色覆盖层 并且图像的较大版本位于其中的中心 单击黑色覆盖层可将其关闭 单击图像将调用显示下一张图像的函数 html div class ove
  • Angular - UI 路由器 - 状态重入

    如何配置 UI Router 默认重新进入或重新加载状态 例如 用户想要刷新页面 因此他单击该页面后面的链接 但目前该链接不可点击 因为它会转到同一页面并且状态不会改变 使用浏览器按钮刷新确实有效 因此它会再次重新加载整个 SPA 这是不可
  • 如何从角度资源 $save() 读取响应并保留原始数据

    我是 Angular 的新手 我确信我在这里缺少一些基本的东西 我有一个对象 我将其发布到服务器来创建它 服务器返回对象 ID 我需要读取并更新客户端中的对象 服务器只会返回对象 ID 但是 在客户端 我有其他数据 当我执行回调时我无法使用
  • AngularJS:ng-model 未绑定到 ng-checked 复选框

    我在问这个问题之前提到过这一点 AngularJs 不将 ng checked 与 ng model 绑定 https stackoverflow com questions 14226439 angularjs doesnt bind n
  • 如何在 Angular JS 应用程序中使用 ckeditor? [复制]

    这个问题在这里已经有答案了 我是 angularJS 新手 我需要在我的应用程序中使用 ckeditor 作为文本区域 在我在 Angular 应用程序上尝试之前 我已经完成了一个 仅 html 网页 我已经生成了我的 ckeditor 包
  • 在 Docker 容器中以主机用户身份运行

    在我的团队中 我们在进行开发时使用 Docker 容器在本地运行我们的网站应用程序 假设我正在开发 Flask 应用程序app py具有依赖关系requirements txt 工作流程大致如下 I am robin and I am in
  • 如果满足条件,Angular JS 如何添加 CSS 类

    我正在创建一个截断指令 如果字符超过 10 我就会截断文本字符串 然后它将显示 我的目标是编写一个条件 如果字符少于 10 个 则删除 如果有人对我如何实现此目标有任何想法 我会坚持这一点并接受建议 这是我的代码 var app angul
  • 无法找到来源:错误 [root] 错误:无法找到由“..”标识的修订版本

    我正在尝试从命令行运行迁移并不断收到错误 ERROR root Error Can t locate revision identified by faf3ebfbe667 正如其他帖子中所建议的 我删除了我的 sqlite 数据库和迁移文
  • 显示模板中存储为二进制 blob 的图像

    我有一个模型 其中图像存储为二进制 blob 我想在模板中显示该图像以及有关该对象的其他数据 由于图像不是一个单独的文件 我不知道如何显示它 我尝试过设置标题 或使用send file or render template 但我要么没有得到
  • 如何从此 d3.js layout.tree 获取树祖先和树后代的列表?

    我正在尝试和修改this https bl ocks org mbostock 4339083d3 js 的示例 用于根据 JSON 树结构绘制树 这就是树的一部分开始时的样子 我正在尝试进行两个单独的修改 但我不知道该怎么做 当单击节点的
  • Python Flask 不更新图像[重复]

    这个问题在这里已经有答案了 这里有一些关于图像的 Flask 问题 但没有一个能解决我的问题 我有一个应用程序可以创建图像 保存它 然后显示它 一次 它应该多次执行此操作 每次更改图像时 它应该加载新图像 它不是 它只显示与其显示的文件名关
  • 使 WebAPI 操作异步?

    我有一个问题 关于在 WebAPI MVC 控制器 AJAX 请求上使用 async await 是否有益 假设我有一个与 Web API 后端对话的 AngularJS 应用程序 并且我想获取一些数据 我对 Web API 进行了一些 A
  • 从子 ng-repeat 访问父 ng-repeat 的索引

    我想使用父列表 foos 的索引作为子列表 foos bars 中函数调用的参数 我发现有人建议使用 parent index 的帖子 但是 index不是以下的财产 parent 如何访问父级的索引ng repeat div div di
  • 使用gunicorn和环境变量运行flask应用程序

    对于本地开发 我只需设置包含必要变量的 env 文件 然后运行应用程序 Flask run 一切看起来都很好 所有环境变量都在应用程序中正确读取和设置 但是 当我使用 Gunicorn 运行应用程序时 gunicorn api app bi
  • 从 mvc web api httpresponse 生成 csv 并通过 angularjs 接收以供下载

    我正在尝试从我的 Web api 生成一个 CSV 文件并通过 angularjs 接收该文件 我有一个如下所示的 API 控制器 HttpPost public HttpResponseMessage GenerateCSV FieldP
  • AngularJS:理解 $rootScope.$on('$routeChangeSuccess

    我正在开发登录页面 成功后 它会重定向到主页 默认情况下 我显示登录页面以下代码 app run function rootScope location rootScope on routeChangeSuccess function lo
  • Angular UI 路由器嵌套视图问题

    我在理解 Angular UI Router 嵌套视图的工作原理时遇到了一些问题 我的 stateProvider 看起来像这样 stateProvider state login url login views main template
  • AngularJS templateUrl 与 template - 隔离范围

    我有以下指令 offerListSorters directive offersSorter myState templateCache function myState templateCache return scope control
  • AngularJS:服务、提供商、工厂

    之间有什么区别Service Provider and Factory在 AngularJS 中 从我得到的 AngularJS 邮件列表一个惊人的线程 https groups google com forum msg angular 5

随机推荐

  • 数据库级别的别名列名 [MySQL]

    别名 可能是错误的词 因为它是在将列 表名称作为查询中的其他名称引用的上下文中使用的 我感兴趣的是是否有一种方法可以在数据库中为列指定两个名称 如果我要打印这样的表格 它看起来会是这样的 mysql gt SELECT FROM User
  • tsc-watch 是否消耗 TSC_NONPOLLING_WATCHER?

    我正在从事微服务集成项目 我使用同时运行 8 个打字稿服务tsc watch preserveWatchOutput onSuccess node build index js 即使我根本不编写源代码 这些进程也会消耗 70 的 CPU 我
  • 让 hudson 将源签出到特定目录

    这似乎是一个简单的任务 但在我的一生中 我无法让 Hudson 将我的源代码签出到特定目录 我可以在命令行上使用 svn 查看源代码 我尝试在源代码管理下指定本地模块设置 但没有骰子 我将其设置为 c source trunk 并在运行构建
  • 抑制 nginx 访问被拒绝错误日志

    我在 nginx 中设置了一些规则来拒绝 IP 访问 这很有效 但对于来自被拒绝 IP 的每个请求 都会记录以下开头的错误 error 7325 0 5761 access forbidden by rule client 有没有办法抑制这
  • 令人困惑的无法访问模式错误

    在使用 Rust 编译器时 我遇到了一条非常令人困惑的错误消息match陈述 enum Name Known fn unreachable pattern n Name gt usize use Name match n Unknown g
  • 使用 EF CPT5 进行域建模和映射

    我正在尝试制作一个包含照片集的相册的模型 每个相册都会有一组照片和一张拇指照片 这是我拥有的 但 EF 似乎不喜欢它 我正在使用 EF CPT5 该模型 public class Album IEntity private DateTime
  • 将日期时间字符串转换为 Date 类

    我有一个带有日期时间字符列的数据框 当我使用as Date 除了少数实例之外 我的大多数字符串都被正确解析 下面的示例有望向您展示发生了什么 my attempt to parse the string to Date uses the s
  • 是否可以只迭代一个流一次并执行 2 个或更多操作?

    给定代码 List
  • 第一次从按钮提交时,只有单击两次后才会打开模态框

    我有一个模式弹出窗口可以通过单击按钮打开 不幸的是 当第一次在浏览器中提交时 我只能在单击两次后才能看到弹出窗口 但是 一旦弹出窗口打开并关闭 我就可以在下一次尝试中单击一次来打开模式 如果我刷新浏览器也会发生同样的情况 这看起来很奇怪 任
  • 将引导程序中的表单居中不起作用[重复]

    这个问题在这里已经有答案了 我试图将我的表单置于 div 中 但我使用的方法不起作用 我尝试使用引导文档中所述的 justify content center 属性 但它没有将其居中 当我尝试将其居中但应用时display flex and
  • 警报对话框中的 Webview 不显示内容

    我正在开发一个 Android 应用程序 我需要在网络视图和警报对话框上显示一个网站 该站点显示在网络视图中 但不显示在警报对话框中 到目前为止 这是我的代码 WebView WebView myWebView WebView v find
  • 为什么“rails server -e production”会出现“没有路由匹配“/”并且样式表未加载?

    它正在运行 Rails 3 0 0 或 Rails 3 0 5 使用 Ruby 1 9 2 当处于开发模式时 rails server then http 本地主机 3000 http localhost 3000一切正常 并且http l
  • Visual Studio IDE 中功能后的空间

    如何设置 Visual Studio 中的设计以在我的 javascript 函数后面放置一个空格 目前 当我按下返回键时 我得到了这个 var myfunc function 当我想要这个的时候 var myfunc function 知
  • Python GTK + webkit - 在 gtk.main() 之后插入 JavaScript

    我在终端中尝试了这个 一切正常 但是如果我在脚本内运行这个 我无法在 gtk main 之后插入 JavaScript import gtk import webkit w gtk Window b webkit WebView w add
  • 在 angularjs 模块初始化期间有条件地注入依赖项

    我有一个角度模块 我想有条件地将依赖项注入其中 IE var myapp angular module myapp ngRoute myappcontroller ngGrid I want to include ngGrid only i
  • 如何在 sed 中转义方括号[重复]

    这个问题在这里已经有答案了 我正在使用 grep 和 sed 解析遗留的 C 代码 当尝试替换方括号时 发生了一些奇怪的事情 以下代码替换方括号效果很好 echo xyx xzx xyx sed s g 结果是 xyx xzx xyx 当我
  • 管理面板的 htaccess 重写规则

    我的网络应用程序中有这样的 url 模式 www mysitename com foldername controller method 所有请求的页面首先被重定向到根文件夹上的index php 然后处理请求的页面 但每当我进入管理面板
  • 尚未注册类型“IServiceProviderFactory[Autofac.ContainerBuilder]”的服务

    当运行以下命令添加数据库迁移脚本时 出现以下错误 dotnet ef migrations add InitialCreate v o Migrations context MyContext 访问 Microsoft Extensions
  • VS 13/VS 15 - 无法导入 SQL 片段

    我想在中创建 SQL 片段VS2013 and VS2015 我不知道为什么 但我在导入时遇到错误 在两个 VS 中 C sql snippet Missing or unspecified Language attribute 我的片段
  • 如何让 Angular-Flask 应用加载 html 部分?

    我试图让我的 Angular Flask 应用程序在基本 html 文件中渲染部分 HTML 文件 应用程序加载基本 html 窗口标题和页脚加载 但 ng view 没有加载任何内容 也许我到局部的角度路由不正确 文件结构 gt flas