Структурування програми Node.js та AngularJS


77

Я збираюся спробувати свій перший проект AngularJS, і має сенс використовувати Node.js для задньої частини, хоча це означає вивчення як AngularJS, так і 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

Отже, мені це виглядає цілком непогано (за винятком того, що я б не використовував Джейд).

У мене ще є такі запитання ...

  1. Я хочу тримати всі інтерфейсні та фонові файли окремо. Це рішення поміщає всі інтерфейсні файли у папку public /, що має сенс, оскільки більшість із них мають бути загальнодоступними, але чи є сенс розміщувати тут папки SASS і _site? Я міг би просто тримати їх там, але не завантажувати, коли запускаю їх у виробництво, але це здається неправильним, оскільки вони не повинні бути загальнодоступними. Вони також не належать до кореневого рівня з усіма базовими матеріалами.

  2. Чи не краще було б завантажити AngularJS з CDN ?

  3. Враховуючи, що серверу потрібно буде доставити лише один шаблон (основний шаблон програми), а весь інший HTML буде побудований на фронт-енді, чи не було б більше сенсу зберігати файл index.html статичним, видаляти папку подань і створити частинки / папку під загальнодоступними / як оригінальна програма AngularJS Seed?

Я усвідомлюю, що це все питання думки, і технічно я міг би розмістити їх куди завгодно, але я сподіваюся, що хтось більш досвідчений, ніж я, може порадити мені про підводні камені різних структур каталогів.


Вам може статися це посилання корисним Angular Structure Project
Dalorzo,

Відповіді:


20

1) Зазвичай має сенс оприлюднювати saas/lessфайли загальнодоступними, оскільки при налагодженні ви можете використовувати перетворення менше-> css на стороні клієнта (менше робить це .js). Не впевнені, що ваш вміст,_site однак (до речі, ви повинні використовувати малу папку для вашого проекту, особливо для загальнодоступних матеріалів) .

2) Зазвичай хорошою практикою є завантаження AngularJS з Google CDN, коли у виробництві, використовуючи лише локальну версію для розробки, ви можете мати два окремі макети, залежно від вашого оточення.

3) Навіть якщо візуалізація на стороні клієнта - це шлях, ви можете зберегти рендеринг макета / подання на стороні сервера, можливо, він колись вам знадобиться (доступ адміністратора, надання електронної пошти тощо). Однак може бути корисно використовувати partialsім'я з AngularJS у загальній папці, щоб уникнути плутанини між стороною сервера viewsта клієнта partials.

Вам слід чітко визначитися з тим, що на даний момент здається найбільш логічним, імовірно, ви будете рухатись, коли ознайомитесь із експресом.


Вам слід перевірити існуючий експрес-фреймворк, щоб побачити, як вони структурують свої програми. Наприклад, у TowerJS є досить чиста configпапка, однак вони змішують код на стороні сервера та клієнта, що мені особисто не подобається.

Перевірте це порівняння фреймворків NodeJS MVC, щоб побачити, як інші роблять речі. Однак я б чітко почав із коду vanilla express, щоб мати повний контроль і зрозуміти, як все працює, перш ніж надмірно фіксувати будь-яку з цих фреймворків.


2
No2 мене здивував. Ви справді рекомендуєте CDN для продажу? Чому?
Джесс

12
оскільки ресурс, розміщений на CDN, буде завантажений набагато швидше (географічне поширення хостів) і має великі шанси вже бути кешованим вашим браузером (таким чином, відповівши миттєвим 304 не зміненим), оскільки існує багато інших веб-сайтів, які вже використовують їх. Вам все одно слід створити один файл js із власним кодом (за винятком cdn-libs)
Олів'є

Ого. Чудово вчитися. Хороший підсумок. Ось додаткова інформація: stackoverflow.com/questions/2180391/… та stackoverflow.com/questions/547384/…
Джес

Як ви створюєте "окремі макети залежно від вашого оточення"? Хтось знає про проект, який це демонструє? Також головна перевага цього - налагоджувати файли .js у розробці, але обслуговувати файли .min.js у виробництві?
грабувати

2
Я сумніваюся, що ресурси, розміщені на CDN, швидші. Виробничий веб-додаток, як правило, об'єднує всі файли постачальників в один файл. Таким чином, клієнт повинен виконати лише один запит http, щоб отримати всі js-файли постачальника. Розміщені JS-файли вимагають по одному http-запиту на файл - кешований чи ні, вони займуть набагато більше часу, ніж ваш один файл.
Спок

36

З часом все стає простіше. Я використовував Yeoman для інтерфейсу AngularJS, і це значно полегшує життя: 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 (запустивши Express.js із командного рядка, не використовуючи ні EJS, ні Jade / Pug ), скелет із проектом angular-seed ( клонуйте його з GitHub ). Потім я перемістив тонну речі навколо. Ось що я придумав:


  • developer- речі, які використовуватиметься лише розробником (розробниками). Не потрібно розгортати.
    • config - файли конфігурації karma та інші.
    • scripts - сценарії розробника (побудова, тестування та розгортання)
    • test - e2e та модульні тести.
  • logs
  • node_modules- ця відповідь на переповнення стека рекомендує помістити це в Git. Однак зараз це може бути застарілим .
  • public - Це відбувається майже прямо з папки програми angular-seed.
    • css, img, js, lib, partials- досить очевидно , і красиво і короткі.
  • routes - Маршрути Node.js.
  • server - серверні програми "shebang" Node.js, демони, програми cron, що завгодно.
  • server.js - перейменовано з app.js лише для того, щоб зробити більш очевидним, що це сторона сервера.

Введіть тут опис зображення


1
Тут мені подобається Rails. Конвенція - відмінна ідея.
Джесс

Давайте зробимо це майстром для Nodeclipse Node.js. Де джерела для цього шаблону?
Пол Верест,

Привіт @PaulVerest, я не маю жодного джерела як такого. Я взяв проект angular-seed та базовий експрес-генерований проект node.js та об’єднав їх разом. Експрес див. На цій сторінці: expressjs.com/guide.html , виконайте пошук за допомогою express (1) для створення програми . Для angular
Джес

Я бачу, я сподівався, що є джерела, які ми можемо використовувати як шаблон у Nodeclipse. У нас уже є Майстер для Express, додавання Angular все ще буде ручним.
Пол Верест,

1
@BenTaliadoros - ти маєш рацію. З часом ситуація змінилася, і npm покращився. Я пов’язав запитання SO та відредагував свою відповідь. Дякую.
Джесс

5

Як пропонується, здебільшого це зводиться до особистих уподобань та того, що працює для проекту, над яким ви працюєте на той час. Кожен, з ким ви розмовляєте, матиме різні ідеї, і кожен проект має власний дизайн - те, що працює для одного, може не працювати для іншого. Я сподіваюся, ви спробуєте досить багато різних конструкцій і незабаром знайдете таку, яка є найзручнішою, але вона все одно буде змінюватися з часом.

Я виявив, що структура Angular Seed є найчистішою, але знову ж таки це особисті переваги (хоча допомагає те, що вона розроблена командою Angular).

Ви також можете поглянути на Yeoman для створення скелетів проектів.

Yeoman - це надійний та самовпевнений набір інструментів, бібліотек та робочого процесу, який може допомогти розробникам швидко створювати красиві, переконливі веб-програми.

Це чудовий інструмент для завантаження та управління проектами (подібно до того, як це робить Rails), і створить структуру каталогів та файли скелета, на яких можна будувати. Брайан Форд написав чудовий допис про використання Yeoman з Angular.

Я також пропоную подивитися записи зустрічей Angular на їхньому каналі YouTube. Нещодавно я був на зустрічі в Маунтін-В'ю, де виникали ці запитання. Мішко рекомендував кутові насіння та йомен (принаймні, як гарну вихідну точку).

Щоб відповісти на ваші індивідуальні запитання:

  1. Будь-які файли, які компілюються на стороні сервера, слід зберігати за межами вашої загальної папки. Я б радив не зберігати подібні головні PSD, макети чи будь-які інші файли, які не призначені для загального споживання (або браузером, або користувачем), у загальних папках.

  2. Завжди добре обслуговувати статичні активи (JS, зображення, CSS) з CDN, якщо ви очікуєте великого обсягу трафіку. Це не так важливо для менш відвідуваних сайтів, але все ж хороша ідея. Я б почав з обслуговування файлів локально для початкової розробки. Залиште оптимізацію активів на час, коли ви наближаєтеся до дати вашої трансляції. Коли цей час настане, ви також захочете правильно налаштувати кешування. Наприклад, Yeoman представляє хороший спосіб встановлення версій ваших активів. Це дає вам перевагу довговічних кеш-пам'яток, але дозволяє надсилати оновлення файлів клієнтам.

  3. Якщо файл індексу не вимагає жодного візуалізації на стороні сервера, подавайте його статично. Мені подобається тримати мою бекенд якнайбільше відокремленим від бекенда за допомогою програм Angular. Це допомагає підтримувати поділ турботи; розробляючи файли клієнта, вам зовсім не потрібно думати про серверну інформацію (Angular чудово для цього підходить.)

Справді, вам просто потрібно пограти; випробовуйте різні речі, читайте публікації в блозі, отримуйте ідеї від інших, задавайте питання (як ви робили тут і на сторінці спільноти Angular Google+), переглядайте відео та, якщо можете, відвідуйте зустрічі - зустрічі дійсно чудові для цього.


Єоман є деф. шлях. Це також створить структури коду (шаблонний код) і для вас.
Steve K

2

Я не згоден з усіма попередніми публікаціями. Вони або приклеєні з іншого місця, або не мали власного розуму. З мого досвіду, краще згладити ваші коди на стороні клієнта. Я маю на увазі, що код у вашому клієнтському каталозі повинен бути у вашому кореневому каталозі.

Чому я пропоную цей шлях? Оскільки, якщо ви хочете змінити свій повнотекстовий проект JavaScript на проект без серверної бази, але включаючи лише інтерфейс, це набагато простіше. Я маю на увазі, що більшість проектів, написаних на JavaScript, орієнтовані на інтерфейс.

Краще помістити свій серверний код у каталог, такий як "сервер", на тому ж рівні папки, що і "css", "image" ... Перевага цього полягає в тому, що коли вам потрібна або не потрібна серверна система, просто або видалити каталог "сервер", і це не вплине на структуру початкового проекту.

Подобається це:

Введіть тут опис зображення


0

Я розслідував те саме.

Мої початкові думки були спрямовані на використання Express Generator та Angular Seed .

Тоді я знайшов набагато приємніше рішення:

Один з найпопулярніших генераторів Yeoman надає вам структуру програм Node.js та AngularJS.

Я вірю в силу стандартизації, і нові люди, які приєднаються до проекту, оцінять єдину структуру.


Як завжди, коли голосую проти - будь ласка, надайте відгук - на моє наївне розуміння - стартові проекти тут для впровадження найкращих практик з точки зору структури коду - чого мені тут не вистачає?
Марс Робертсон,

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.