如何搭建并理解 generator-angular-flask 项目
本教程旨在指导您了解并搭建由 rayokota 提供的 Yeoman 生成器创建的 AngularJS + Flask 应用程序。我们将分别探讨项目的基本结构、启动文件以及配置文件的关键元素。
1. 项目目录结构及介绍
一旦通过 Yeoman 生成器成功创建项目，典型的项目结构大致如下：
my-app/
├── app/
│ ├── assets/ # 存放静态资源如图片、样式等
│ ├── components/ # AngularJS 组件存放处
│ ├── controllers/ # 控制器文件
│ ├── directives/ # 自定义指令
│ ├── filters/ # 过滤器逻辑
│ ├── index.html # 主入口文件
│ └── ...
├── flask/
│ ├── app.py # Flask 的主要应用文件
│ ├── models.py # 数据模型定义
│ ├── requirements.txt # 项目依赖列表
│ └── templates/ # Jinja2 模板存放目录
├── Procfile # 部署配置文件（主要用于Heroku或其他平台）
├── README.md # 项目说明文件
├── bower.json # AngularJS 相关依赖管理
├── package.json # Node.js 和 NPM 相关依赖管理
├── runtime.txt # 可选，指定运行时环境
├── server.py # 启动 Flask 服务的脚本
└── ...
- app/: 包含前端 AngularJS 应用的所有组件。
- flask/: 是后端 Flask 应用程序的核心部分，包括视图、模型和模板。
- package.json 和 bower.json: 分别用于管理Node.js/NPM包和AngularJS相关的前端库。
- server.py: Flask 应用的服务启动脚本。
2. 项目的启动文件介绍
Flask 启动 - server.py
在 my-app/server.py 中，你会发现启动 Flask 应用的关键代码。这个文件通常包含如下基本结构：
from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
return "Hello, World!"
if __name__ == '__main__':
app.run(debug=True)
这段代码定义了一个简单的 Flask 应用，当访问根URL（/）时，它返回“Hello, World!”。debug=True 参数使得应用在开发模式下运行，提供错误详情和自动重载。
AngularJS 初始化 - index.html
在前端方面，app/index.html 是应用程序的主入口点。它加载 AngularJS 库、自定义的JavaScript文件和其他必要的资源。
<!doctype html>
<html ng-app="yourAppName">
<head>
<!-- 引入 AngularJS 和其他依赖 -->
</head>
<body>
<div ng-view></div>
<!-- 加载控制器和服务等 -->
</body>
</html>
这里的 ng-app 属性初始化 AngularJS 应用，并且 ng-view 用于动态加载路由对应的视图。
3. 项目的配置文件介绍
Flask 配置 - app.py
虽然示例中没有直接提及一个明确的“配置文件”，但在 app.py 或相关位置，可能会有环境变量的设定或配置类的定义，如数据库连接字符串等。例如：
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:tmp/test.db'
这是设置 SQLite 数据库存储路径的例子。
包依赖 - requirements.txt 和 package.json
- requirements.txt 列出了Python环境下的所有依赖包，如 Flask、SQLAlchemy 等。
- package.json 记录了Node.js环境中的依赖，特别是构建工具、测试框架等，还有Webpack或Gulp这样的前端构建工具依赖。
总结，通过理解和配置这些关键部分，您可以顺利地运行和定制 generator-angular-flask 创建的应用。确保正确安装环境和依赖是成功开始的前提。
扫一扫
307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
