Angular-seed - это де-факто пустой проект для начала?


82

Убедившись в необходимости изучить и использовать Angular.js, я собирался запустить конкретное приложение веб-интерфейса, чтобы запустить колесо обучения. (Приложение будет своего рода личным планированием, списком дел, напоминанием, ориентированной на технику помидора и так далее ...)

Одно из просмотренных мною обучающих видео от автора Angular посвящено передовым практикам. И одна из лучших практик - начать с angular-seedпроекта.

Это то, что я собирался сделать, но после небольшого поиска в Google уже есть как минимум два других проекта, которые претендуют на то, чтобы стать хорошей отправной точкой:

  • angular-enterprise-seed
  • angular-sprout

Я новичок, но люблю вкладывать деньги в долгосрочной перспективе. Стоит ли мне беспокоиться об использовании чего-то еще, кроме angular-seed? Мне кажется, что еще рано задавать себе этот вопрос, но если уже есть два других проекта, может быть, на то есть веские причины.


1
Я думаю, что разговор о «лучших практиках» был больше об использовании шаблонов в качестве отправной точки в целом, а не о каком-то конкретном шаблоне. Да, angular-sproutимеет некоторые преимущества, но, на мой взгляд, вы можете использовать его angular-seedв учебных целях.
raina77ow

Я отредактировал, чтобы убрать слово templateиз вопроса. Нет, действительно, автор настаивал на использовании angular-seed в качестве начала, чтобы построить приложение на его фрейме (вот почему я использовал слово шаблон, а не в смысле шаблона html). Спасибо что подметил это.
Стефан Роллан

angular-seedдолжно работать нормально. Это действительно вопрос личных предпочтений в том, как вы хотите структурировать свой проект. Если бы я собирался предложить инструмент для использования, это был бы йомен . Он отлично подходит для строительных лесов и многого другого ...
Джонатан Палумбо

1
Ссылка на ваше обучающее видео может быть неработающей.
JJ Zabkar 01

1
@JJZabkar поправил, жаль, что я видел ваш комментарий только сегодня вечером.
Стефан Роллан

Ответы:


60

Я обнаружил, что, хотя многие люди используют различные семенные проекты, самой простой и последовательной отправной точкой для приложения angular (или любого веб-приложения на javascript) является Yeoman .

Это приложение представляет собой инструмент для создания лесов, который позволяет вам указывать генераторы, которые будут создавать ядро ​​вашего приложения, в комплекте с любыми библиотеками, которые вы хотите (через bower ) и рабочим файлом сборки grunt (большинство генераторов поставляются с задачей сборки, сервер задание для живого редактирования и задание на тестирование)

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

пример:

mkdir my-app
cd my-app
npm install generator-angular
npm install generator-karma
yo angular

8
Я считаю, что строка 3 выше должна быть npm install generator-angular.
Райан Уоллс

И строка 4: npm install generator-karma
Мэттл,

npm ERR! 404 'angular-generator' отсутствует в реестре npm.
mortsahl 02

grunt serveчтобы увидеть это в браузере
jacktrades

1
Мне также пришлось установить yo "npm install --global yo"
moke

26

Все они имеют разные достоинства, поэтому все зависит от того, что вы собираетесь делать. Я написал angular-enterprise-seed и могу рассказать об его относительных достоинствах.

  1. Это сервер-агностик. Это важно, поскольку основной принцип AngularJS и одна из многих вещей, которые делают его привлекательным, - это то, что он следует парадигме Client MVC. Это означает, что он полностью отделен от любых серверных технологий. Многие существующие семена привязывают AngularJS к серверным технологиям, таким как angular-sprout (NodeJS) или grilled -feta (Google App Engine / Java). В случае вышеупомянутых проектов, если среды NodeJS и / или Java еще не установлены в вашей системе, вам придется пройти несколько этапов, чтобы увидеть, как появляется семя. Это может оттолкнуть разработчиков PHP и Python, что приведет к ограничению сообщества проекта.

  2. Запускается за секунды. Поскольку он не зависит от сервера, его можно запускать в любом контейнере (если на то пошло, проверьте файловую систему). Предлагаемый метод - это запуск «python -m SimpleHTTPServer» из корневого каталога - он встроен в Mac и Linux, поэтому дополнительных шагов нет.

  3. Предварительный просмотр в реальном времени. Проверить статус проекта дешево, потому что живая версия всегда размещается на github . Поскольку он не зависит от сервера, это автоматически выполняется путем копирования master в ветку gh-pages из задания cron.

  4. Богатый стиль. Он включает Twitter Bootstrap и настраиваемый / сборный LESS из коробки, а также Angular-UI, Angular-NG, шрифты и множество других инструментов, обеспечивающих широкие возможности стилизации и отзывчивости.

  5. Виджеты. Подобно Angular-Seed и Angular-Sprout, Angular-Enterprise-Seed является примером «наилучшей практики» компоновки, маршрутизации и т. Д. Но он также предоставляет множество готовых компонентов, которые можно снять с полки и сразу же использовать повторно. Это немного сложно сделать, так как может потребоваться конвергенция нескольких технологий. Например, чтобы создать пример сетки, я объединил стили angular-ui, angular-ng, angular-js и jquery. Есть примеры компонентов для модальных окон, разбивки на страницы, предупреждений, сеток и т. Д.

Angular-seed отлично подходит в качестве академического упражнения, если вы хотите узнать, как работают части, но он заставит вас задуматься о более существенной отправной точке.

Я не использовал angular-sprout, поэтому не могу говорить о его достоинствах. Может быть, есть место для объединения angular-sprout и angular-enterprise-seed?


2
Если вам действительно нужна связь с сервером, посетите github.com/robertjchristian/service-nucleus , который объединяет angular-enterprise-seed с netflix-karyon и добавляет дополнительные функции. Готовы к развертыванию и войне. (На основе Java и включает REST через Джерси).
Роберт Кристиан

1
это выглядит действительно хорошо в качестве основы. Думали ли вы об интеграции bower, чтобы упростить добавление таких вещей, как angular-ui-map и т. Д.?
Baldy

1
@Baldy - Да, я бы хотел добавить Бауэра в проект. Вы работаете волонтером? :)
Роберт Кристиан

к сожалению, нет, я перешел на кое-что другое :)
Baldy

1
Вы убедили меня, что «всегда свежая версия размещена на github» ... а затем предоставленная ссылка: robertjchristian.github.io/angular-enterprise-seed/# возвращает пустую страницу.
cerd

18

Я понимаю, что это более старый вопрос, но, похоже, у него довольно много просмотров, поэтому имеет смысл рекомендовать то, что недавно стало очень популярной альтернативой как Yeoman, так и angular-seed: ng-template . ng-cabinplate отличается от angular-seed тем, что он разработан с нуля для больших производственных веб-приложений, и поэтому, на мой взгляд, это лучшее решение, чем angular-seed.

Чтобы объяснить разницу между методами кикстарта приложений Yeoman и ng-template, я процитирую создателя ngbp Джоша Д. Миллера :

Йомен потрясающий. Но проблема с генераторами для AngularJS в том, что они упаковываются по слоям, а не по функциям. Если мы храним все контроллеры в папке «контроллеры», а все службы в папке «services» и т. Д., А все наши тесты полностью где-то в другом месте, может быть довольно сложно повторно использовать наши компоненты.

Это также довольно хорошее обсуждение Джоша на форуме Yeoman по вопросам angular-generator, в котором более подробно рассматривается настройка ng-template vs. yeoman.


10

Чтобы было ясно, Йомен не генератор. Йоман - это формат / система для создания генераторов. Есть несколько генераторов, созданных с помощью Yeoman, которые вы можете использовать для создания приложения AngularJS. Люди часто ошибочно называют того или иного из них «генератором йоменов». Но их много. Еще не запутались? Йомен - не единственная система для производства генераторов. Бранч - еще один.

Чтобы ответить на ваш вопрос, вот очень подробное параллельное сравнение многих генераторов AngularJS, которые можно использовать, чтобы начать создавать веб-приложение с AngularJS. В настоящее время он содержит более 200 различных аспектов этих вещей. Один из них - стиль организации файлов. Таким образом, вы можете легко увидеть, какие из них упорядочивают файлы по функциям, если это важно для вас. Это для меня.

Осталось добавить несколько из них. Двое, упомянутые в этой теме, для меня новички. Но это сравнение должно дать вам хорошее представление о вариантах и ​​их сравнении. Его тоже можно редактировать, поэтому, если кто-либо из вас является экспертом в любой из этих вещей, не стесняйтесь делиться тем, что вы знаете.

Одному Богу известно, почему люди продолжают делать все больше и больше этих вещей, вместо того, чтобы просто помогать улучшать уже существующие. Если у вас есть какие-то догадки, я хотел бы, чтобы эта тайна была раскрыта.

РЕДАКТИРОВАТЬ: чтобы получить доступ к документу, я прошу вас либо заполнить анкету, чтобы поделиться своими знаниями о чем-либо, либо убедить экспертов сделать это.

Зайдите сюда, чтобы заполнить анкету: http://www.dancancro.com/technology-questionnaires/


9

Мне тоже нравится использовать Йомена. Попробуйте это, чтобы получить хорошие строительные леса:

npm install -g generator-angular  # install generator
yo angular                        # scaffold out a AngularJS project
bower install angular-ui          # install a dependency for your project from Bower
grunt test                        # test your app
grunt server                      # preview your app
grunt                             # build the application for deployment

Просто обратите внимание, что этот генератор сейчас довольно старый, поэтому не уверен, что я бы рекомендовал его больше.
dmackerman

Да, но найдите другой на yeoman.io/generators . Поиск angular / angular2
HankCa
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.