ember.jsНачало работы с ember.js


замечания

В этом разделе представлен обзор того, что такое ember.js, и почему разработчик может захотеть его использовать.

Также следует упомянуть любые крупные темы в ember.js и ссылки на связанные темы. Поскольку Documentation для ember.js является новым, вам может потребоваться создать начальные версии этих связанных тем.

Версии

Современный выпуск

Версия Дата выхода
2.14.0 beta 2017-04-29
2.13.0 2017-04-29

Установка или настройка

Начать с Ember легко. Проекты Ember создаются и управляются с помощью нашего инструмента командной строки Ember CLI. Этот инструмент обеспечивает:

  • Современное управление активами приложений (включая конкатенацию, минимизацию и управление версиями).
  • Генераторы для создания компонентов, маршрутов и т. Д.
  • Обычная схема проекта, позволяющая легко приближать существующие приложения Ember.
  • Поддержка ES2015 / ES6 JavaScript через проект Babel . Это включает поддержку модулей JavaScript , которые используются в этом руководстве.
  • Полная испытательная жгут QUnit .
  • Способность потреблять растущую экосистему Ember Addons .

зависимости

Node.js и npm

Ember CLI построен с использованием JavaScript и ожидает время выполнения Node.js. Для этого также требуются зависимости, полученные с помощью npm . npm упакован с Node.js, поэтому, если на вашем компьютере установлена ​​Node.js, вы готовы к работе.

Для Ember требуется Node.js 0,12 или выше и npm 2.7 или выше. Если вы не уверены, имеете ли вы Node.js или правильную версию, запустите это в командной строке:

node --version
npm --version

Если вы получаете ошибку «команда не найдена» или устаревшая версия для узла:

Если вы получаете устаревшую версию npm, запустите npm install -g npm .

Гит

Ember требует, чтобы Git управлял многими своими зависимостями. Git поставляется с Mac OS X и большинством дистрибутивов Linux. Пользователи Windows могут загрузить и запустить этот установщик Git .

Сторож (необязательно)

На Mac и Linux вы можете улучшить производительность просмотра файлов, установив Watchman .

PhantomJS (необязательно)

Вы можете запускать тесты из командной строки с помощью PhantomJS, без необходимости открытия браузера. Обратитесь к инструкциям загрузки PhantomJS .

Монтаж

Установите Ember с помощью npm:

npm install -g ember-cli

Чтобы убедиться, что ваша установка прошла успешно, выполните:

ember -v

Если номер версии отображается, вы готовы к работе.

Назначить порты localhost (проблемы с разрешениями / доступностью, одновременное использование нескольких сайтов ember)

Иногда полезно назначать один или несколько портов вручную и использовать значения по умолчанию. Это может решить проблемы доступности портов / разрешений или выполнить запуск более одного экземпляра ember за раз.


Чтобы попытка ember-cli идентифицировать и назначить доступный порт, используйте:

ember serve --port 0
 

На помощь ember: «Перейдите 0, чтобы автоматически выбрать доступный порт». (В терминале введите ember help).


Чтобы одновременно запускать более одного сайта ember, каждый из них нуждается в собственном сервере и портах с перезагрузкой. Простой подход: в отдельных терминальных окнах перейдите к каждому экземпляру и используйте для запуска их со своими портами следующее:

ember serve --port 0 --live-reload-port 0
 

Если вы получите сообщение об ошибке доступности или разрешении в любом из этих случаев, введите следующий сценарий python в приглашении терминала, чтобы определить доступный порт:

python -c 'import socket; s=socket.socket(); s.bind(("", 0)); print(s.getsockname()[1]); s.close()'
 

Используйте результаты, чтобы указать доступные вам порты:

ember serve --port <known_port_1> --live-reload-port <known_port_2>
 

Создание приложения

Ember CLI позволяет вам использовать один из двух вариантов для создания нового приложения:

  1. Создайте папку и запустите ember init (генерирует структуру приложения и устанавливает git и делает вашу первую фиксацию)
  2. Запустите ember new <app name> (создает папку с указанным именем, выполняет шаги в нее и запускает ember init )

По завершении процесса генерации загрузите сервер перегрузки в папку приложения, выполнив:

ember server
 

или ember s для краткости. * Ta-da, теперь у вас работает приложение Ember! Официальные документы

Создание первого шаблона

Давайте создадим новый шаблон с помощью команды ember generate .

ember generate template application
 

Шаблон application всегда отображается на экране, когда пользователь посещает ваше приложение. В своем редакторе выбора откройте app/templates/application.hbs и добавьте следующий код:

<h2>My first Ember application</h2>

{{outlet}}
 

Теперь вы должны увидеть вновь добавленный текст на странице приветствия вашего приложения. Также обратите внимание, что Ember автоматически обнаруживает новый файл и перезагружает страницу для вас. Неплохо, да?

Развернуть приложение

Чтобы развернуть приложение Ember, просто перенесите вывод из сборки ember на веб-сервер. Это можно сделать со стандартными инструментами передачи файлов Unix, такими как rsync или scp . Существуют также службы, которые позволят вам легко развертывать.

ember build
scp -r dist/* myserver.com:/var/www/public/
 

обычно мы использовали бы ember build --environment=production который делает больше, чтобы сделать ваш код готовым к выпуску (gzip и minify code).

Как работать с плагинами JavaScript

Существует четыре способа работы с плагинами JavaScript,

  1. Ember add-on
  2. Импорт плагинов JavaScript по всему миру
  3. Потребляйте названные плагины AMD
  4. Через ember-browserify