일반적인 AngularJS 워크 플로 및 프로젝트 구조 (Python Flask 사용)

나는이 전체 MV * 클라이언트 측 프레임 워크 열풍에 대해 아주 새롭다. AngularJS 일 필요는 없지만 Knockout, Ember 또는 Backbone보다 자연 스럽기 때문에 선택했습니다. 어쨌든 워크 플로는 어떻습니까? 사람들이 AngularJS에서 클라이언트 측 애플리케이션을 개발 한 다음 백엔드를 연결하는 것으로 시작합니까?

아니면 Django, Flask, Rails에 백엔드를 먼저 구축하고 AngularJS 앱을 연결하여 다른 방법으로 사용할 수 있습니까? 그것을하는 "올바른"방법이 있습니까, 아니면 결국 개인적인 취향입니까?

또한 Flask 또는 AngularJS에 따라 프로젝트를 구성할지 확실하지 않습니까? 지역 사회 관행.

예를 들어 Flask의 minitwit 앱은 다음과 같이 구성됩니다.

minitwit
|-- minitwit.py
|-- static
   |-- css, js, images, etc...
`-- templates
   |-- html files and base layout

AngularJS 튜토리얼 앱은 다음과 같이 구성됩니다 :

angular-phonecat
|-- app
    `-- css
    `-- img
    `-- js
    `-- lib
    `-- partials
    `-- index.html
|-- scripts
 `-- node.js server and test server files

Flask 앱 자체를 그림으로 만들 수 있으며 AngularJS 앱을 ToDo List와 같이 쉽게 볼 수는 있지만 두 기술을 모두 사용하는 경우 어떻게 작동하는지 이해할 수 없습니다. AngularJS가 이미있을 때 서버 측 웹 프레임 워크가 필요하지 않은 것처럼 보입니다. 단순한 Python 웹 서버로 충분합니다. 예를 들어 AngularJS 할 일 앱에서 MongoLab을 사용하여 Restful API를 사용하여 데이터베이스와 통신합니다. 백엔드에 웹 프레임 워크가 필요하지 않았습니다.

어쩌면 나는 몹시 혼란 스러울 수 있으며 AngularJS는 멋진 jQuery 라이브러리에 불과하므로 Flask 프로젝트에서 jQuery를 사용하는 것처럼 사용해야합니다 (AngularJS 템플릿 구문을 Jinja2와 충돌하지 않는 것으로 변경한다고 가정). 내 질문이 이해되기를 바랍니다. 나는 주로 백엔드에서 일하며이 클라이언트 측 프레임 워크는 알려지지 않은 영역이다.

다음과 같이 Flask 앱을 ​​표준 구조로 구성합니다.

app
|-- app.py
|-- static
    |-- css
    |-- img
    |-- js
|-- templates

btford가 언급했듯이 Angular 앱을 사용하는 경우 Angular 클라이언트 측 템플릿 사용에 집중하고 서버 측 템플릿에서 멀리 떨어져 있어야합니다. render_template ( 'index.html')을 사용하면 Flask가 각도 템플릿을 jinja 템플릿으로 해석하므로 올바르게 렌더링되지 않습니다. 대신 다음을 수행하고 싶을 것입니다.

@app.route("/")
def index():
    return send_file('templates/index.html')

send_file ()을 사용한다는 것은 파일이 캐시됨을 의미하므로 최소한 개발을 위해 make_response ()를 대신 사용할 수 있습니다.

    return make_response(open('templates/index.html').read())

그런 다음 앱의 AngularJS 부분을 빌드하여 다음과 같이 앱 구조를 수정하십시오.

app
|-- app.py
|-- static
    |-- css
    |-- img
    |-- js
        |-- app.js, controllers.js, etc.
    |-- lib
        |-- angular
            |-- angular.js, etc.
    |-- partials
|-- templates
    |-- index.html

index.html에 AngularJS 및 기타 파일이 포함되어 있는지 확인하십시오.

<script src="static/lib/angular/angular.js"></script>

이 시점에서 아직 RESTful API를 구성하지 않았으므로 js 컨트롤러가 사전 정의 된 샘플 데이터 (임시 설정 만)를 리턴하도록 할 수 있습니다. 준비가되면 RESTful API를 구현하고 angular-resource.js를 사용하여 angular 앱에 연결하십시오.

편집 : 나는 위에서 설명한 것보다 조금 더 복잡하지만 AngularJS + Flask로 앱을 빌드하고 AngularJS와 간단한 Flask API 간의 통신으로 완성되는 방법을 보여주는 앱 템플릿을 모았습니다. https://github.com/rxl/angular-flask 를 확인하려면 여기를 클릭하십시오.

양쪽 끝에서 시작할 수 있습니다.

AngularJS와 함께 완전한 서버 측 프레임 워크가 필요하지 않을 수도 있습니다. 일반적으로 정적 HTML / CSS / JavaScript 파일을 제공하고 클라이언트가 사용할 백엔드에 RESTful API를 제공하는 것이 좋습니다. 피해야 할 한 가지 사항은 서버 측 템플릿을 AngularJS 클라이언트 측 템플릿과 혼합하는 것입니다.

Flask를 사용하여 파일을 제공하려면 (과도 할 수 있지만 그럼에도 불구하고 사용할 수는 있음) "angular-phonecat"에서 "minitwit"의 "static"폴더로 "app"의 내용을 복사합니다.

AngularJS는 AJAX와 유사한 응용 프로그램을 대상으로하는 반면 플라스크는 구형 웹 응용 프로그램을 모두 수행하고 RESTful API를 만들 수있는 기능을 제공합니다. 각 접근 방식에는 장단점이 있으므로 실제로 원하는 작업에 따라 다릅니다. 당신이 나에게 통찰력을 주면, 나는 더 많은 추천을 할 수 있습니다.

John Lindquist (angular.js 및 jetbrains guru)의 공식 Jetbrains PyCharm 비디오는 플라스크 내에서 웹 서비스, 데이터베이스 및 angular.js의 상호 작용을 보여주기 때문에 좋은 출발점입니다.

그는 플라스크, sqlalchemy, flask-restless 및 angular.js를 사용하여 25 분 이내에 가장 재미있는 클론 을 만듭니다 .

즐기십시오 : http://www.youtube.com/watch?v=2geC50roans

편집 : 새로운 Angular2 스타일 가이드 는 동일한 구조는 아니지만 훨씬 더 비슷하게 제안합니다.

아래 답변은 대규모 프로젝트를 대상으로합니다. 나는 여러 가지 접근법을 생각하고 실험하는 데 꽤 많은 시간을 보냈으므로 Angular와 같은 클라이언트 측 프레임 워크와 백엔드 기능을 위해 일부 서버 측 프레임 워크 (Flask with App Engine과 함께)를 결합 할 수 있습니다. 두 가지 대답 모두 매우 좋지만 (적어도) 좀 더 인간적인 방식으로 확장되는 약간 다른 접근법을 제안하고 싶습니다.

TODO 예제를 구현할 때는 상황이 매우 간단합니다. 기능 및 사용자 경험 개선을위한 작은 멋진 세부 정보를 추가하기 시작할 때 스타일, 자바 스크립트 등의 혼란에서 길을 잃기가 어렵지 않습니다.

내 응용 프로그램이 상당히 커지기 시작했기 때문에 물러서서 다시 생각해야했습니다. 처음에 위에서 제안한 것과 같은 접근 방식은 모든 스타일과 모든 JavaScript를 함께 사용하지만 모듈식이 아니고 유지 관리가 쉽지 않은 방식으로 작동합니다.

파일 유형이 아닌 기능별로 클라이언트 코드를 구성한 경우 :

app
|-- server
    |-- controllers
        |-- app.py
    |-- models
        |-- model.py
    |-- templates
        |-- index.html
|-- static
    |-- img
    |-- client
        |-- app.js
        |-- main_style.css
        |-- foo_feature
            |-- controller.js
            |-- directive.js
            |-- service.js
            |-- style.css
            |-- html_file.tpl.html
        |-- bar_feature
            |-- controller.js
            |-- directive.js
            |-- service.js
            |-- style.css
            |-- html_file.tpl.html
    |-- lib
        |-- jquery.js
        |-- angular.js
        |-- ...

등등.

이렇게 빌드하면 모든 디렉토리를 각도 모듈로 감쌀 수 있습니다. 또한 특정 기능으로 작업 할 때 관련없는 코드를 거치지 않아도되도록 파일을 분할했습니다.

Grunt 와 같은 작업 러너는 올바르게 구성되어 번거 로움없이 파일을 찾고 연결하고 컴파일 할 수 있습니다.

다른 옵션은 둘을 완전히 분리하는 것입니다.

계획
|-서버
|-클라이언트

flask와 관련된 파일은 서버 폴더 아래에 있고 angularjs와 관련된 파일은 클라이언트 폴더 아래에 있습니다. 이렇게하면 백엔드 또는 프론트 엔드를 쉽게 변경할 수 있습니다. 예를 들어, 나중에 Flask에서 Django로 또는 AngularJS에서 ReactJS로 전환 할 수 있습니다.

프런트 엔드 또는 백 엔드와 같은 대부분의 데이터 처리를 수행하려는 엔드를 결정하는 것이 중요하다고 생각합니다.
프런트 엔드 인 경우 각도 워크 플로우를 수행하십시오. 즉 플라스크 응용 프로그램은 플라스크-휴식과 같은 확장이 끝나는 api의 더 많은 기능을 수행합니다.

그러나 나와 같은 경우 백엔드에서 대부분의 작업을 수행 한 다음 플라스크 구조로 이동하고 각도 (또는 내 경우 vue.js) 만 연결하여 프론트 엔드를 작성하십시오 (필요한 경우)