diff --git a/chapters/_how_to_read_this_book.md b/chapters/_how_to_read_this_book.md new file mode 100644 index 0000000..16076fc --- /dev/null +++ b/chapters/_how_to_read_this_book.md @@ -0,0 +1,128 @@ +# Как читать эту книгу + +Цель этой книги быть единственным наиболее полезным ресурсом по изучению Angular. К тому времени, когда вы закончите читать эту книгу, у вас (и вашей команды) будет все, что вам необходимо для создания надежных и мощных приложений на Angular. + +Angular - насыщенный и полнофункциональный фреймворк, но это также означает что может быть сложно понять все его части. В этой книге мы пройдем через все: установки инструментов, написания компонентов, использования форм, маршрутизации между страницами и вызовами API. + +Но прежде чем мы начнем погружаться, есть несколько рекомендаций, которые я хочу вам дать **для того чтобы вы могли извлечь максимальную пользу из этой книги**. Вкратце, я хочу вам рассказать: + +* Как пользоваться **примерами кода** и +* **как получить помощь** если что-то пойдет не так + +## Начальные примеры кода + +Эта книга предоставляется с библиотекой примеров исполняемых кодов. Код доступен для загрузки оттуда же, где вы загрузили эту книгу. + +Мы используем программу [`npm`] (https://www.npmjs.com/) для запуска **каждого примера** в этой книге. Это означает, что вы можете ввести следующие команды для запуска любого примера: + +```bash +npm install +npm start +``` + +T> Если вы не знакомы с `npm`, мы рассмотрим, как его установить в разделе [Начало работы] (#getting_started) в первой главе. + +После запуска `npm start` вы увидите некоторые данные на экране, которые расскажут вам, какой URL-адрес необходимо открыть для просмотра вашего приложения. + +**Если вы в какойто момент не поняли, как запустить конкретное приложение-образец, проверьте `README.md` в каталоге этого проекта**. Каждый образец проекта содержит `README.md`, который даст вам инструкции, необходимые для запуска каждого приложения. + +### Angular CLI + +Только с парой незначительными исключений каждый проект в этой книге был создан с помощью [Angular CLI] (https://github.com/angular/angular-cli). Если не указано иначе, в каждом проекте вы можете использовать `ng` команды. + +Например, чтобы запустить код, вы можете ввести `ng serve` (в большинстве случаев, это то, что запускается при вводе `npm start`). Большинство проектов компилируются на JavaScript при помощи команды `ng build` (об этом мы поговорим больше в первой главе). Также вы можете запускать end-to-end тесты с помощью `ng e2e`, и.т.д. + +Не вдаваясь в детали, Angular CLI основан на Webpack инструменте, который помогает обрабатывать и связывать различные файлы TypeScript, JavaScript, CSS, HTML и изображения. **Angular CLI не является обязательным** для использования Angular. Это просто обертка вокруг Webpack (и некоторых других инструментов), что позволяет легко и быстро начать работу. + +## Блоки кода и контекст + +Почти каждый блок кода в этой книге берется из **исполняемого примера кода**, который вы можете найти в образце кода. Например, вот блок кода, извлеченный из первой главы: + +{lang=javascript,crop-query=.AppComponent} +<<[code/first-app/angular-hello-world/src/app/app.component.ts](code/first-app/angular-hello-world/src/app/app.component.ts) + +Обратите внимание, что заголовок этого блока кода указывает путь к файлу, который содержит этот код: `code/first-app/angular-hello-world/src/app/app.component.ts`. + +Если вам в какойто момент покажется, что вам не хватает контекста для что бы понять примера кода, откройте файл с полным экземпляром кода, используя ваш любимый текстовый редактор. **При написаниии этой книги мы ожидали, что вы будете рассматривать примеры кода вместе с рукописью**. + +Например, часто необходимо `импортировать` библиотеки, чтобы запустить наш код. В ранних главах книги мы объясняем эти выражения `import`, потому что неясно, откуда приходят библиотеки. Тем не менее, поздние главы книги более продвинутые, и сосредоточены на _основных понятиях_ вместо того, чтобы повторять шаблонный код, который был рассмотрен ранее в книге. **Если в какой-то момент вы не поняли контекст, откройте пример кода на диске.** + +### Нумерация блоков кода + +В этой книге мы иногда собираем пример кода состоящий из нескольких частей. Если вы видите загружаемый файл с числовым суффиксом, это обычно означает, что мы строим нечто более крупное. + +Например, в главе «Включение зависимостей» вы можете увидеть блок кода с именем файла: `price.service.1.ts`. Когда вы видите синтаксис `.N.ts`, это означает, что мы создаем результирующий файл, который **не будет** иметь число. Итак, в этом случае окончательной версией будет: `price.service.ts`. Мы делаем это так, для того чтобы: а) мы могли тестировать промежуточный код, и б) вы можете увидеть весь файл в контексте на определенном этапе. + +## О происхождении некотрых слов + +Как вы, возможно, знаете, Angular, описанный в этой книге, является потомком более раннего фреймворка под названием "AngularJS". Иногда это может сбивать с толку, особенно при чтении дополнительных блогов или документации. + +В официальных рекомендациях по брендингу указано, что "_AngularJS_" - это термин, зарезервированный для AngularJS 1.x, то есть ранней версии "Angular". + +Поскольку новая версия Angular использует TypeScript (вместо JavaScript) в качестве основного языка, фрагмент "JS" был удален, в результате чего остался просто _Angular_. Долгое время единственным последовательным путем для различия этих двух было то, что люди ссылались на _new_ Angular как _Angular 2_. + +Тем не менее, команда Angular в 2017 году переключилась на _семантическое управление версиями_ с новым мажерным релизом, планируемый на каждые 6 месяцев. Вместо того, чтобы называть следующие версии _Angular 4_, _Angular 5_ и.т.д., Номер также отбрасывается, в итоге получаем просто _Angular_. + +В этой книге, когда мы решим ссылаться к _Angular_, мы скажем просто _Angular_ или иногда _Angular 4_, чтобы избежать путаницы. Когда мы решим поговорить о "старом JavaScript Angular стиле", мы будем использовать термин _AngularJS_ или _AngularJS 1.x_. + +## Получение помощи + +Хотя мы приложили все усилия, чтобы быть понятными, точными и корректными, возможно что при написании кода у вас возникнет проблема. + +Как правило, существуют три типа проблем: + +* "Ошибка" в книге (например, когда мы описали чтото неверно) +* "Ошибка" в нашем коде +* "Ошибка" в вашем коде + +Если вы обнаружили неточность в описании, или вы чувствуете, что концепция не понятна, [напишите нам] (# emailing_us)! Мы хотим, чтобы книга была точной и понятной. + +Аналогично, если вы нашли ошибку в нашем _коде_, мы определенно [хотим услышать об этом] (#emailing_us). + +Если у вас возникли проблемы при работе вашего собственного приложения (и это не наш пример кода), такой вариант нам будет обработать сложнее. + +Первое что вам необходимо сделать для получения помощи, это написать в [неофициальной чат-сообщества] (https://gitter.im/ng-book/ng-book). Мы (авторы) время от времени его просматриваем, но есть сотни других читателей, которые могут помочь вам быстрее, чем мы. + +Если вы все же не смогли получить помощь, мы все еще будем рады помочь вам, и вот несколько советов для получения четкого, своевременного ответа. + +## Написание письма нам {#emailing_us} + +Если вы пишете нам с просьбой о технической помощи, вот что нам необходимо знать: + +* Какую [редакцию книги] (#ревизию) вы имеете в виду? +* В какой операционной системе вы работаете? (например: Mac OS X 10.8, Windows 95) +* В какой главе и в каком проекте вы работаете? +* Что вы пытались выполнить? +* [Что вы пробовали] (http://mattgemmell.com/what-have-you-tried/) уже? +* Какой результат вы ожидали? +* Что на самом деле произошло? (Включая соответствующую запись журнала.) + +**Самый лучший способ получить техническую поддержку** - отправить нам короткий, самодостаточный пример проблемы. Наиболее предпочтительный способ описания проблемы будет отправка нам ссылки на Plunker, используя [этот URL] (https://angular.io/resources/live-examples/quickstart/ts/eplnkr.html). + +Этот URL-адрес содержит запущенное, шаблонное приложение. Если вы можете скопировать и вставить код в этот проект, воспроизвести свою ошибку и отправить ее нам **вы увеличите вероятность быстрого, полезного ответа**. + +Как только вы сделаете вышеописанное, напишите нам по адресу [us@fullstack.io] (mailto: us@fullstack.io). Мы с нетерпением ждем от вас письма. + +### Время отклика технической поддержки + +Мы осуществляем бесплатную техническую поддержку **один раз в неделю**. + +Если вам требуется более быстрое время отклика и помощь в получении **любых** ответов на вопросы вашей команды, то вы можете рассмотреть нашу [опцию премиум поддержки] (mailto:us@fullstack.io?Subject=Angular%20Premium%20Support&Body=Hello%21%20I%27m%20interested%20in%20premium%20Angular%20support%20for%20our%20team). + +## Обзор главы + +Прежде чем мы погрузимся в изучение, я хочу дать вам описание дальнейшей части книги, и то чего вы можете ожидать в ней. + +Первые несколько глав дадут вам **основу** для работы с Angular. Вы создадите свои **первые приложения**, научитесь исспользовать **встроенные компоненты** и начнете **создавать свои компоненты**. + +Затем мы перейдем к промежуточным концепциям, таким как использование **форм**, **API**, **маршрутизацию** на разные страницы, используя _Иньекцию зависимостей_ для организации нашего кода. + +После этого мы перейдем к более **передовым концепциям**. Мы посвятили большую часть книги для описания организации структуры данных. Управление состоянием в клиент-серверных приложениях затруднено, и мы глубоко погрузимся в два популярных подхода: используя **RxJS Observables** и используя **Redux**. В этих главах мы покажем, как создать одно и то же приложение двумя разными способами, чтобы вы могли сравнивать, сопоставлять и оценивать, что лучше для вас и вашей команды. + +После этого мы обсудим, как написать более сложные **усовершенствованные компоненты**, используя самые мощные возможности Angular. Затем мы поговорим о том, как написать **тесты** для нашего приложения и как мы можем **обновить наши приложения Angular 1** до Angular 4+. Под конец мы закроем главу, написав **мобильные приложения** с помощью Angular, исспользуя **NativeScript**. + +Изучая эту книгу **вы узнаете, как создавать настоящие Angular приложения** намного быстрее чем анализируя устаревшую документацию в блогах. + +Так что готовтесь к тому чтобы стать Angular экспертом и получить много интерестного опыта. Начнем погружение в Angular! + +- Nate ([@eigenjoy](https://twitter.com/eigenjoy)) \ No newline at end of file diff --git a/chapters/appendix_1.md b/chapters/appendix_1.md new file mode 100644 index 0000000..9b25284 --- /dev/null +++ b/chapters/appendix_1.md @@ -0,0 +1,32 @@ +### Angular Зависимости + +Для запуска Angular нам необходимы эти четыре библиотеки: + +- `core-js` +- `zone.js` +- `reflect-metadata` + +#### ES6 Полифилы + +ES6 предоставляет полифилы (или _шим_) которые позволяют устаревшим механизмам JavaScript вести себя максимально приближенно к ECMAScript 6. Для новых версий Safari, Chrome, и.т.д. это не требуется. Но это необходимо для старых версий IE. + +T> Что такое _шим_? Возможно вы слышали о _шим_ или _ полифилах_ и знаете что это. +_Шим_ это код который помогает создать стандартизированое поведение в разных версиях браузеров. +T> +T> Например ознакомтесь с этой [ES6 Таблицей совместимостей](https://kangax.github.io/compat-table/es6/). Не все браузеры совместимы со всеми функциями. Исспользуя разные _шим_ мы можем добиться стандартизированного поведения в разных браузерах и средах. +T> +T> Читайте также: [Какова разница между шим и полифилом?](http://www.2ality.com/2011/12/shim-vs-polyfill.html) + +Для более детальной информации о `es6-шим` [посомтрите страницу проекта](https://github.com/paulmillr/es6-shim). + +#### Зоны + +[Zone.js](https://github.com/angular/zone.js/) Это продвинутая тема на которую мы не будем тратить много времени. В общих чертах это библиотека исспользуемая Angular в первую очередь для обнаружения изменений данных. + +Если вы пришли из Angular 1, то вы можете думать о зонах как об автоматической версии `$digest`. Если вы не знакомы с циклом `$digest` в Angular 1, вы можете пока проигнорировать эту тему. +Мы раскроем эту тему когда будем проходить через наши проекты. + +#### Отражение Метаданных + +По скольку Angular сам написан на TypeScript, который предоставляет +[декораторы](#decorators) для добавления метаданных в код, а пакет `reflect-metadata` (являющийся полифилом) позволяет нам исспользовать метаданные вместе с Angular приложениями.