표준 각도JS 워크플로우 및 프로젝트 구조(Python Flask 포함)

표준 각도JS 워크플로우 및 프로젝트 구조(Python Flask 포함)

MV* 클라이언트측 프레임워크에 대한 열광은 처음입니다.꼭 AngularJS일 필요는 없지만 녹아웃이나 엠버, 백본보다 자연스러운 느낌이 들어서 골랐어요.어쨌든 워크플로우는 어떻습니까?Angular에서 클라이언트 측 애플리케이션 개발을 시작합니까?JS에 백엔드를 연결한다고요?

또는 먼저 Django, Flask, Rails에 백엔드를 만든 다음 Angular를 부착하여 반대 방향으로 돌립니다.JS앱?'올바른' 방법이 있을까요?아니면 결국 개인적인 취향일까요?

또, 플라스크나 Angular JS의 커뮤니티의 관행에 따라 프로젝트를 구축해야 할지 잘 모르겠습니다.

예를 들어 Flask의 미니트윗 앱은 다음과 같이 구성되어 있습니다.

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

플라스크 앱은 혼자서 상상할 수 있고, Angular도 쉽게 볼 수 있습니다.JS 앱 자체로는 ToDo List를 좋아하지만, 이 두 기술을 모두 사용하는 것에 관해서는 어떻게 연동되는지 잘 모르겠습니다.AngularJS를 이미 가지고 있다면 서버측 웹 프레임워크는 필요없을 것 같습니다.심플한 Python 웹 서버라면 충분합니다.각진 상태예를 들어 JS To-Do 앱은 MongoLab을 사용하여 Restful API를 사용하여 데이터베이스와 대화합니다.백엔드에 웹 프레임워크를 설치할 필요가 없었습니다.

내가 너무 혼란스러워서인지 앵글은JS는 화려한 jQuery 라이브러리에 지나지 않기 때문에 플라스크 프로젝트에서 jQuery를 사용하는 것처럼 사용해야 합니다(Angular를 변경하는 경우).JS 템플릿 구문에서 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())

그런 다음 Angular를 구축합니다.앱의 JS 부분을 다음과 같이 앱 구조를 수정합니다.

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 앱에 연결합니다.

편집: 위에서 설명한 것보다 조금 더 복잡하지만 Angular를 사용하여 앱을 만드는 방법을 설명하는 앱 템플릿을 만들었습니다.JS + 플라스크, Angular 간 통신으로 완성JS 및 간단한 플라스크 API.여기 https://github.com/rxl/angular-flask에서 확인하실 수 있습니다.

어느 쪽이든 시작할 수 있습니다.

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

Flask를 사용하여 파일을 처리하고 싶다면(과다할지 모르지만 사용할 수 있습니다), "app"의 내용을 "angular-phonecat"에서 "minitwit"의 "static" 폴더에 복사합니다.

AngularJS는 AJAX와 같은 어플리케이션을 타깃으로 하는 반면 플라스크는 오래된 스타일의 웹 어플리케이션과 RESTful API를 모두 작성할 수 있는 기능을 제공합니다.각각의 접근법에는 장점과 단점이 있기 때문에 무엇을 하고 싶은지에 따라 다릅니다.당신이 저에게 통찰력을 주신다면, 제가 더 추천할 수 있을 것 같습니다.

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

그는 25분 이내에 플라스크, sqlalchemy, 플라스크리스 및 angular.js를 사용하여 핀터레스트 클론을 만듭니다.

보기: http://www.youtube.com/watch?v=2geC50roans

편집: 새로운 Angular2 스타일 가이드는 같은 구조를 훨씬 더 자세히 제안합니다.

다음 답변은 대규모 프로젝트를 대상으로 합니다.백엔드 기능을 위해 서버 측 프레임워크(내 경우 Flask with App Engine)를 Angular와 같은 클라이언트 측 프레임워크와 결합할 수 있도록 몇 가지 접근 방식을 고민하고 실험했습니다.두 가지 답변 모두 매우 좋지만, 저는 (적어도) 좀 더 인간적인 방식으로 확장되는 조금 다른 접근법을 제안하고 싶습니다.

TODO의 예를 실장하고 있는 경우는, 매우 간단합니다.기능이나 사용자 경험 향상을 위한 작은 디테일을 추가해 두면, 스타일이나 Javascript등의 혼란에 빠지는 것은 어렵지 않습니다.

애플리케이션이 커지기 시작했기 때문에 한 걸음 물러서서 다시 생각해 봐야 했습니다.처음에 위와 같은 접근방식은 모든 스타일과 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와 같은 태스크 러너를 적절하게 구성하면 파일을 쉽게 검색하여 연결 및 컴파일할 수 있습니다.

또 다른 방법은 이 둘을 완전히 분리하는 것입니다.

프로젝트.|--서버|--클라이언트

플라스크 관련 파일은 서버 폴더 아래에 있고 angularjs 관련 파일은 클라이언트 폴더 아래에 있습니다.이렇게 하면 백엔드 또는 프런트엔드를 쉽게 변경할 수 있습니다.예를 들어 플라스크에서 Django 또는 Angular로 전환할 수 있습니다.반응할 JS앞으로 JS.

데이터 처리의 대부분을 프런트 엔드 또는 백 엔드 중 어느 쪽에서 실행할지를 결정하는 것이 중요하다고 생각합니다.
프런트 엔드의 경우는, 각도 워크플로우를 사용해 주세요.이것은 플라스크 앱이 플라스크 레스트풀과 같은 확장이 끝나는 api와 같은 기능을 하는 것을 의미합니다.

그러나 저처럼 백엔드에서 대부분의 작업을 하고 있다면 플라스크 구조를 사용하여 각(또는 제 경우는 vue.js)만 플러그하여 프런트 엔드를 구축합니다(필요한 경우).

언급URL : https://stackoverflow.com/questions/11522151/typical-angularjs-workflow-and-project-structure-with-python-flask