web-dev-qa-db-fra.com

Angular 4 frontend avec python flask backend comment rendre une page d'index simple)

Bonjour Python Je suis angular et développeur node.js et je veux essayer Python comme backend de mon serveur parce que Je suis nouveau sur python Je veux vous demander comment cibler le dossier dist qui contient tous les fichiers HTML et CSS et js des angular 4 applications dans = flask python serveur

Parce que mon application est une application SPA, j'ai défini des routes à l'intérieur angular composant de routage

Lorsque je cours ou sur tout autre itinéraire, je reçois ce message de chaîne './dist/index.html' Et je sais que je renvoie un message sous forme de chaîne mais je veux dire au flask quel que soit l'itinéraire que le type d'utilisateur sur l'URL laisse le angular pour afficher la page car à l'intérieur mon angular j'ai mis ces pages et fonctionne

toute aide comment commencer avec flask et angular pour construire simple REST API

Maintenant, j'ai cette structure de fichiers

python-angular4-app
                  |___ dist
                  |      |___ index.html
                  |      |___ style.css
                  |      |___ inline.js
                  |      |___ polyfill.js
                  |      |___ vendor.js
                  |      |___ favicon.ico
                  |      |___ assets
                  |
                  |___ server.py

Mon server.py a ce contenu

from flask import Flask

app = Flask(__name__, )

@app.route('/')
def main():
    return './dist/index.html'


@app.route('/about')
def about():
    return './dist/index.html'


@app.route('/contact')
def contact():
    return './dist/index.html'

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

Cordialement, George35mk thnx pour votre aide

pythonangularrestflask
15
George C.

Depuis que j'ai eu ce même problème, j'espère que cette réponse aidera quelqu'un à le chercher à nouveau.

  1. Créez d'abord votre angular et construisez-la. (Vous obtiendrez tous les fichiers js requis et le fichier index.html dans le dossier 'dist').

  2. Créez votre python + flask application web avec les points de terminaison requis).

    from flask import Flask,render_template
app = Flask(__name__)

@app.route("/")
def hello():
    return render_template('index.html')

if __name__ == "__main__":
    app.run()

  3. Créez un dossier "modèles" dans votre dossier racine de l'application python.

  4. Copiez votre fichier index.html du dossier angular dist dans le dossier 'templates' nouvellement créé.

  5. Créez un autre dossier appelé 'statique' dans votre dossier racine de l'application python

  6. Copiez ensuite tous les autres fichiers statiques (fichiers JS et fichiers CSS) dans ce nouveau dossier.

  7. Mettez à jour les URL de vos fichiers statiques de fichier index.html comme ceci.

      <script type="text/javascript" src="/static/inline.bundle.js"></script>

Flask regardez les fichiers statiques dans le dossier '/ root_folder/static' et mettez à jour l'url par rapport à cette structure.

Terminé. Maintenant, votre application sera diffusée sur localhost: 5000 et angular sera diffusée. La structure finale du dossier ressemblera à ceci,

    /pythondApplication
        |-server.py
        |-templates
        |     -index.html
        |-static
        |     -js files and css files

Puisque c'est ma première réponse dans stackoverflow, s'il y a quelque chose à corriger, n'hésitez pas à le mentionner.

8
Emalsha Rasad

Je ne pense pas qu'il soit possible d'accéder au répertoire Angular 'dist' via une API REST. Tout routage doit être effectué côté client avec Angular et Flask devrait gérer vos points d'extrémité.

En termes de construction de votre REST API, je recommanderais quelque chose comme ceci:

from flask import Flask, jsonify

app = Flask(__name__)

tasks = [
    {
        'id': 1,
        'title': u'Buy groceries',
        'description': u'Milk, Cheese, Pizza, Fruit, Tylenol', 
        'done': False
    },
    {
        'id': 2,
        'title': u'Learn Python',
        'description': u'Need to find a good Python tutorial on the web', 
        'done': False
    }
]

@app.route('/todo/api/v1.0/tasks', methods=['GET'])
def get_tasks():
    return jsonify({'tasks': tasks})

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

Ceci provient d'un très utile tutoriel sur la construction d'une API de base REST dans Flask.

Cela se connectera ensuite très bien à votre côté client dans Angular:

getInfo() {
 return  this.http.get(
   'http://myapi/id')
   .map((res: Response) => res.json());

}

2
DariusFontaine