Angular 4 frontend с Python flask backend как визуализировать простую индексную страницу

Привет сообщество Python я угловой и узел.JS developer и я хочу попробовать Python в качестве бэкэнда моего сервера, потому что я новичок в python я хочу спросить вас, как настроить папку dist, которая содержит все файлы HTML и CSS и js из угловых 4 приложений в Flask python server

потому что мое приложение является спа-приложением, я установил маршруты внутри углового компонента маршрутизации

когда я бегу или любой другой маршрут, я получаю это строковое сообщение './dist/index.html' И я знаю, что вернусь. строковое сообщение, но я хочу сказать колбе, какой маршрут тип пользователя на URL пусть угловой, чтобы отобразить страницу, потому что внутри моего углового приложения я установил эти страницы и работает

любая помощь, как начать с колбы и угловой, чтобы построить простой REST API

Теперь у меня есть эта структура файла 

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

мой server.py имейте это содержание

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)

С наилучшими пожеланиями George35mk thnx за вашу помощь

8
angular flask python rest

2 ответов

поскольку у меня была такая же проблема, я надеюсь, что этот ответ поможет кому-то искать его снова.

  1. создать ваш угловой приложения и строить. (Вы получите все необходимые JS-файлы и индекс.html-файл внутри папки "dist".

  2. создайте веб-приложение python + flask с требуемыми конечными точками.

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

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

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

  3. создайте папку "шаблоны"внутри корневой папки приложения python.

  4. копировать ваш индекс.html-файл из папки angular dist во вновь созданную папку "шаблоны".

  5. создайте другой вызов папки "статический" внутри корневой папки приложения python

  6. затем скопируйте все остальные статические файлы (JS-файлы и CSS-файлы ) в эту новую папку.

  7. обновить индекс.HTML-файл статические URL-адреса файлов, как это.

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

фляжка смотреть статические файлы внутри '/root_folder / static ' папка и обновление url относительно этой структуры.

сделано. Теперь ваше приложение будет служить на localhost: 5000 и angular приложение будет служить. Окончательная структура папок будет выглядеть так,

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

поскольку это мой первый ответ в stackoverflow, если есть что-то, что нужно исправить, не стесняйтесь упоминать об этом.

4

Я не думаю, что можно получить доступ к каталогу Angular 'dist' через REST API. Любая маршрутизация должна выполняться на стороне клиента с помощью Angular, а колба должна обрабатывать ваши конечные точки.

что касается создания вашего REST API, я бы рекомендовал что-то вроде этого: 

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)

это от очень полезным учебник о создании базового API REST в колбе.

это будет очень хорошо подключаться к вашей стороне клиента в Угловой:

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

}

2