Топ контрибуторов
loading
loading
Знаете ли Вы, что

Лучшие IT работодатели регулярно просматривают рейтинги и профили пользователей в поисках кандидатов. Для корректного отображения ваших данных рекомендуем заполнить ваш профиль и добавить информацию о вас и вашей профессии.

Лента обновлений
ссылка 15:04:55
Комментарий от Artale:
"2 - всё правильно, постфиксный и префиксный инкремент на...
ссылка Oct 16 19:36
Добавлен вопрос в тест HTML - Средний уровень
ссылка Oct 16 11:43
Комментарий от AlexFurm:
Ответы неправильные на данный момент указаны, правильны...
ссылка Oct 15 20:20
Комментарий от dafed000:
Я тоже решила, что 6 mod 11 = 5, но меня смущало, что д...
ссылка Oct 15 19:41
Комментарий от kate2601:
В конструктор класса Boolean можно передавать строку и ...
Статистика

Тестов: 153, вопросов: 8596. Пройдено: 442988 / 2175561.

AngularJS руководство по созданию приложения PhoneCat

head tail Статья
категория
Веб технологии
дата05.12.2014
авторNerd_07
голосов7

AngularJS – это javascript фреймворк, который все больше и больше пользуется популярностью в среде Веб разработчиков. В связи с чем мы решили помочь молодым девелоперам освоить данный фреймвок и начали перевод руководства, по созданию приложения PhoneCat, с помощью AngularJS. Оригинал статьи здесь https://docs.angularjs.org

Приглашаем всех присоединиться к благородному и полезному делу и помочь нам с переводом. Всех участников мы награждаем Q-шками и благодарностью от всего комьюнити!

Перевод первой статьи PhoneCat Tutorial App

Содержание: по мере переводов будем заменять ссылки на переведенные статьи.

Введение
0 - Bootstrapping
1 - Static Template
2 - Angular Templates
3 - Filtering Repeaters
4 - Two-way Data Binding
5 - XHRs & Dependency Injection
6 - Templating Links & Images
7 - Routing & Multiple Views
8 - More Templating
9 - Filters
10 - Event Handlers
11 - REST and Custom Services
12 - Applying Animations
The End

Руководство [по созданию приложения PhoneCat]

Отличный способ познакомиться с фреймворком AngularJS, это ознакомиться с этим руководством, которое научит вас принципам построения веб приложений на AngularJS. Приложение, которые вы будете разрабатывать, это каталог андроид устройств, с возможностью фильтрации списка для отображения только интересующей вас информации, а также просмотра детальной информации о любом устройстве.

demo
application running in the browser

Данное руководство продемонстрирует вам как фреймворк AngularJS делает браузеры умнее, без использования расширений или плагинов:

  • Посмотрите примеры, как используется построение клиентский данных для создания динамических видов информации которое изменяется моментально в ответ на действия пользователя
  • Посмотрите, как AngularJS хранит ваши виды актуальными, с вашими данными, без необходимости манипуляций с DOM
  • Изучите лучшие, более простые пути для тестирования ваших веб приложений с помощью Karma и Protractor
  • Изучите как использовать введение зависимостей и сервисов для создания задач, таких как получение данных в вашем веб приложении, проще

После прочтения руководства, вы сможете:

  • создавать динамические приложения, которые работают во всех современных браузерах
  • использовать построение связей для связывания вашей модели с вашими видами
  • создание и запуск модульных тестов при помощи Karma
  • создание и запуск Е2Е тестов с помощью Protractor
  • выносить логику приложения из шаблонов в контроллеры
  • получать данные с сервера используя сервисы AngularJS
  • вставлять анимацию в ваше предложение используя ngAnimate
  • находить источники для изучения множества нового о AngularJS

Руководство проведет вас по процессам построения простого приложения, включая написание и исполнение модулей для Е2Е тестов. Примеры в конце каждого шага дадут вам возможность узнать больше о AngularJS и приложении, которые Вы разрабатываете.

Вы можете пройти все руководство в течение нескольких часов. А можете приятно провести весь день, копаясь в изучении AngularJS. Если вы ищете более краткое введение в AngularJS, просмотрите документ Getting Started.

Введение

Оставшаяся часть страницы опишет вам как настроить ваш компьютер для начала работы с ним. Если вы хотите прочитать только инструкцию, тогда вам нужно перейти к первому шагу – Bootstrapping.

Работа с кодом

Вы можете следовать руководству и с комфортом писать код на вашем собственном компьютере. Таким образом, вы можете получить реальную практику написания AngularJS кода, а также использовать рекомендованные средства для тестирования.

Руководство предусматривает использование системы управления версий Git. Вам не нужно знать абсолютно все о Git, чтобы следовать пунктам руководства, кроме как установка и выполнение нескольких команд.

Установка Git

Вы можете загрузить и установить Git отсюда http://git-scm.com/download. После установки у вас должен появиться доступ к командной строке Git. Основные команды которые вам нужно будет использовать:

  • git clone ... : клонирование удаленного репозитория на ваш компьютер
  • git checkout ... : откат к особой ветке или тегированному коду

Загрузка angular-phonecat

Склонируйте Angular-phonecat репозиторий с сервиса GitHub используя следующую команду:

git clone --depth=14 https://github.com/angular/angular-phonecat.git

Эта команда создаст директорию angular-phonecat в вашей текущей директории.


Параметр --depth=14 задает команду на выгрузку только последних 14 внесений. Это делает загрузку меньше по объему и быстрее

Смените текущую директорию на angular-phonecat


cd angular-phonecat

С этого момента в руководстве будет подразумеваться, что вы выполняете команды из директории angular-phonecat.

Установка Node.js

Если вы хотите запускать пред настроенный локальный веб-сервер и инструменты тестирования, то вам понадобиться Node.js v0.10.27+.

Вы можете загрузить установщик Node.js для вашей операционной системы из http://nodejs.org/download/.

Для проверки установленной версии выполните следующую команду


node --version

В дистрибутивах, основанных на Debian, существует конфликт команды node с другими утилитами. Для того чтобы исправить это, необходимо так же установить nodejs-legacy пакет, который переименовывает node в nodejs


apt-get install nodejs-legacy npm
nodejs --version
npm --version

Если нам необходимо наличие разных версий на вашем ПК, установите Node Version Manager (nvm).

Если Node.js уже установлен, вы можете скачать инструмент зависимостей, выполнив команду:


npm install

Команда загрузит следующие инструменты в директорию node_modules:

  • Bower - клиентский менеджер пакетов
  • Http-Server - простой локальный веб-сервер
  • Karma - модульный тестировщик
  • Protractor - тестировщик Е2Е

Выполнение npm install также будет автоматически использовать Bower для загрузки Angular фреймворка в директорию app/bower_components

ПРИМЕЧАНИЕ


Проект angular-phonecat настроен для установки и выполнения этих утилит через npm скрипты. Это значит, что у вас не должны быть установлены ни одна из утилит, для того чтобы вы могли следовать инструкции. Более подробно читайте в разделе ниже Установка вспомогательных инструментов

Проект пред настроен с помощью npm вспомогательных скриптов, для более легкого использования команд, которые вам понадобятся во время разработки:

  • npm start : запуск локального сервера для разработки
  • npm test : запуск Karma для модульного тестирования
  • npm run protractor : запуск Protractor для Е2Е тестирования
  • npm run update-webdriver : Установка драйверов, необходимых для работы Protractor

Установка вспомогательных инструментов (опционально)

Модули Bower, Http-Server, Karma и Protractor являются исполняемыми и могут быть установлены глобально, выполняться напрямую через терминал или командную строку. Вам не нужно это делать для следования инструкции, но если вы решили, что хотите запускать модули напрямую, вы можете установить их глобально, используя команды sudo npm install -g ....

Например, чтобы установить Bower используя командную строку, выполните команду:


sudo npm install -g bower
(опустите команду sudo если вы выполняете команду в Windows)

Затем вы можете использовать Bower напрямую, примерно так


bower install

Запуск локального сервера для разработки

Так как Angular приложение выполняется на клиентской стороне, он может выполняться в обычном веб браузере, однако лучше воспользоваться HTTP веб сервером. В частности, по причине безопасности, большинство современных браузеров не разрешают JavaScript производить запрос к серверу, если страница загружена из локального файла.

Проект angular-phonecat настроен с простым веб сервером для хостирования приложения на время разработки. Запустить его можно командой


npm start

Эта команда создаст локальный веб-сервер с прослушиванием 8000 порта. Теперь вы можете просматривать приложение по адресу


http://localhost:8000/app/index.html
Для просмотра веб приложений на разных IP адресах и портах, отредактируйте “start” скрипт в package.json. Вы можете использовать параметры для установки адресов и для установки портов.

Запуск модульных тестов

Мы используем модульные тесты для того чтобы убедиться, правильно ли работает JavaScript в нашем приложении. Модульное тестирование ориентировано на тестировании маленькой части отделенного кода в приложении. Модульные тесты хранятся в директории test/unit

Angular настроен на использование Karma - запуска модульного тестирования. Для запуска теста выполните


npm test

Эта команда запустит Karma . Karma считает конфигурацию с файла test/karma.conf.js. Данная конфигурация говорит Karma:

  • открыть браузер Chrome и соединиться с Karma
  • выполнить все модульные тесты в браузере
  • показать отчет о выполнении тестов в терминале/командной строке
  • просмотреть все JavaScript файлы проекта и перезапустить тесты при любом их изменении

Это хорошая практика, выполнять их все время в фоне, так как это предоставляет моментальную информацию об успешных похождениях тестов пока вы работаете с кодом

Запуск Е2Е

Мы используем Е2Е тесты для того чтобы убедиться, правильно ли работает приложение, как мы и ожидаем. Е2Е тестирование создано для тестирования всего клиентского приложения, в частности, правильного отображения и поведения. Это достигается за счет симуляции взаимодействия как с реальным пользователем, который запустил его в браузере.

Е2Е тесты хранятся в директории test/e2e.

Проект Angular-phonecat настроен на использование Protractor для запуска Е2Е тестирования. Protractor требует установки драйвера для взаимодействия с браузером. Для установки драйвера выполните:


npm run update-webdriver
(Необходимо выполнить эту команду единожды)

Пока Protractor взаимодействует с выполняющимся приложением, мы должны запустить наш веб сервер


npm start

Затем в отдельном окне терминала/командной строки, мы можем запустить скрипт тестирования protractor выполнив команду


npm run protractor

Protractor считает конфигурационный файл test/protractor-conf.js. Эта конфигурация дает команду Protractor

  • открыть браузер Chrome и соединиться с приложением
  • выполнить все Е2Е тесты в браузере
  • показать отчет о выполнении этих тестов в терминале/командной строке
  • закрыть браузер и выйти

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

Если Вам понравилась статья, проголосуйте за нее

Голосов: 7  loading...
admin   EvgNec   Stoik_   sshapovalnarod   xaxa   bagrist   torrettoss