Angular 4 interface with python flag how to make simple index page

Question

Hi, Python community. I am an angular and node.js developer, and I want to try Python as my server server, because I am new to python. I want to ask you how to target the dist folder containing all HTML and CSS and js files from angular 4 applications on python server on flacks

Since my application is a SPA application, I set up routes inside the angular component for routing

When I start or any other route, I get this string message './dist/index.html' And I know that I am returning a string message, but I want to tell the flag about which route the user enters the URL so that angular displays page because inside my angular app i installed these pages and working

any help how to start with a flask and angular to create a simple REST API

I now have this file structure

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

My .py server has this content

 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) 

Best regards George35mk thnx for your help

Answer 1

I do not think that it is possible to access the Angular 'dist' directory through the REST API. Any routing should be done on the client side using Angular, and the flag should handle the endpoints.

In terms of creating your REST API, I would recommend something like this:

 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) 

This is from a very useful tutorial on creating a basic REST API in Flask.

This will then be perfectly connected to your client side in Angular:

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

}