Angular-Flask 项目教程

Angular-Flask 项目教程

angular-flaskAn AngularJS (frontend) + Flask / Python (backend) Boilerplate Application项目地址:https://gitcode.com/gh_mirrors/an/angular-flask

1. 项目的目录结构及介绍

angular-flask/
├── backend/
│   ├── app/
│   │   ├── __init__.py
│   │   ├── models.py
│   │   ├── routes.py
│   ├── config.py
│   ├── requirements.txt
│   ├── run.py
├── frontend/
│   ├── e2e/
│   ├── node_modules/
│   ├── src/
│   │   ├── app/
│   │   │   ├── app.component.css
│   │   │   ├── app.component.html
│   │   │   ├── app.component.spec.ts
│   │   │   ├── app.component.ts
│   │   │   ├── app.module.ts
│   │   ├── assets/
│   │   ├── environments/
│   │   ├── index.html
│   │   ├── main.ts
│   │   ├── polyfills.ts
│   │   ├── styles.css
│   │   ├── test.ts
│   ├── angular.json
│   ├── package.json
│   ├── tsconfig.json
│   ├── tslint.json
├── .gitignore
├── README.md

目录结构介绍

• backend/: 包含 Flask 后端项目的所有文件。

  • app/: Flask 应用的主要代码文件夹。
    • __init__.py: 初始化 Flask 应用。
    • models.py: 定义数据库模型。
    • routes.py: 定义路由和视图函数。
  • config.py: 配置文件。
  • requirements.txt: 后端依赖包列表。
  • run.py: 启动 Flask 应用的脚本。

• frontend/: 包含 Angular 前端项目的所有文件。

  • e2e/: 端到端测试文件夹。
  • node_modules/: 前端依赖包。
  • src/: 前端源代码文件夹。
    • app/: Angular 应用的主要代码文件夹。
      • app.component.*: 主组件的文件（CSS、HTML、测试、TS）。
      • app.module.ts: 应用的根模块。
    • assets/: 静态资源文件夹。
    • environments/: 环境配置文件夹。
    • index.html: 主 HTML 文件。
    • main.ts: 主 TypeScript 文件。
    • polyfills.ts: 填充库。
    • styles.css: 全局样式文件。
    • test.ts: 测试配置文件。
  • angular.json: Angular 配置文件。
  • package.json: 前端依赖包列表。
  • tsconfig.json: TypeScript 配置文件。
  • tslint.json: TypeScript 代码风格配置文件。

• .gitignore: Git 忽略文件配置。

• README.md: 项目说明文档。

2. 项目的启动文件介绍

后端启动文件

• run.py: 这是 Flask 应用的启动文件。通过运行此文件可以启动 Flask 服务器。

from app import app

if __name__ == '__main__':
    app.run(debug=True)

前端启动文件

• main.ts: 这是 Angular 应用的启动文件。通过运行此文件可以启动 Angular 应用。

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

3. 项目的配置文件介绍

后端配置文件

• config.py: 这是 Flask 应用的配置文件，包含应用的配置信息。

import os

class Config:
    SECRET_KEY = os.environ.get('SECRET_KEY') or 'you-will-

angular-flaskAn AngularJS (frontend) + Flask / Python (backend) Boilerplate Application项目地址:https://gitcode.com/gh_mirrors/an/angular-flask