Node.js 및 AngularJS 애플리케이션 구조화

Node.js 및 AngularJS 애플리케이션 구조화

---

첫 번째 AngularJS 프로젝트를 시도하려고하는데, AngularJS와 Node.js를 동시에 처음부터 배우는 것을 의미하더라도 백엔드로 Node.js를 사용하는 것이 합리적입니다.

가장 먼저 머리를 돌리려는 것은 좋은 파일 구조입니다. 지금까지 순수한 HTML / CSS 템플릿에는 다음과 같은 디렉토리 구조가 있습니다.

_site/
Fonts/
Javascript/
SASS/
Stylesheets/
Index.html

(_site는 PSD 등을위한 작업 디렉토리입니다.)

여기 에서 Node.js / AngularJS 앱에 대한 예제 디렉토리 구조를 찾았 습니다 ....

... 다음 디렉토리 구조를 제안합니다.

app.js              --> Application configuration
package.json        --> For npm
public/             --> All of the files to be used in on the client side
  css/              --> CSS files
    app.css         --> Default stylesheet
  img/              --> Image files
  js/               --> JavaScript files
    app.js          --> Declare top-level application module
    controllers.js  --> Application controllers
    directives.js   --> Custom AngularJS directives
    filters.js      --> Custom AngularJS  filters
    services.js     --> Custom AngularJS services
    lib/            --> AngularJS  and third-party JavaScript libraries
      angular/
        angular.js            --> The latest AngularJS
        angular.min.js        --> The latest minified AngularJS
        angular-*.js          --> AngularJS add-on modules
        version.txt           --> Version number
routes/
  api.js            --> Route for serving JSON
  index.js          --> Route for serving HTML pages and partials
views/
  index.jade        --> Main page for the application
  layout.jade       --> Doctype, title, head boilerplate
  partials/         --> AngularJS view partials (partial jade templates)
    partial1.jade
    partial2.jade

그래서 이것은 나에게 꽤 좋아 보인다 (내가 Jade를 사용하지 않는다는 사실을 제외하고).

여전히 다음과 같은 질문이 있습니다 ...

1. 모든 프런트 엔드 및 백 엔드 파일을 별도로 유지하고 싶습니다. 이 솔루션은 모든 프런트 엔드 파일을 public / 디렉토리에 넣습니다. 대부분이 공개되어야하기 때문에 어떤 종류의 의미가 있지만 여기에 SASS 및 _site 폴더를 배치하는 것이 합리적입니까? 그냥 거기에 둘 수는 있지만 프로덕션에 넣을 때는 업로드하지 못했지만 공개해서는 안되므로 잘못된 것 같습니다. 또한 모든 백엔드 항목과 함께 루트 수준에 속하지 않습니다.

2. CDN 에서 AngularJS를로드하는 것이 더 낫지 않을까요 ?

3. 서버가 하나의 템플릿 (주 응용 프로그램 템플릿) 만 전달하면되고 다른 모든 HTML은 프런트 엔드에서 구성 될 것이므로 index.html 파일을 정적으로 유지하고보기 폴더를 삭제하고 원래 AngularJS Seed 응용 프로그램처럼 public / 아래에 partials / 폴더를 만드시겠습니까?

나는 이것이 모두 의견의 문제라는 것을 알고 있으며 기술적으로는 내가 원하는 곳에 둘 수 있지만 나보다 경험이 많은 누군가가 다양한 디렉토리 구조의 함정에 대해 조언 해 줄 수 있기를 바랍니다.

---

1) 일반적으로 saas/less디버깅 할 때 클라이언트 측 less-> css 변환을 사용하고 싶을 수 있으므로 파일을 공개 하는 것이 합리적입니다 (less.js가 그렇게합니다). _site그러나 무엇을 포함하고 있는지 확실하지 않습니다 (btw 당신은 프로젝트에 소문자 폴더를 사용해야합니다 .

2) 일반적으로 프로덕션 환경에서 로컬 버전 만 사용하여 Google CDN에서 AngularJS를로드하는 것이 좋습니다. 환경에 따라 두 개의 개별 레이아웃을 가질 수 있습니다.

3) 클라이언트 측 렌더링이 갈 길이더라도 서버 측 레이아웃 / 뷰 렌더링을 유지할 수 있지만 어느 시점에서 필요할 것입니다 (관리자 액세스, 이메일 렌더링 등). 그러나 partials공용 폴더에서 AngularJS 의 이름 을 사용하면 서버 측 views과 클라이언트 측 간의 혼동을 피하는 데 도움이 될 수 있습니다 partials.

현재 가장 논리적으로 보이는 일을 분명히해야합니다. Express에 익숙해지면서 일을 옮길 것입니다.

---

기존 익스프레스 프레임 워크를 확인하여 앱을 어떻게 구성하는지 확인해야합니다. 예를 들어, TowerJS 에는 꽤 깨끗한 config폴더가 있지만 개인적으로 싫어하는 서버 측 및 클라이언트 측 코드가 섞여 있습니다.

이 NodeJS MVC 프레임 워크 비교 를 확인하여 다른 사람들이 어떻게 작업하는지 확인하십시오. 그러나 나는 완전히 제어하고 이러한 프레임 워크에 대해 과도하게 커밋하기 전에 작동 방식을 이해하기 위해 바닐라 익스프레스 코드로 분명히 시작할 것입니다.

---

시간이 지남에 따라 상황이 더 쉬워지고 있습니다. 나는 AngularJS 프론트 엔드에 Yeoman을 사용했고, 그것은 삶을 훨씬 더 쉽게 만듭니다 : http://yeoman.io/

옵션 1, MEAN.io

MEAN은 멋진 약어입니다! MEAN 스택 디렉토리 구조를 선호합니다. 컨벤션 피플을 이용합시다! mean.io 의 디렉토리 구조를 사용하십시오 . MEAN은 Grunt , Bower 등과 같은 모든 장점을 제공하기 때문에 편리합니다 .

옵션 2, Angular-seed + Express.js

GitHub에서 Node.js / AngularJS 프로젝트 (아마도 충분히 어렵지 않음)를 검색했지만 시작 디렉터리 구조에 대해 정말 좋은 것을 보지 못했습니다. 그래서 Node.js Express.js ( EJS 도 Jade / Pug 도 사용하지 않는 명령 줄에서 Express.js 실행 ) 골격을 각도 시드 프로젝트 ( GitHub에서 복제 )와 병합 했습니다 . 그런 다음 많은 물건을 옮겼습니다. 내가 생각 해낸 것은 다음과 같습니다.

---

• developer-개발자 만 사용할 것. 배포 할 필요가 없습니다.
  • config -카르마 구성 파일 및 기타.
  • scripts -개발자 스크립트 (빌드, 테스트 및 배포)
  • test -e2e 및 단위 테스트.
• logs
• node_modules- 이 Stack Overflow 답변 은 이것을 Git에 넣는 것이 좋습니다. 그러나 이것은 이제 구식 일 수 있습니다 .
• public -이것은 angular-seed 앱 폴더에서 거의 바로 나옵니다.
  • css, img, js, lib, partials- 아주 분명하고 좋은 짧은.
• routes -Node.js 경로.
• server -서버 측 "shebang"Node.js 프로그램, 데몬, 크론 프로그램 등.
• server.js -이것이 서버 측임을 더 명확히하기 위해 app.js에서 이름이 변경되었습니다.

---

---

제안 된대로 대부분의 개인 취향과 당시 작업중인 프로젝트에 적합한 것이 무엇인지에 달려 있습니다. 여러분이 말하는 모든 사람은 서로 다른 아이디어를 갖게 될 것이며 각 프로젝트는 고유 한 디자인을 가지고 있습니다. 한 사람에게 효과가있는 것이 다른 사람에게는 효과가 없을 수 있습니다. 나는 당신이 꽤 다른 구조를 시도하고 곧 가장 편안한 구조를 찾을 것이라고 기대하지만 이것은 시간이 지남에 따라 계속 발전 할 것입니다.

Angular Seed 구조가 가장 깨끗하다는 것을 알았지 만 다시 한 번 개인적 선호도입니다 (Angular 팀에서 설계 한 것이 도움이됩니다).

프로젝트 스켈레톤을 생성하기 위해 Yeoman 을 고려할 수도 있습니다 .

Yeoman은 개발자가 아름답고 매력적인 웹 앱을 빠르게 구축하는 데 도움이되는 강력하고 독단적 인 도구, 라이브러리 및 워크 플로 세트입니다.

프로젝트를 부트 스트랩하고 관리하기위한 훌륭한 도구 (Rails가하는 방식과 유사)이며 빌드 할 디렉토리 구조와 스켈레톤 파일을 생성합니다. Brian Ford는 Angular와 함께 Yeoman을 사용 하는 것에 대한 훌륭한 게시물 을 작성했습니다 .

또한 YouTube 채널에서 Angular 모임 녹음을 시청하는 것이 좋습니다. 저는 최근에 이러한 질문이 제기 된 Mountain View의 모임에 참석했습니다. Miško는 Angular Seed와 Yeoman을 추천했습니다 (적어도 좋은 출발점으로).

개별 질문에 답하려면 :

1. 서버 측에서 컴파일 된 모든 파일은 공용 폴더 외부에 보관해야합니다. 마스터 PSD, 목업 또는 공용 폴더 (브라우저 나 사용자에 의한)가 아닌 다른 파일과 같은 파일을 공용 폴더에 보관하지 않는 것이 좋습니다.

2. It is always good to serve static assets (JS, images, CSS) from a CDN if you expect a high amount of traffic. It's not so important for lesser visited sites, but still a good idea. I would start by serving the files locally for initial development. Leave the asset optimization for when you are nearing your live date. When this time does come you'll also want to get your caching set up right. Yeoman, for example, presents a good way of versioning your assets. This gives you the advantage of long lived caches but allowing you to push updates of the files to the clients.

3. If you're index file doesn't require any server-side rendering, serve it statically. I like to keep my backend decoupled from the backend as much as possible with Angular apps. It helps maintain separation of concern; when developing the client files, you don't need to think about the backend at all (Angular is great for this.)

Really, you just need to play around; try different things out, read blog posts, get ideas from others, ask questions (as you have done here, and on the Angular Google+ community page), watch videos and, if you can, attend meetups - Meetups really are great for this.

---

I don't agree with all the previous posts. They are either pasted from another place or didn't have their own mind. From my experiences, it's better to flatten your client-side codes. I mean the code inside your client directory should be in your root directory.

Why do I suggest this way? Because if you want to change your full-stack JavaScript project to the one without backend, but only include the frontend, it's much easier. I mean most projects written with JavaScript are focused on the frontend.

It's better to put your backend code in a directory like "server" in the same folder level as like "css", "image"... The advantage of it is that when you need or don't need a backend, just add or delete the "server" directory, and it wouldn't affect the origin project structure.

Like this:

---

I was investigating the very same thing.

My initial thoughts were directed towards using Express Generator and Angular Seed.

Then I found a much nicer solution:

• http://yeoman.io/
• http://yeoman.io/generators/
• (one of the most popular generators) https://github.com/angular-fullstack/generator-angular-fullstack

One of the most popular yeoman generators provides you with a structure to Node.js and AngularJS applications.

I believe in power of standardisation and new people joining the project will appreciate the unified structure.

---

See this skeleton

https://github.com/Giancarlo1974/SailsAngular

It's integrates Angular 4 + Bootstrap 4 for the client and Node Sails JS for the server

이 솔루션의 장점 중 하나는 1) 작업 자동화 2) 데이터베이스 불가지론입니다.

참고 URL : https://stackoverflow.com/questions/13998793/structuring-a-node-js-and-angularjs-application