Angular 4 что это: основные функции и принципы работы

основные функции и принципы работы

От автора: в этой статье я общими словами расскажу вам про крайне популярный и широко используемый клиентский фреймворк Angular. Это введение в основном предназначено для новичков в разработке, у кого мало опыта работы с JS фреймворками, но кто хочет изучить основные идеи Angular, а также понять разницу с AngularJS. JS фреймворк – умное словечко сегодня: все обсуждают эти фреймворки, множество разработчиков спорят о лучшем решении. Начнем же знакомство с Angular.

Зачем нужен фреймворк?

Если вы не знаете, то JS (или клиентский) фреймворк – это технология, обеспечивающая нам инструментами для создания веб-приложения, но также задающая дизайн приложения и организацию кода.

Большинство фреймворков сейчас слишком самоуверенны. У них есть своя философия того, как должно строиться веб-приложение. Вам придется потратить время, чтобы изучить базовые концепции. Другие решения типа Backbone не указывают разработчикам, как строить проект. Поэтому некоторые даже называют такие технологии просто библиотеками, а не фреймворками.

На самом деле, JS фреймворки появились не так давно. Я помню, когда сайты писали с плохо структурированным JS кодом (в большинстве случаев под управлением jQuery). Однако клиентские UI становились все сложнее, и JS потерял репутацию «игрушечного» языка. Современные сайты сильно полагаются на JS, поэтому необходимость правильной организации (и тестирования!) кода возросла. Поэтому клиентские фреймворки стали популярны, и на данный момент их, как минимум, десяток.

Введение в Angular: что такое Angular

Раньше среди JS фреймворков AngularJS был любимчиком, так как был представлен корпорацией google в 2012. Он был построен по концепции Model-View-Controller. Авторы же фреймворка называли концепцию “Model-View-*” или даже “Model-View-Whatever”.

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

Фреймворк на чистом JS должен был разъединить логику приложения и манипуляции с DOM. Его целью были обновления динамических страниц. Но это было не так навязчиво: под контролем AngularJS могла быть только часть страницы. Этот фреймворк представил много мощных функций, позволяющих разработчикам легко создавать богатые, одностраничные приложения.

В частности, была представлена интересная концепция привязки данных, по которой представление автоматически обновляется при любом изменении модели и наоборот. Поверх этого представили идею директив, которые позволяют создавать собственные HTML теги и оживлять их через JS. Например, можно написать:

AngularJS обработает этот пользовательский тег и превратит в полноценный календарь, как сказано в исходном коде. (конечно, ваша задача будет заключаться в программировании подходящей директивы)

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

AngularJS стал популярен очень быстро и получил большую поддержку. Тем не менее, разработчики решили пойти еще дальше и перешли к созданию новой версии Angular 2 (позже просто Angular без части JS). Фреймворк получил новое имя не просто так: он был полностью переписан и перепроектирован, а многие концепции были пересмотрены.

Первый стабильный релиз Angular 2 опубликован в 2016, после чего AngularJS стал терять популярность в угоду новой версии. Одна из главных функций Angular 2 – возможность разрабатывать под несколько платформ: веб, мобильные устройства и нативный десктоп (AngularJS по умолчанию не имел мобильной поддержки).

Чтобы еще сильнее все усложнить в конце 2016 вышел Angular 4. «А где же версия 3?», спросите вы. У меня был тот же вопрос. Как оказалось, версии 3 вообще не было опубликовано! Но как так? В официальном блоге разработчики объяснили, что с Angular 2 перешли на семантическое управление версиями.

Следуя этому принципу, изменение основной версии (например, 2.х.х становится 3.х.х) означает переломные изменения. Проблема в том, что компонент Angular Router уже был в версии 3. Чтобы исправить это несоответствие, было принято решение пропустить Angular 3. К счастью, переход с Angular 2 на 4 прошел легче, чем с AngularJS на Angular 2, но разработчиков все же смутила вся эта путаница.

В ноябре 2017 вышел Angular 5. Он совместим с предыдущими версиями Angular. Скоро должен выйти Angular 6 и должен привнести еще больше крутых функций и улучшений.

Введение в Angular: преимущества Angular

Так почему же Angular? Потому что он поддерживается на разных платформах (веб, мобильные устройства, нативный десктоп), он мощный, современный, у него отличная экосистема, и он просто крутой. Не убеждены? Позвольте немного углубиться в подробности:

Angular представляет не только инструменты, но и шаблоны дизайна для создания обслуживаемого проекта. При правильном создании Angular приложения у вас не будет путаницы классов и методов, которые сложно править и еще сложнее тестировать. Код удобно структурирован, можно быстро понять, что к чему.

Это JS, но лучше. Angular построен на TypeScript, который, в свою очередь, полагается на ES6. Вам не нужно учить полностью новый язык, и вы получаете функции типа статической типизации, интерфейсов, классов, пространства имен, декораторы и т.д.

Не нужно изобретать велосипед. В Angular уже есть много инструментов для создания приложения. Благодаря директивам, HTML элементы могут вести себя динамически. Вы можете усилить формы с помощью FormControl и представить различные правила валидации. Можно легко посылать асинхронные HTTP запросы различных типов. Можно без труда настроить маршрутизацию. В Angular есть еще много функций!

Компоненты разъединены. Angular старался убрать жесткую связь между различными компонентами приложения. Инъекция проходит подобно NodeJS, что позволяет легко заменять компоненты.

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

Все манипуляции с DOM проходят там, где должны. В Angular представление и логика приложения не связаны, что сильно очищает и упрощает разметку.

Тестирование в центре внимания. Angular тщательно протестирован и поддерживает юнит тесты и сквозное тестирование с помощью инструментов типа Jasmine и Protractor.

Angular подготовлен к мобильным устройствам и десктопу – один фреймворк под множество платформ.

Angular активно обслуживается и имеет большое сообщество и экосистему. По фреймворку можно найти много материалом и полезных сторонних инструментов.

Можно сказать, что Angular не просто фреймворк, а платформа, которая позволяет разработчикам строить приложения для веба, мобильных устройств и десктопа. Более подробно архитектуру можно изучить в этом руководстве.

Введение в Angular: сложности Angular

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

Рекомендуется писать приложения Angular на TypeScript, поэтому его нужно понимать. Можно писать код на современном JS (ES6), но я редко вижу такое.

TypeScript – надстройка JS. Поэтому ее тоже нужно знать.

Чтобы еще сильнее ускорить процесс разработки, нужно понять Angular CLI.

Для установки Angular и других компонентов активно используется npm. Его также нужно знать.

Умение настраивать таск раннеры типа Gulp или Grunt также может пригодиться. С их помощью можно много чего сделать перед развертыванием приложения в продакшене.

Сейчас широко используются минификаторы типа UglifyJS и упаковщики типа Webpack.

Во время разработки приложения очень важно иметь возможность отлаживать код. Нужно уметь работать в инструментах отладки типа Augury.

Очень важно тестировать приложения Angular, которые могут стать очень сложными. Один из самых популярных инструментов тестирования — Jasmine (фреймворк для тестирования) и Protractor (используется для сквозного тестирования).

Как видите, нужно много чего изучить, чтобы начать создавать клиентские веб-приложения. Но не опускайте руки: в сети полно ресурсов по изучению всех этих инструментов и техник. Конечно, понадобится какое-то время на изучение, но вы получите ценный опыт и сможете создавать сложные приложения с легкостью.

Стоит отметить, что иногда использовать Angular для приложения будет излишне. Если проект маленький или средний без сложного UI и взаимодействия, возможно, лучше взять старый добрый JS. Поэтому очень важно оценить все требования, функции нового приложения и дедлайны перед принятием решения об использовании JS фреймворка.

Заключение

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

Надеюсь, теперь вы понимаете основную идею Angular, и где он может пригодиться!

Автор: Ilya Bodrov-Krukowski

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть видео

Просто Angular / Хабр

Введение

8-9-го декабря 2016 года была проведена первая конференция по Angular в Бельгии. Игор Минар (ведущий разработчик Angular) выступил в качестве основного докладчика с несколькими интересными объявлениями относительно того, по какому графику будет выпускаться Angular. И представьте себе, в марте 2017 года нас ждет релиз Angular 4. При этом, на данный момент уже опубликована бета-версия.

От переводчиков

Всем привет, с вами Максим Иванов и Дмитрий Сергиенков, и сегодня мы выясним куда делась третья версия, и почему мы по-прежнему можем быть верны Angular. Сейчас начинающему фронтенд-разработчику, изучающему JavaScript, довольно трудно определиться: какой же фреймворк или библиотеку им взять и изучить, оставаясь в тренде? Конечно, без слова React, сейчас не обходится ни один разговор на тему фронтенда, однако, в свое время я начал с первой версии Angular, начитался много руководств по написанию фронтенда на ES6 (с классами и прочим добром) и до сих пор не жалею. Да, вы можете писать корпоративные приложения с использованием только jQuery, но по мере развития и сложности проекта вы начнете закапывать себя в спагетти-коде, смешивая логику и представление, MV*-фреймворки же этого сделать вам не дадут.

Содержание

1. Почему Angular 4? Где Angular 3? Что происходит?
2. Angular2 Webpack Starter
3. Что хорошего появилось в уходящем 2016 году вместе с Angular 2

Почему Angular 4? Где Angular 3? Что происходит?

Спецификация семантического версионирования

Еще в сентябре, когда вышла вторая версия, Angular Team объявила о том, что она будет поддерживать семантическое версионирование (SEMVER).

Как видно из названия, семантическое версионирование — это добавление смысла каждому номеру версии. Семантика номера версии позволяет разработчику определить, что за модернизация была проведена в данной версии продукта, к тому же, мы можем настроить наши инструменты, например, менеджер пакетов NPM, таким образом, чтобы при сборке приложения выбиралась конкретная версия зависимых библиотек, чтобы при этом мы ничего не сломали.

Семантика версии состоит из трех чисел:

Всякий раз, когда Вы исправляете ошибку в коде (баг) и выпускаете продукт заново, Вы увеличиваете последнюю цифру; если же просто была добавлена новая функция в вашем продукте, вы увеличиваете вторую цифру, но когда Вы выпускаете продукт с кардинальными (критическими) изменениями, которые ломают работу вашего старого кода, Вы увеличиваете первую цифру.

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

Что это может означать для Angular Team? Понятно, что для любого бурно развивающегося программного обеспечения наступает момент, когда приходится проводить критические изменения. И поэтому, по объективным соображениям, Angular Team сменила версию 1.x на 2.x, из-за того, что те изменения, которые были выполнены, сломали работу основного кода.

Критические изменения не должны приносить боль

Сообщество Angular точно поймет, о чем идет речь. Пользователям, чтобы перейти на вторую версию, пришлось переписать весь код. Хотя многие и полюбили Angular 1.x, но по объективным причинам были сделаны общие критические изменения, был написан новый API, новые шаблоны. Это было очевидно, и в конечном счете, Angular 2 был полностью переписан (хотя и существует способ менее болезненно мигрировать на новую версию).

Сейчас решено, что переход от версии 2 до версии 4, 5,… не должен быть таким болезненным, как это было с первой версией. Теперь код не будет полностью переписываться, наши изменения будут затрагивать только отдельные библиотеки, поставляемые сейчас с Angular 2, в свою очередь они будут соблюдены согласно SEMVER. Кроме того, постепенно мы будем включать Deprecation фазы (предупреждения консоли разработчика о том, что в следующих версиях данный функционал поддерживаться не будет), чтобы позволить разработчикам своевременно перейти на новый функционал.

Angular Team использует собственный инструмент контроля изменений и обработки автоматических обновлений. Команда упорно работает над ним, и запланировала выпуск совместно с выходом Angular 5 в 2017 году.

Теперь это просто «Angular»

Как вы, возможно, уже догадались, термин «Angular 2» будет устаревшим с выходом 4-ой или 5-ой версии. Тем не менее, теперь следует начать называть его просто «Angular» без версии. Кроме того, вы должны начать избегать библиотек с GitHub/NPM с префиксом ng2- или angular2-. Существует единый ресурс с документацией — angular.io c официальным сообществом на GitHub.

Новые правила версионирования

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

Три простых руководящих принципа:

• Используйте «Angular» по умолчанию (например, «Я angular-разработчик», «Это Angular-Meetup», «Angular сообщество быстро развивается»)
• Используйте «Angular 1», «Angular 2», «Angular 4», когда речь идет о специфичных вещах («Это эта функция X появилась в Angular 4», «Мы обновились с Angular 1 до 2», «Я предлагаю это изменение в Angular 5»)
• Используйте полную версию semver при сообщении об ошибке (например, «Эта проблема присутствует в Angular 2.3.1»)

Вся документация, даже для Angular 1.x, будут приведены в соответствие с этими правилами в ближайшие недели. Но если вы пишите что-то в своем блоге, пишите статьи, курсы, книги или всякий раз, старайтесь ориентироваться на специфическую версию Angular, дописывайте версию в заголовках публикации, якобы в данной статье используется Angular 2.3.1. Это помогает избежать путаницы для ваших читателей, особенно, когда вы пишете о конкретных API.

Почему мы решили все же пропустить третью версию

Библиотеки ядра Angular находятся в одном репозитории на GitHub. Все они имеют свою версию и распространяются как различные пакеты NPM:

Из-за несовпадения в версиях маршрутизатор пакетов стал сразу искать Angular 4. Поэтому мы решили, что семантическое версионирование должно быть строгим для основных пакетов ядра, которые гораздо легче поддерживать, а версия Angular именоваться, исходя из последней версии зависимостей.

Кроме того, важно понимать, что Angular используется в Google. Большинство приложений Google используют Angular из основной ветки репозитория на GitHub. Всякий раз, когда происходит обновление в ветке master, все сразу же интегрируется в основной внутренний репозиторий Google (в компании используется один монолитный репозиторий), где располагаются такие продукты как Google Maps, Adsense и другие. В результате все проекты, использующие Angular падают, если они имеют критические изменения, поэтому приходится все переписывать, что, в свою очередь, неудобно. Таким образом, лучше всего иметь полностью унифицированную версию, которую было бы легче поддерживать в течение долгого времени, что помогло бы команде быть более продуктивной в выпуске новых функций.

Предварительный график релизов

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

• патч-релизы каждую неделю
• каждые 3 месяца будут появляться незначительные изменения (minor) в функционале
• каждые 6 месяцев новая версия Angular с незначительной миграцией

Следующие 3 месяца будут посвящены доработке Angulr 4.0.0.

После Angular 4.0.0 вас ждет предварительный график дальнейших выпусков:

Вывод: не беспокойтесь

В конце Игор Минар подытожил:

• не беспокойтесь о номерах версий
• мы должны развиваться вместе с Angular, чтобы не допускать такого, как это было с различиями между Angular 1.x и 2.x, мы должны сделать это вместе как сообщество, развивать и улучшать наш любимый продукт
• вы должны осознать почему нам пришлось поступить так с Angular 1.x и переписать все с нуля

Angular2 Webpack Starter

Angular2 Webpack Starter — представляет из себя репозиторий для быстрого старта с Angular и TypeScript, посредством сборщика проектов Webpack.

Что включено в данный репозиторий:

• Лучшие практики по организации файлов и каталогов на Angular 2
• Система сборки Webpack 2 с TypeScript
• Демонстрационный пример на основе Angular 2
• Свежая версия Angular
• Ahead of Time (AoT) для быстрой загрузки вашего приложения
• Tree shaking для автоматического удаления неиспользуемого кода из вашего проекта
• Тестирование с использованием Jasmine и Karma
• Покрытие тестами с Istanbul и Karma
• End-to-end Angular 2 тестирование с Protractor
• Менеджер типов с @types
• Material Design
• Hot Module Replacement
• Поддержка Angular 4 путем изменения package.json и любых других будущих версий

Быстрый старт

Убедитесь, что у вас есть Node.js версии >= 5.0 и NPM >= 3.0

# клонируем наш репозиторий
git clone --depth 1 https://github.com/angularclass/angular2-webpack-starter.git

# выбираем директорию
cd angular2-webpack-starter

# устанавливаем зависимости посредством npm
npm install

# далее по желанию

# запускаем сервер
npm start

# запускаем Hot Module Replacement
npm run server:dev:hmr

Переходим на http://0.0.0.0:3000 или http://localhost:3000 в вашем браузере. Более подробно на официальном репозитории.

Содержательный видеокурс

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

Что хорошего появилось в уходящем 2016 году вместе с Angular 2

Статистика (на сентябрь 2016 года)

• 1.2 миллиона разработчиков использующих Angular 1
• 623 тысячи уже используют Angular 2

Если Angular 1 был монолитным проектом, то теперь Angular 2 следует рассматривать как платформу.

Angular 1 использовал 43 встроенных директивы, теперь в Angular 2 мы используем [ ] и ( ).

Angular 2 быстрее

Изначально Angular 1 весил 56K. При этом ядро самого Angular 2 было — 170K. Angular Team оптимизировали тонны кода и теперь ядро Angular 2 весит 45K.

Отложенная загрузка

Основная задача Angular Team была в том, чтобы добиться автоматической отложенной загрузки. Это гарантирует нашим приложениям только то, что необходимо для текущей страницы. Ленивая загрузка также была включена при маршрутизации в приложениях.

Быстрый рендеринг

По сравнению с первой версией приложения на Angular 2 работают в 2,5 раза быстрее, а перерисовка в 4,2 раза быстрее. Команда Angular считает, что она может сделать рендеринг еще более быстрым.

Официальное руководство по написанию кода

Во времена Angular 1 появилось большое количество руководств по написанию кода. Это привело к большому количеству отличительных стилей, что привело к разночтению в Интернете. Для Angular 2 теперь есть официальное руководство по стилю.

Материальный дизайн для приложений на Angular 2

Angular Material выглядит действительно хорошо. Использовать материальный стиль в вашем приложении достаточно легко, просто встраивайте компоненты.

Прогрессивные web-приложения с Angular Mobile Toolkit

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

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

Шаблонизация на стороне сервера

Большой проблемой приложений на Angular 1 было то, что они собирались только в браузере. Это означает, что ваши приложения были совершенно SEO-неориентированные.

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

Достаточно легко это сделать при помощи NodeJS для сборки шаблонов на стороне сервера.

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

Быстрая разработка приложения через терминал при помощи Angular CLI

Самое приятное — это Angular CLI. Установка приложения занимает много этапов, где много вещей может пойти не так:

• настройка типизации с TypeScript
• настройка импортов компонентов
• запуск приложения
• использование System.js

Angular CLI делает установку простой в одну строку:

ng new scotch-app

Чтобы начать работать с Angular CLI, все, что вам нужно сделать, это:

npm install -g angular-cli
ng new scotch-app
cd scotch-app
ng serve

Больше нам не требуется Gulp, Grunt, Webpack, Browserify.

Большое количество туториалов

Например, это видео вполне объясняет как построить приложение на Angular 2:

Опциональная типизация в вашем web-приложении

Есть много интересных вещей, которые может сделать TypeScript. Есть много причин, почему вы должны использовать TypeScript. Благодаря TypeScript Angular 2 стал лучше развиваться.

Хорошие инструменты для отладки

Любой человек, который использует Batarangle с Angular 1 знает, что его способность видеть переменные и состояние вашего приложения в браузере является большим подспорьем при разработке.

Теперь есть Angular Augury, он позволяет нам сделать именно это. Нет необходимости в console.log () в каждой части вашего приложения, чтобы увидеть состояние переменной, иерархию и наследование в вашем браузере.

Платформа для разработки бизнес-приложений Firebase

Вы можете построить приложение в режиме реального времени с Angular 2, Firebase и AngularFire2 примерно за 10 минут, например чат. Есть много функциональных возможностей, которые реализуются в короткий промежуток времени.

Кроссплатформенные мобильные приложения с NativeScript + Angular 2

В то время как Angular Mobile Toolkit сосредоточено на создании прогрессивных веб-приложений, NativeScript больше заинтересован на создании нативных приложений с Angular 2.

В чем разница, спросите вы? Например в анимации. Имея нативную анимации, отличную от браузерной все будет выглядеть гладко даже при большом количестве объектов.

Простое тестирование благодаря зонам

Zone.js библиотека для управления асинхронными задачи, способ управления контекстом выполнения. Много фантастических слов, но основная идея состоит в том, что тестирование будет намного проще в Angular 2!

Все эти асинхронные задачи отслеживаются благодаря zone.js. В своем видео Джули Ральф рассказывает как это работает:

В заключении

Я очень горжусь тем, что Angular вырос из обычного фреймворка в целую платформу, благодаря которой теперь можно легко разрабатывать не только веб-приложения, но и нативные, не уступая в качестве. Много работы проделала Angular Team, и за это им я благодарен. Конечно, вокруг есть много всего хорошего, но быть частью чего-то большого куда приятней. С наступающим Новым годом дорогие читатели, мы желаем вам всего наилучшего и удачи!

Что такое Angular 4 и откуда я могу узнать больше об этом?

взяв из этот блог, давайте проверим, что нового в Angular 4!

по сравнению с Angular 2 в список добавлено много новых вещей.
Не только новые функции, но и некоторые настройки, которые улучшают старые
особенности.

Быстрее И Меньше

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

Посмотреть Двигатель

Они внесли изменения под капотом в то, что выглядит сгенерированный код AOT
как. Эти изменения уменьшают размер сгенерированного кода для
составляющие около 60% в большинстве случаев. Чем сложнее шаблоны
есть, тем выше экономия. В период бета-версии, многие
разработчики, которые перешли на Angular 4, сократили свои производственные пакеты
от сотни килобайт.

Пакета Анимации

они вытащили анимации из @angular / core и поместили в их
собственный пакет. Это означает, что если вы не используете анимацию, это лишние
код не попадет в ваши производственные пакеты. Это изменение также
позволяет более легко найти документацию и лучше
преимущество автоматическ-завершения. Вы можете добавить анимацию самостоятельно
основной NgModule путем импорта BrowserAnimationsModule от
@angular / платформа-браузер / анимация.

улучшено *ngIf и * ngFor

синтаксис привязки шаблона теперь поддерживает несколько полезных изменений. Вы
теперь можно использовать синтаксис стиля if/else и назначать локальные переменные, такие как
как при развертывании наблюдаемого.

<div *ngIf=”userList | async as users; else loading”>
  <user-profile *ngFor=”let user of users; count as count” [user]=”user”>
  </user-profile>
  <div>{{count}} total users</div>
</div>
<ng-template #loading>Loading…</ng-template>

Угловой Универсальный

универсальный, проект, который позволяет разработчикам запускать Angular на
сервер, теперь обновлен с Angular снова, и это первый
выпуска с универсальной, изначально проект был
принято угловой командой. Этот релиз теперь включает в себя результаты
внутренняя и внешняя работа от Universal team за последние
несколько месяцев. Большая часть универсального кода теперь находится в
@angular/platform-server.

TypeScript 2.1 & 2.2 совместимость

команда обновила Angular до более последняя версия TypeScript.
Это улучшит скорость ngc, и вы получите лучший тип
проверка в приложении.

исходные карты для шаблонов

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

итог

было бы не трудно переключиться угловой 4. Однако, если вы
все еще не очень удобно с Angular 2, тогда это может быть немного
тебе трудно. В таком случае …—58—>ValueCoderэкспертный совет будет
ждать еще несколько месяцев, а затем захватить его, как есть еще 6
месяцы, оставшиеся до появления Angular 5.

привязка свойств и событий, интерполяция строк

От автора: привязка данных – это концепция Angular, с помощью которой разработчики могут менять статичный контент веб-приложения, делая приложение более активным и привлекательным. Прежде чем говорить о том, как эта концепция была реализована в Angular, я поясню ее на примере. В серии уроков основы Angular 4 в качестве примера я буду использовать простой интернет-магазин. Чтобы купить что-то в магазине, сначала необходимо кликнуть на кнопку Shop Now на странице Home. После этого пользователь будет перенаправлен на список элементов, которые мы и будем продавать в нашем магазине.

Для реализации этого функционала сначала необходимо определить действие для кнопки shop now. Далее пользователя необходимо направить на страницу shop и отобразить набор элементов для продажи. Эти элементы, обычно, не статичны. Скорее всего, эти элементы мы будем вытягивать из базы данных и отображать на странице shop динамически. Такого рода динамически события с привлечением внимания пользователя можно выполнять с помощью привязки данных в Angular.

В Angular привязку данных можно разделить на 4 категории – строчная интерполяция, привязка свойств, привязка событий и двусторонняя привязка. Эти четыре типа позволяют общаться бизнес-логике (код Type Script) с представлением (HTML код), как показано на диаграмме ниже.

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

Возьмем предыдущий пример с отображением списка элементов на странице shop. Представьте, что вам необходимо отображать поименно каждый элемент на странице в виде списка.

Для этого сначала необходимо вытянуть элементы из базы данных в коде Type Script. Далее нам каким-то образом необходимо послать эти данные в HTML код, чтобы отобразить их пользователю. Это один из способов взаимодействия кода Type Script с HTML кодом. В Angular есть 2 способа такого взаимодействия.

Интерполяция строк

С помощью этого метода мы можем встроить элементы type script в HTML код. Ниже представлен код из нашего приложения.

export class ItemComponent {
itemName: «Item1»;
…

Это код из нашего компонента элемента. Как видите, у него есть свойство itemName со значением по умолчанию item1. В следующих статьях обсудим способ получения списка элементов из базы данных. Сейчас же давайте предположим, что у нас есть всего один элемент в магазине. В этой переменной нам необходимо хранить имя элемента.

Код выше взять из файла HTML шаблона. Мы просто отображаем имя элемента внутри тега h5. Как видите, мы поместили имя Type Script свойства в «{{}}». Эти скобки называются строковой интерполяцией в Angular внутри HTML кода. Мы можем напрямую стучаться к элементам Type Script кода и отображать значение элементов в представлении, как в нашем примере. Запомните, внутри двойных фигурных скобок мы можем поместить любую строку, которая будет сопоставляться с соответствующим элементом typescript. ex: {{itemName}} , {{‘itemName’}} также валидно.

Внутри этих скобок также можно выполнять функции typescript, в представлении будет отображаться возвращаемое значение. {{getItemName()}} также валидна.

Привязка свойств

Еще один способ коммуникации Type Script кода с HTML кодом. В этот раз мы привязываем свойство Type Script к HTML свойству.

export class ItemComponent {
itemName: «Item1»;
…

Выше представлен код из файла ItemComponent Type Script. Предположим, что у нас всего один элемент в магазине. Нам необходимо отобразить имя элемента в свойстве itemName.

<h5 [innerText]=»itemName» ></h5>

Вместо строковой интерполяции можно написать HTML код. Здесь [innerText] – способ привязки HTML свойства в Angular. Квадратные скобки [] говорят о том, что мы будем использовать привязку свойств. Внутри скобок необходимо указать свойство HTML элемента для использования. В этом примере мы будем использовать свойство innerText тега h5. Существует масса HTML свойств, которые можно использовать для привязки. С помощью innerText можно менять текст тега h5. Если этому свойству присвоить какой-либо текст:

Этот текст будет показан в представлении. В нашем примере ровно это и происходит, но вместо текста мы будем показывать динамический контент из файла Type Script. Привязать можно как переменную, так и функцию Type Script.

[innerText]=”itemName” и [innerText]=”getItemName()” также валидны.

Привязка событий

До сих пор мы рассматривали способы коммуникации Type Script файлов и HTML файлов в одном направлении. Ниже мы посмотрим, как сделать обратную операцию. Мы пошлем данные из HTML файла в Type Script файл. В предыдущем примере мы говорили, что нам необходимо перенаправить пользователя со страницы home на shop по клику на кнопку shop now. Это можно сделать с помощью привязки событий. Необходимо всего лишь прописать логику редиректа в файл Type Script, после чего привязать эту логику к событию onClick кнопки shop now.

export class HomeComponent {
onClickShopNow() {
// Redirecting logic goes here
}
…

Код из HomeComponent. Мы создали новую функцию onClickShopNow, в которую поместим логику редиректа (логику редиректа обсудим в следующих уроках). Сейчас же нам нужно привязать эту функцию к кнопке shop now в файле HTML HomeComponent.

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

<button (click) = «onShopNow()»

Делается это просто, как показано в коде выше. Здесь круглые скобки () указывают Angular, что мы будем использовать привязку событий. Внутри скобок указывается события привязки. В HTML есть встроенные события типа onClick, onLoad и т.д., однако здесь события необходимо писать без префикса on. Назначить событие соответствующей функции Type Script можно следующим образом.

Также есть важный аргумент, который можно передавать в функцию type script — $event. Передавать этот аргумент в функцию можно следующим образом.

(click) = «onShopNow($event)»

Type Script функцию необходимо изменить, чтобы она принимала этот параметр.

export class HomeComponent {
onShopNow(event) {
// Redirecting logic goes here
}
…

В HTML файле $event – зарезервированное ключевое слово. Оно посылает всю информацию о событиях в файл type script, чтобы внутри функции мы могли с ней работать. О переменной event и способах ее использования поговорим позже.

Двусторонняя привязка

До сих пор мы обсудили один способ взаимосвязи между файлом Type Script и HTML файлом, и этого хватало нашему приложению. В магазине типа нашего информацию необходимо обновлять постоянно. Например, должен быть способ обновлять цену элемента.

Для упрощения предположим, что есть требование отображать страницу update item для администраторов приложения, где они могут просматривать старые значения свойств элементов (имена, описания, цены, URL изображений) и обновлять свойства новыми значениями. Интерфейс может быть следующим.

У всех четырех свойств есть редактируемое текстовое поле, и по умолчанию в нем отображается текущее значение. Пользователь может изменить это значение и кликнуть на update для обновления значений в базе данных. Для этого нам необходимо посылать текущие значения этих свойств из нашего файла Type Script в файл HTML и отображать их по умолчанию в текстовых полях. После обновления значений и клика по кнопке update нам необходимо каким-то образом посылать значения из HTML файла в файл Type Script. Выше мы уже говорили, что это можно сделать с помощью строковой интерполяции/привязки свойств или привязки событий. Однако в Angular есть элегантный способ – двусторонняя привязка. Нам лишь нужно задать свойство, которое необходимо привязать в файл Type Script, после чего привязать его из HTML файла.

export class ItemComponent {
itemName: «Item1»;
…

В коде выше показано, что имя элемента мы храним в свойстве itemName. Нам нужно лишь привязать это свойство из HTML файла:

<input type=»text» [(ngModel)] = «itemName»

[()] говорит Angular, что мы будем использовать двустороннюю привязку. Для привязки свойств мы использовали синтаксис [], а для привязки событий (). Здесь же мы объединяем обе функции, и нам необходимо использовать специальную директиву ngModel. Директивы обсудим потом, а сейчас просто запомните, что нам необходимо ее использовать. Далее необходимо указать свойство, которое необходимо привязать в файле Type Script

Если двусторонняя привязка используется в приложении первый раз, не забудьте импортировать FormsModule из модуля приложения.

@NgModule({
declarations: […
],
imports: [
FormsModule
],
…
})
export class AppModule { }

Если мы правильно все настроили для всех наших свойств элемента в приложении, то при переходе на страницу Update Item поля ввода будут отображать текущие значения. Как только пользователь введет что-то в эти поля, значения соответствующих переменных будут обновлены в файле Type Script. С помощью этого метода можно реализовать и другие крутые функции типа валидации в реальном времени для текстовых полей. Когда пользователь будет вводить невалидное значение в текстовое поле (например, «ABCD» для свойства цены), мы будем отображать сообщение об ошибке без запуска дополнительных событий в файле HTML.

Заключение

Думаю, вам было полезно узнать о привязке данных в Angular. Я буду писать статьи и по другим важным функциям Angular 4. Хорошо всем покодить!!!

Автор: Nilupul Liyanage

Источник: https://medium.com/

Редакция: Команда webformyself.

Бесплатный курс «NodeJS. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript с NodeJS

Получить курс

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть

Русскоязычная документация по Angular / Хабр

Русская версия документация Angular теперь доступна для всех на сайте angular24.ru

Это результат 6 месяцев работы, нескольких безуспешных попыток написать все необходимые remark плагины, кастомного парсера и цепочки из двух Magic Strings, позволяющих делать перевод Markdown файлов без потери форматирования.

Стоило ли так мучаться? Да.

Во-первых, удалось сделать расширяемую утилиту для перевода markdown файлов без потери форматирования, что до сих пор не особо успешно решалось. Чтобы убедится в этом, возьмите markdown файл с примерами кода, таблицами и кусками html.

Во-вторых, теперь можно будет перевести документацию Angular на все 103 языка, которые поддерживает Google Translate.

В-третьих, удалось выдернуть код документации Angular в отдельный schematics, который позволит вам добавить документацию Angular в свой проект (с поддержкой поиска, service workers и offline режима).

Я не смогу рассказать обо всем этом в одной статье, поэтому сейчас вы узнаете, чем сможете помочь, и о том, какие статьи вас ожидают в будущем.

Чем вы можете помочь?

Документация пока не совершенна, ибо была переведена с помощью Google Translate, и именно тут вы можете помочь. Как? Есть 2 варианта:

1) Увидев не очень красиво сформулированное или ошибочное предложение, выделите его — появится всплывающее меню из нескольких вариантов:

Нажмите «предложить перевод» и введите в появившемся окне вариант перевода. Для вас автоматически сформируется Github Issue — единственное, что вам нужно будет сделать это залогинится на Github и нажать Submit New Issue.

Если захотите посмотреть оригинал данной страницы, то при выделении выберите пункт «Открыть оригинал» и страница автоматически откроется в оригинальном английском варианте. Того же эффекта вы сможете добиться, если поменяете «24.ru» на «.io» в браузерной строке. Также простой заменой в адресной строке «.io» на «24.ru» вы можете перейти с англоязычной версии документации на русскоязычную.

2) Если чувствуете себя достаточно уверенно с Markdown и Github, можете:

• перейти напрямую в репозиторий angular-ru-docs
• переключиться на бранч angular-v9-final
• взять любой .md файл из директории aio/content, поправить его и сделать pull request в бранч angular-v9-final

Еще больше статей по теме

Теперь коротко о том какие статьи ждут вас в ближайшем будущем:

1️⃣ Что такое MagicString и настолько ли эти строки волшебные? (done)

2️⃣ Double Magic String — микропарсер и утилита по переводу markdown.

3️⃣ Особенности Google Translate, нюансы и хаки. Как переводить бесплатно в браузере?

4️⃣ Добавь в свой проект документацию Angular, делай как core команда Angular 🙂

Надеюсь, этот список вас заинтриговал 🙂

Подписывайтесь на мой Telegram канал @obenjiro_notes и Twitter obenjiro, чтобы не пропустить следующие статьи по теме и много всего другого интересного.

Что нужно знать для эффективной разработки на фреймворке Angular

Считается, что во фронтенд-разработке эквивалентом «Hello world» является приложение — список задач. Да, это позволяет охватить CRUD-аспект создания приложения, однако возможности используемых фреймворка или библиотеки при этом часто затрагиваются весьма поверхностно.

Angular постоянно изменяется и обновляется, но кое-что остается неизменным. Я расскажу об основных концепциях Angular, которые необходимо изучить, если вы хотите использовать этот JavaScript-фреймворк наилучшим образом.

Для работы с Angular нужно многому научиться, и при этом новички часто застревают на начальном уровне лишь потому, что не знают, где и что искать. Поэтому я написала руководство (в которое входит и краткое изложение основ Angular), которое мне самой очень пригодилось бы, когда я только начинала работать с Angular 2+.

Переведено в Alconost

1. Модульная архитектура Angular

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

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

Упорядочить модули в приложении можно самыми разными способами. Изучая различные архитектурные структуры, можно определиться с тем, как приложение будет масштабироваться по мере развития, а также научиться изолировать код и снижать взаимозависимость.

Что гуглить:

• архитектурные шаблоны Angular,
• масштабируемая архитектура приложений Angular.

2. Односторонний поток данных и неизменяемость

Двусторонняя привязка покорила сердца многих фронтенд-разработчиков еще во времена Angular 1 — по сути, это была одна из главных отличительных особенностей этого фреймворка. Однако по мере развития приложения такой подход начинал создавать проблемы с точки зрения производительности.

Оказалось, что двусторонняя привязка нужна не везде

Angular 2+ все еще дает возможность ее осуществить, но для этого ее необходимо явно затребовать — поэтому разработчику приходится думать о потоках данных и их направлении. Кроме того, это позволяет приложению более гибко обращаться с данными, поскольку можно указать, как следует их передавать.

Что гуглить:

• работа с потоками данных в Angular,
• однонаправленный поток в Angular,
• преимущества односторонней привязки.

3. Атрибутивные и структурные директивы

Директива — это расширение HTML с помощью дополнительных элементов. Атрибутивные директивы позволяют изменять свойства элемента. Структурные директивы изменяют макет, добавляя или удаляя элементы DOM.

Например, ngSwitch и ngIf — структурные директивы: они оценивают параметры и определяют, должны ли существовать конкретные части DOM.

Атрибутивные директивы представляют собой настраиваемое поведение, прикрепленное к элементу, компоненту или другим директивам.

Научившись использовать директивы этих двух видов, можно расширить возможности собственного приложения и снизить дублирование кода в проекте. Атрибутивные директивы также помогают централизовать определенное поведение, используемое в различных частях приложения.

Что гуглить:

• атрибутивные директивы Angular,
• структурные директивы Angular,
• шаблоны структурных директив Angular.

4. Обработчики жизненного цикла компонента

У каждого приложения есть жизненный цикл, который определяет, как объекты создаются, обрабатываются, а затем удаляются. Во фреймворке Angular жизненный цикл компонента выглядит примерно так:

создание → отрисовка → отрисовка дочерних элементов → проверка изменения свойств при связывании данных → уничтожение → удаление из DOM

У нас есть возможность обрабатывать ключевые моменты этого цикла и нацеливаться на определенные моменты времени или события. Это позволяет создавать соответствующие отклики и настраивать поведение в соответствии с различными этапами существования компонента.

Например, если требуется загрузить некоторые данные до отрисовки страницы, это можно сделать через ngOnInit(). А если нужно отключиться от базы данных, это можно сделать в момент ngOnDestroy().

Что гуглить:

• обработчики жизненного цикла компонента в Angular;
• жизненный цикл компонента.

5. Наблюдаемые сервисы и HTTP

Наблюдаемые сервисы — не уникальная возможность Angular, а скорее что-то из ES7. Тем не менее, эта функциональность была реализована в рамках фреймворка, а соответствующие идеи хорошо переносятся также на React, Vue и другие связанные с JavaScript библиотеки и фреймворки.

Что гуглить:

• шаблоны наблюдателя в JavaScript,
• наблюдаемые объекты и HTTP в Angular,
• наблюдаемые объекты в ES7.

6. Архитектура «умных» и «глупых» компонентов

Часто при написании приложений на Angular всё сваливают в один компонент, однако это не самый лучший подход. Концепция «умных» и «глупых» компонентов в Angular определенно заслуживает большего внимания, особенно в среде новичков.

Роль компонента в общем плане приложения определяется тем, «глупый» он или «умный». «Глупые» компоненты обычно не отслеживают состояние, а их поведение легко предсказать и понять — по возможности именно такими нужно делать компоненты.

«Умные» компоненты сложнее в понимании, поскольку в них задействованы входы и выходы. Для эффективного использования возможностей Angular следует разобраться с архитектурой «умных» и «глупых» компонентов: так вы овладеете шаблонами и образом мыслей, которые помогут писать более продуктивный код и выстроить правильное взаимодействие внутри приложения.

Что гуглить:

• умные и глупые компоненты Angular,
• глупые компоненты без состояния,
• презентационные компоненты,
• умные компоненты Angular.

7. Стандартные структуры приложений

Умение работать с командной строкой при определении структуры приложения полезно, однако это не панацея. Создание приложения на Angular (и вообще любого приложения) похоже на строительство дома: существуют устоявшиеся процессы, за много лет оптимизированные сообществом, которые позволяют писать более эффективные и продуктивные приложения.

И Angular здесь — не исключение.

Большинство жалоб на Angular можно услышать от тех, кто пытается его изучить, не имея понимания структуры. Понятный и лаконичный синтаксис схватывается на лету, однако для понимания структуры приложения необходимо знать контекст, требования и как всё это сочетается на концептуальном и практическом уровнях. Изучив различные возможные структуры приложений на Angular и рекомендации по их применению, вы получите представление о том, как написать собственное.

Что гуглить:

• приложения Angular с одним репозиторием,
• библиотеки Angular, пакеты Angular,
• бандлы Angular,
• микроприложения Angular.
• монорепозитории.

8. Синтаксис для привязки к шаблону

Изюминка рассматриваемого JavaScript-фреймворка — привязка, она же и стала одной из причин его создания. Привязка к шаблону объединяет статический HTML и JavaScript, и синтаксис Angular для привязки к шаблону действует как посредник между этими двумя технологиями.

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

Что гуглить:

• привязка к свойствам в Angular,
• привязка к событиям в Angular,
• двусторонняя привязка в Angular, интерполяция в Angular,
• передача констант в Angular.

9. Маршрутизация и функциональные модули

В случае Angular функциональные модули обычно недооцениваются, хотя на самом деле это отличный способ упорядочить и ограничить набор бизнес-требований. Они позволяют разграничить ответственность и помогают предотвратить загрязнение кода в долгосрочной перспективе.

Функциональные модули бывают пяти типов (домен, маршрутизируемый, маршрутизация, сервис и виджет), и у каждого — свой набор возможностей. Научившись использовать функциональные модули в сочетании с маршрутизацией, вы сможете создавать отдельные наборы функций и обеспечивать понятное и удобное разделение возможностей приложения.

Что гуглить:

• функциональные модули Angular,
• общие функциональные структуры в Angular,
• провайдеры функциональных модулей.
• отложенная загрузка с маршрутизацией и функциональные модули.

10. Формы и проверка данных (реактивные формы и валидаторы)

Формы — неотъемлемая часть фронтенд-разработки.

А где формы, там и проверка данных.

На фреймворке Angular создавать умные, хорошо работающие с данными формы можно различными способами, и самый распространенный подход — реактивные формы. Однако есть и другие варианты, а именно шаблонные и пользовательские валидаторы.

Изучив принципы работы валидаторов и CSS, можно ускорить рабочий процесс и подготовить приложение к обработке ошибок.

Что гуглить:

• проверка форм в Angular,
• проверка данных на основе шаблонов,
• проверка реактивных форм,
• синхронные и асинхронные валидаторы в Angular,
• встроенные валидаторы,
• пользовательские валидаторы в Angular,
• перекрестная проверка полей.

11. Проецирование контента

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

Часто проецирование контента понимается поверхностно: мы как будто вкладываем дочерние представления в родительское представление. Однако для более глубокого понимания фреймворка необходимо разобраться, как между различными представлениями передаются данные — здесь и пригодится знание концепции проецирования контента.

Изучив проецирование контента, вы научитесь разбираться в потоке данных приложения и определять, где он претерпевает изменения.

Что гуглить:

• проецирование контента в Angular,
• связь родительского и дочернего представлений в Angular,
• отношения между данными в представлениях Angular.

12. Стратегия обнаружения изменений «onPush»

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

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

Стратегия обнаружения изменений onPush значительно ускоряет работу приложения, поскольку она не полагается на постоянную поверку, а зависит от срабатывания конкретных триггеров.

Что гуглить:

• обнаружение изменений onPush в Angular.

13. Защитники маршрутов, предварительная и отложенная загрузка

Если в приложении есть вход в учетную запись, понадобятся защитники маршрута. Суть в том, чтобы защитить определенные представления от несанкционированного просмотра, что во многих случаях является обязательным требованием. Защитники маршрута действуют как интерфейс между маршрутизатором и запрошенным маршрутом: они определяют, разрешать доступ к определенному маршруту или нет. Это довольно обширная тема: например, сюда входят вопрос принятия решений о маршрутизации на основании срока действия токенов, аутентификация ролей пользователей и защита маршрутов.

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

Что гуглить:

• защитники маршрутов в Angular,
• шаблоны аутентификации в Angular,
• модули предварительной и отложенной загрузки в Angular,
• шаблоны защищенных маршрутов в Angular.

14. Нестандартные каналы

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

И вот здесь пригодятся нестандартные каналы, которые позволяют с легкостью создавать собственные фильтры и преобразовывать форматы данных требуемым образом. Это довольно легко — попробуйте.

Что гуглить:

• нестандартные каналы в Angular.

15. Декораторы @ViewChild и @ContentChild

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

Для этого и нужны декораторы ViewChild и ContentChild, научившись использовать которые вы сможете получать доступ к связанным между собой компонентам, а это упрощает задачу обмена данными, а также делает возможной передачу данных и событий, вызванных связанными компонентами.

Что гуглить:

• декораторы Angular,
• ViewChild и ContentChild в Angular,
• обмен данными между компонентами в Angular.

16. Динамические компоненты и «ng-template»

Во фреймворке Angular приложения строятся на основе компонентов. Однако не все компоненты статичны — некоторые необходимо создавать на лету, а не предварительно компилировать.

Создаваемые приложением на лету компоненты называются динамическими. Статические компоненты предполагают определенную неизменность: мы ожидаем определенные значения на входе и выходе и соответствующее предсказуемое поведение.

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

Что гуглить:

• динамические компоненты в Angular,
• динамические компоненты и «ng-template».

17. Host, HostBinding и «exportAs»

@Host, @HostBinding — декораторы, а exportAs — свойство декоратора @Directive. Их назначение — расширять действие параметров, к которым они прикреплены. Также они дают возможность создавать небольшие шаблоны экспорта для использования внутри приложения.

Если вышеперечисленное звучит непонятно, следует изучить директивы Angular и понять их назначение. @Host, @HostBinding и exportAs — важные элементы концепции директив.

Что гуглить:

• шаблоны использования директив в Angular,
• @Host, @HostBinding и exportAs в Angular.

18. Управление состоянием с помощью NgRx

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

Разобравшись в том, для чего в Angular нужны состояния, вы поймете, как и почему данные ведут себя именно так, а не иначе.

У фреймворка Angular есть собственная система управления состояниями, но NgRx справляется с централизацией состояний и связанных с ними данных намного лучше. В цепочке отношений родительских и дочерних элементов данные могут затеряться, а NgRx создает для них централизованное хранилище и таким образом устраняет эту проблему.

Что гуглить:

• Angular NgRx,
• принципы Flux и Redux,
• принципы управления состоянием в Angular.

19. Зоны и внедрение зависимостей

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

Как и внедрение зависимостей, «зоны» были и до Angular. Они позволяют приложению обнаруживать асинхронные задачи. Это важно, поскольку асинхронные задачи способны изменять внутренние состояния приложения — а следовательно, и представление. Зоны же упрощают обнаружение изменений.

Что гуглить:

• зоны в Angular,
• внедрение зависимостей,
• Angular DI.

Заключение

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

О переводчике

Перевод статьи выполнен в Alconost.

Alconost занимается локализацией игр, приложений и сайтов на 70 языков. Переводчики-носители языка, лингвистическое тестирование, облачная платформа с API, непрерывная локализация, менеджеры проектов 24/7, любые форматы строковых ресурсов.

Мы также делаем рекламные и обучающие видеоролики — для сайтов, продающие, имиджевые, рекламные, обучающие, тизеры, эксплейнеры, трейлеры для Google Play и App Store.

→ Подробнее

Angular | Построение проекта

Построение проекта

Последнее обновление: 15.02.2020

В прошлой теме был создан первый простейший проект.

Мы можем его запустить, поработать с ним, изменять его код, но как теперь получить те файлы, которые собственно представляют приложение и которые мы можем разместить на каком либо сервере?
Для этого нам надо выполнить построение проекта.

В прошлой теме мы определили следующий файл angular.json:

{
  "version": 1,
  "projects": {
    "helloapp": {
      "projectType": "application",
      "root": "",
      "sourceRoot": "src",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/helloapp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.json",
            "aot": true
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "helloapp:build"
          }
        }
      }
    }},
  "defaultProject": "helloapp"
}

Секция build описывает конфигурацию команды построения «ng build». В частности, параметр "outputPath"
задает каталог для компилируемых файлов приложения.

То есть мы можем ввести в командную строку команду «ng build» для компиляции проекта

C:\angular\helloapp>ng build

После выполнения этой команды в каталоге проекта появится папка dist/helloapp, где мы сможем увидеть все файлы приложения. Мы можем расположить эти файлы на любой веб-сервер и так же обращаться к главной странице приложения.

Здесь мы видим, что у нас получается много файлов, в том числе файлы с расширением .js.map, которые нам в принципе могут быть не нужны.
А основные файлы имеют довольно большой размер. Тем не менее мы можем все это оптимизировать. Так, изменим файл angular.json следующим образом:

{
  "version": 1,
  "projects": {
    "helloapp": {
      "projectType": "application",
      "root": "",
      "sourceRoot": "src",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/helloapp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.json",
            "aot": true
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "helloapp:build"
          }
        }
      }
    }},
  "defaultProject": "helloapp"
}

Теперь мы добавили для команды build подсекцию «configurations», которая задает дополнительные конфигурации проекта. И здесь указана однак конфигурация —
«production» — то есть набор настроек, которые применяются к построению приложения, когда оно уже готово к развертыванию и полноценному использованию. И здесь определяется следующий набор настроек:

• optimization: указывает, будет ли использоваться оптимизация

• outputHashing: указывает, будет ли в название генерируемого файла добавляться хеш-значение. Значение all
  говорит, что в названия всех генерируемых файлов добавляется хеш

• sourceMap: определяет, будут ли генерироваться файлы sourceMap

• namedChunks: определяет, будут ли использоваться имена файлов для именнованных подгружаемых чанков

• vendorChunk: определяет, будет ли создаваться для сторонних используемых в приложении библиотек отдельный файл

• buildOptimizer: подключает пакет @angular-devkit/build-optimizer
  для оптимизации при использовании опции aot

Стоит отметить, что эти конфигурации никак не влияют на процесс разработки и тестирования приложения. Мы также сможем запускать проект при помощи команды «ng serve». Она не будет применять никаких оптимизаций из конфигурации «production»,
иначе это бы увеличило процесс перекомпиляциии приложения при каждом изменении кода.

Теперь при компиляции используем конфигурацию production. Для этого команде build надо передать флаг --prod:

C:\angular\helloapp>ng build --prod

После этого мы увидим в папке dist/helloapp более компактные файлы, которые собственно и представляют приложение и которые мы можем разместить на каком-нибудь
веб-сервере и обращаться к ним.

angular — Что означают полифилы в Angular4?

Переполнение стека

1. Около

2. Продукты

3. Для команд

1. Переполнение стека
   Общественные вопросы и ответы

2. Переполнение стека для команд
   Где разработчики и технологи делятся частными знаниями с коллегами

3. Вакансии
   Программирование и связанные с ним технические возможности карьерного роста

4. Талант
   Нанимайте технических специалистов и создавайте свой бренд работодателя

5. Реклама
   Обратитесь к разработчикам и технологам со всего мира

6. О компании

Загрузка…

.

angular4 форм — что такое $ location.search () в angular 4

Переполнение стека

1. Около

2. Продукты

3. Для команд

1. Переполнение стека
   Общественные вопросы и ответы

2. Переполнение стека для команд
   Где разработчики и технологи делятся частными знаниями с коллегами

3. Вакансии
   Программирование и связанные с ним технические возможности карьерного роста

4. Талант
   Нанимайте технических специалистов и создавайте свой бренд работодателя

5. Реклама
   Обратитесь к разработчикам и технологам со всего мира

.