В этой статье я собираюсь дать вам общий обзор очень популярной и широко используемой клиентской среды под названием Angular . Это введение в Angular в основном предназначено для начинающих разработчиков, которые не имеют большого опыта работы с JS-фреймворками и хотят изучить основную идею Angular, а также понять ее отличия от AngularJS.
В наши дни фреймворк JavaScript является своего рода модным словом: все обсуждают эти фреймворки, и многие разработчики спорят о лучшем решении.
Итак, давайте начнем знакомство с Angular, хорошо?
Зачем мне нужны рамки?
Если вы не уверены, что такое JavaScript (или клиентская) среда, это технология, которая предоставляет нам правильные инструменты для создания веб-приложения, а также определяет, как оно должно быть разработано и как должен быть организован код.
В наши дни большинство JS-фреймворков самоуверенны , то есть имеют собственную философию создания веб-приложения, и вам может потребоваться некоторое время на изучение основных концепций. Другие решения, такие как Backbone , не инструктируют разработчиков о том, как им следует создавать проект, поэтому некоторые люди даже называют такие технологии просто библиотеками, а не фреймворками.
На самом деле, JavaScript-фреймворки появились не так давно. Я помню времена, когда сайты создавались с плохо структурированным кодом JS (во многих случаях на основе jQuery). Однако клиентские интерфейсы становятся все более и более сложными, и JavaScript потерял свою репутацию «игрушечного» языка. Современные веб-сайты в значительной степени зависят от JS, и возникла необходимость правильно организовать (и протестировать!) Код. Поэтому клиентские среды стали популярными, и в настоящее время их насчитывается не менее десятка .
Угловое введение: что такое Angular
AngularJS был «золотым ребенком» среди JavaScript-фреймворков, так как он был впервые представлен корпорацией Google в 2012 году. Он был построен с учетом концепции Model-View-Controller , хотя авторы фреймворка часто называли его «Model-View» — * »или даже« модель-вид-что угодно ».
Фреймворк, написанный на чистом JavaScript, был предназначен для отделения логики приложения от манипуляций с DOM и нацелен на динамическое обновление страниц. Тем не менее, это было не очень навязчиво: вы могли контролировать только часть страницы AngularJS. Эта инфраструктура представила множество мощных функций, позволяющих разработчику довольно легко создавать многофункциональные одностраничные приложения.
В частности, была представлена интересная концепция привязки данных, которая подразумевала автоматическое обновление представления при изменении модели (данных) и наоборот. Кроме того, была представлена идея директив , которая позволила придумать собственные HTML-теги, воплощенные в жизнь JavaScript. Например, вы можете написать:
<calendar></calendar> Это пользовательский тег, который будет обработан AngularJS и превращен в полноценный календарь в соответствии с инструкциями основного кода. (Конечно, ваша работа заключается в написании соответствующей директивы.)
Еще одна очень важная вещь — это Dependency Injection , которое позволяло соединять компоненты приложения таким образом, чтобы облегчить повторное использование и тестирование кода. Конечно, AngularJS — это гораздо больше , но мы не будем подробно его обсуждать в этой статье.
AngularJS стал популярным очень быстро и получил большую поддержку. Тем не менее, его сопровождающие решили сделать еще один шаг и приступили к разработке новой версии, которая изначально называлась Angular 2 (позже просто Angular без части «JS»). Не случайно фреймворк получил новое имя: на самом деле, он был полностью переписан и переработан, в то время как многие концепции были пересмотрены.
Первый стабильный релиз Angular 2 был опубликован в 2016 году , и с тех пор AngularJS начал терять свою популярность в пользу новой версии. Одной из основных особенностей Angular 2 была возможность разработки для нескольких платформ: веб, мобильных и собственных десктопов (тогда как AngularJS не имеет мобильной поддержки из коробки).
Затем, чтобы сделать все еще более сложным, к концу 2016 года был выпущен Angular 4 . «Так где же версия 3?», Вы можете спросить. Я задавал тот же вопрос, так как кажется, что версия 3 никогда не была опубликована вообще! Как это могло случиться? Как объясняется в официальном сообщении в блоге , сопровождающие решили придерживаться семантической версии начиная с Angular 2.
Следуя этому принципу, изменение основной версии (например, «2.xx» становится «3.xx») означает, что были внесены некоторые критические изменения. Проблема в том, что компонент Angular Router уже был в версии 3 . Поэтому, чтобы исправить это смещение, было решено вообще пропустить Angular 3. К счастью, переход с Angular 2 на 4 был менее болезненным, чем с AngularJS на Angular 2, хотя многие разработчики все еще были озадачены всем этим беспорядком.
Angular 5 был выпущен в ноябре 2017 года . Он также обратно совместим с предыдущими версиями Angular. Angular 6 должен быть выпущен довольно скоро, надеюсь, он даст нам еще больше интересных функций и улучшений.
Угловое Введение: Преимущества Углового
Итак, почему Angular? Ну, потому что он поддерживается на различных платформах (веб, мобильные, нативные десктопы), он мощный, современный, имеет приятную экосистему, и это просто круто. Не убежден? Позвольте мне быть более красноречивым, чем:
- Angular представляет вам не только инструменты, но и шаблоны проектирования для создания вашего проекта в удобной для пользователя форме. Когда приложение Angular создано правильно, вы не получите путаницу классов и методов, которые сложно изменить и еще сложнее протестировать. Код структурирован удобно, и вам не нужно тратить много времени, чтобы понять, что происходит.
- Это JavaScript, но лучше. Angular построен с использованием TypeScript, который, в свою очередь, опирается на JS ES6. Вам не нужно изучать совершенно новый язык, но вы по-прежнему получаете такие функции, как статическая типизация, интерфейсы, классы, пространства имен, декораторы и т. Д.
- Не нужно изобретать велосипед. С Angular у вас уже есть много инструментов, чтобы сразу приступить к созданию приложения. У вас есть директивы для динамического поведения элементов HTML. Вы можете
FormControlформы с помощьюFormControlи ввести различные правила проверки. Вы можете легко отправлять асинхронные HTTP-запросы различных типов. Вы можете настроить маршрутизацию с небольшими хлопотами. И есть еще много вкусностей, которые Angular может предложить нам! - Компоненты развязаны. Угловой стремился снять жесткую связь между различными компонентами приложения. Инъекция происходит в стиле NodeJS, и вы можете легко заменить различные компоненты.
- Все манипуляции с DOM происходят там, где это должно произойти. С Angular вы не сильно связываете презентацию и логику приложения, что делает разметку намного чище и проще.
- Тестирование в основе. Angular предназначен для тщательного тестирования и поддерживает как единичное, так и сквозное тестирование с помощью таких инструментов, как Jasmine и Protractor.
- Angular мобильна и готова к использованию на рабочем столе , а это означает, что у вас есть одна платформа для нескольких платформ.
- Angular активно поддерживается и имеет большое сообщество и экосистему. Вы можете найти много материалов по этой платформе, а также множество полезных сторонних инструментов.
Таким образом, мы можем сказать, что Angular — это не просто платформа, а платформа, которая позволяет разработчикам создавать приложения для Интернета, мобильных устройств и настольных компьютеров. Вы можете узнать больше о его архитектуре в этом руководстве .
Угловое Введение: Сложности Angular
Я должен сказать, что, к сожалению, Angular — довольно большая и сложная структура со своей собственной философией, которая может быть сложной для новичков, чтобы понять и привыкнуть к ней. Однако изучение концепций фреймворка — не единственная задача; Кроме того, вам также должно быть удобно с несколькими дополнительными технологиями:
- Рекомендуется кодировать приложения Angular в TypeScript , поэтому вы должны это понимать. Можно написать код с использованием современного JavaScript (ES6), хотя я редко вижу людей, которые делают это.
- TypeScript — это расширенный набор JavaScript, поэтому вам также должно быть удобно.
- Хорошая идея — понять Angular CLI, чтобы еще больше ускорить процесс разработки.
- Диспетчер пакетов Node npm широко используется для установки самого Angular и других компонентов, поэтому вам также должно быть удобно.
- Изучение того, как настроить запуск задач, таких как Gulp или Grunt, может оказаться очень полезным, так как многое может быть сделано до того, как приложение будет фактически развернуто в рабочей среде.
- Использование минификаторов (таких как UglifyJS ) и упаковщиков (таких как Webpack ) также очень распространено в наши дни.
- При разработке приложения крайне важно иметь возможность отлаживать код, поэтому вы должны знать, как работать с такими средствами отладки, как Augury .
- Конечно, очень важно тестировать приложения Angular, которые могут стать очень сложными. Один из самых популярных инструментов тестирования называется Jasmine (который является основой для тестирования) и Protractor (который используется для сквозного тестирования).
Итак, как вы видите, есть много вещей, которые нужно изучить, чтобы начать создавать клиентские веб-приложения. Но не отчаивайтесь: в сети есть множество ресурсов, которые могут помочь вам изучить все эти инструменты и технологии. Конечно, вам потребуется некоторое время, чтобы понять их, но в результате вы получите ценный опыт и сможете уверенно создавать сложные приложения.
И последнее, на что стоит обратить внимание: иногда использование Angular для приложения может оказаться излишним. Если у вас небольшой или средний по размеру проект без каких-либо сложных пользовательских интерфейсов и взаимодействий, может быть, лучше придерживаться простого старого JavaScript. Поэтому очень важно оценить все требования, возможности нового приложения, а также принять во внимание сроки, прежде чем принимать решение о том, использовать ли JavaScript-фреймворк или нет.
Вывод
В этом введении Angular мы обсудили Angular, клиентскую среду, поддерживающую несколько платформ. Мы рассмотрели некоторые его особенности и концепции, а также увидели, как они отличаются от AngularJS, предыдущей версии фреймворка.
Надеюсь, теперь у вас есть базовое представление о том, что такое Angular и в каких случаях он может пригодиться!
Если вы хотите начать изучать эту среду уже сегодня, ознакомьтесь с серией учебных руководств SitePoint Angular . И, конечно же, на сайте есть много дополнительных учебных материалов , поэтому обязательно ознакомьтесь с ними.