Angular2-Flask 项目教程

Angular2-Flask 项目教程

angular2-flaskSimple angular2 app with python-flask backend ( Learning Angular2 )项目地址:https://gitcode.com/gh_mirrors/an/angular2-flask

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

angular2-flask/
├── backend/
│   ├── app.py
│   ├── config.py
│   ├── requirements.txt
│   └── ...
├── frontend/
│   ├── e2e/
│   ├── node_modules/
│   ├── src/
│   │   ├── app/
│   │   ├── assets/
│   │   ├── environments/
│   │   └── ...
│   ├── angular.json
│   ├── package.json
│   ├── tsconfig.json
│   └── ...
├── .gitignore
├── README.md
└── ...

目录结构介绍

• backend/: 包含后端 Flask 应用的所有文件。

  • app.py: 后端应用的主启动文件。
  • config.py: 后端应用的配置文件。
  • requirements.txt: 后端应用的依赖包列表。

• frontend/: 包含前端 Angular 应用的所有文件。

  • e2e/: 端到端测试文件。
  • node_modules/: 前端依赖包。
  • src/: 前端源代码。
    • app/: Angular 应用的主要代码。
    • assets/: 静态资源文件。
    • environments/: 环境配置文件。
  • angular.json: Angular 项目的配置文件。
  • package.json: 前端项目的依赖和脚本。
  • tsconfig.json: TypeScript 配置文件。

• .gitignore: Git 忽略文件列表。

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

2. 项目的启动文件介绍

后端启动文件

backend/app.py

from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/')
def index():
    return jsonify({"message": "Hello, World!"})

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

• Flask 应用实例化: app = Flask(__name__)
• CORS 支持: CORS(app)
• 路由定义: @app.route('/')
• 应用启动: app.run(debug=True)

前端启动文件

frontend/package.json

{
  "name": "frontend",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  }
}

• 启动命令: npm start 或 ng serve

3. 项目的配置文件介绍

后端配置文件

backend/config.py

class Config:
    DEBUG = False
    TESTING = False
    DATABASE_URI = 'sqlite:///:memory:'

class ProductionConfig(Config):
    DATABASE_URI = 'mysql://user@localhost/foo'

class DevelopmentConfig(Config):
    DEBUG = True

class TestingConfig(Config):
    TESTING = True

• Config 类: 基础配置类。
• ProductionConfig 类: 生产环境配置。
• DevelopmentConfig 类: 开发环境配置。
• TestingConfig 类: 测试环境配置。

前端配置文件

frontend/angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "frontend": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "

angular2-flaskSimple angular2 app with python-flask backend ( Learning Angular2 )项目地址:https://gitcode.com/gh_mirrors/an/angular2-flask