angular что это такое

Начало работы с Angular

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

Что такое Angular?

Angular — это платформа для разработки, написанная на TypeScript. Как платформа Angular включает:

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

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

Что вы создадите

Эта серия руководств проведёт вас через создание приложения со списком дел (to-do list). С помощью этого приложения вы узнаете, как использовать Angular для управления, редактирования, добавления, удаления и фильтрации элементов.

Необходимые условия

Чтобы установить Angular в вашей локальной системе, вам понадобится следующее:

Node.js

Angular требует текущую, последнюю LTS, или поддерживаемую LTS версию Node.js. Для получения информации о конкретных требованиях к версии смотрите ключ engines в package.json файле.

пакетный менеджер npm

Настройка приложения

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

Если вам будет предложено применить строгую проверку типов, вы можете ответить «yes».

Перейдите в ваш новый проект с помощью команды cd :

В браузере перейдите на http://localhost:4200/, и вы увидите ваше новое приложение. Если измените любой из исходных файлов, приложение автоматически перезагрузится.

Знакомство с вашим Angular приложением

Таким образом, с самого начала вы используете лучшие приёмы разработки.

Каждый раз, когда вы генерируете компонент, CLI создает эти четыре файла в каталоге с указанным вами именем.

Структура Angular приложения

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

Класс

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

HTML-шаблоны

У каждого компонента есть HTML-шаблон, в котором определяется то, что этот компонент будет отображать. Шаблон можно задать либо строкой, либо как путь к файлу.

Для ссылки на внешний HTML-файл, используется свойство templateUrl :

Чтобы указать напрямую HTML-код, используется свойство template с обратными кавычками:

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

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

Когда приложение загружает компонент и его шаблон, браузер видит следующее:

Стили

Компонент может наследовать общие стили приложения из файла styles.css или переопределять их собственными стилями. Вы можете писать стили для конкретных компонентов прямо в декораторе @Component() или указывая путь к CSS-файлу.

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

Обычно компонент использует стили определяемые в отельном файле, указанном в свойстве styleUrls :

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

Резюме

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

Источник

AngularJS — фреймворк для динамических веб-приложений от Google

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

Дзен Angular

AngularJS разрабатывается сотрудниками Google и используется, как минимум, в одном сервисе Google — DoubleClick.

Примеры

Основные понятия AngularJS

Директивы

На директивах держится практически вся декларативная часть AngularJS. Именно они используются для обогащения синтаксиса HTML. В процессе компиляции DOM директивы берутся из HTML и исполняются. Директивы могут добавить какое-то новое поведение и/или модифицировать DOM. В стандартную поставку входит достаточно большое количество директив для построения веб приложений. Но ключевой особенностью является возможность разработки своих директив, за счет чего HTML может быть превращен в DSL.

Директивы могут использоваться как элемент ( ), атрибут (), в классе () или в комментарии (). Это зависит от того, как конкретная директива была разработана.

Scope-ы

Scope — это объект, имеющий отношение к модели в приложении. Он является контекстом выполнения для выражений. Scope-ы выстраиваются в иерархическую структуру, похожую на DOM. При этом они наследуют свойства от своих родительских scope-ов.

Сервисы

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

Фильтры

Фильтры предназначены для форматирования данных перед отображением их пользователю, а также фильтрации элементов в коллекциях. Примеры фильтров (полный список можно посмотреть в документации): currency, date, orderBy, uppercase. Использование фильтров достаточно традиционно: << expression | filter1 | filter2 >>

Модули

Приложения в AngularJS не имеют основного исполняемого метода. Вместо этого модуль выполняет роль декларативного описания того, как приложение должно быть загружено. Благодаря этому, например, при написании сценариев тестирования можно подгрузить дополнительные модули, которые переопределят какие-то настройки, облегчая тем самым комплексное (end-to-end) тестирование.

Тестирование

Как пишут разработчики, для тестирования они сделали очень много в AngularJS, поэтому уже ничего не может извинить вас, если вы не будете тестировать свое приложение 🙂

Пример тестового e2e сценария:

Подробнее о модульном тестировании и e2e тестировании в руководстве разработчика.

AngularJS Batarang

Это расширение для Chrome, которое облегчает отладку AngularJS приложений. Позволяет работать с иерархией scope-ов, дает возможность профилирования приложения, визуализирует зависимости между сервисами, отображает содержимое scope-ов на странице элементов, позволяет выводить и менять значения в scope из консоли. Хорошее текстовое описание на странице в github. Хорошее видео на youtube.

Источник

Просто Angular

Введение

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

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

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

Содержание

Почему 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 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 месяца будут посвящены доработке Angulr 4.0.0.

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

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

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

Angular2 Webpack Starter

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

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

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

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

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

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

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

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

Если 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. Установка приложения занимает много этапов, где много вещей может пойти не так:

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

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

Больше нам не требуется 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. Начало работы с фреймворком¶

Angular представляет фреймворк от компании Google для создания клиентских приложений. Прежде всего он нацелен на разработку SPA-решений (Single Page Application), то есть одностраничных приложений. В этом плане Angular является наследником другого фреймворка AngularJS. В то же время Angular это не новая версия AngularJS, а принципиально новый фреймворк.

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

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

Но мы не ограничены языком TypeScript. При желании можем писать приложения на Angular с помощью таких языков как Dart или JavaScript. Однако TypeScript все таки является основным языком для Angular.

Официальный репозиторий фреймворка на гитхабе: https://github.com/angular/angular. Там вы можете найти сами исходные файлы, а также некоторую дополнительную информацию.

Начало работы c Angular¶

Для работы с Angular необходимо установить сервер Node.js и пакетный менеджер npm, если они отсутствуют на рабочей машине. Для установки можно использовать программу установки node.js. Вместе с сервером она также установит и npm. При этом особого какого-то знания для работы с NodeJS и npm не требуется.

Данный файл устанавливает пакеты и зависимости, которые будут использоваться проектом. В секции dependencies в основном определяются пакеты angular, которые необходимы приложению для работы. В секции devDependencies прописаны только те пакеты, которые будут использоваться для разработки. В частности, это пакеты для работы с языком typescript (так как мы будем писать код приложения на языке TypeScript), а также пакеты, необходимые для сборки приложения в один файл с помощью сборщика webpack.

Затем откроем командную строку (терминал) и перейдем в ней к папке проекта с помощью команды cd :

Создание компонента Angular¶

Компоненты представляют основные строительные блоки приложения Angular. Каждое приложение Angular имеет как минимум один компонент. Поэтому создадим в папке src/app новый файл, который назовем app.component.ts и в котором определим следующий код компонента:

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

Приложение Angular состоит из модулей. Модульная структура позволяет легко подгружать и задействовать только те модули, которые непосредственно необходимы. И каждое приложение имеет как минимум один корневой модуль. Поэтому создадим в папке src/app новый файл, который назовем app.module.ts со следующим содержимым:

Запуск приложения¶

Теперь нам надо указать Angular, как запускать наше приложение. Для этого создадим в папке src (на уровень выше, чем расположены файлы app.component.ts и app.module.ts ) файл main.ts со следующим содержимым:

Также в папке src определим еще один файл, который назовем polyfills.ts со следующим кодом:

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

Создание главной страницы¶

Далее определим в папке src главную страницу index.html приложения:

Определение конфигурации¶

Поскольку для определения кода приложения применяется язык TypeScript, поэтому также создадим в корневой папке проекта новый файл tsconfig.json :

Angular.json¶

Проект определяет следующие опции:

Параметр options задает параметры построения файлов. Для команды » build » здесь определены следующие опции:

Последняя опция defaultProject указывает на проект по умолчанию. В данном случае это наш единственный проект.

В итоге у нас получится следующая структура проекта:

Запуск проекта¶

И теперь, когда все готово, мы можем запустить проект. Для этого в командной строке (терминале) перейдем к папке проекта с помощью команды cd и затем выполним команду ng serve:

Введем в текстовое поле какое-нибудь имя, и оно тут же отобразится в заголовке.

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

Источник