Что такое ангуляр – основные функции и принципы работы

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

От автора: в этой статье я общими словами расскажу вам про крайне популярный и широко используемый клиентский фреймворк 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”.

Практический курс по созданию веб-приложения на Angular4

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

Узнать подробнее

Фреймворк на чистом 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, что позволяет легко заменять компоненты.

Практический курс по созданию веб-приложения на Angular4

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

Узнать подробнее

Все манипуляции с 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.

Практический курс по созданию веб-приложения на Angular4

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

Узнать подробнее

Angular 4. Быстрый старт

Овладейте азами работы с Angular 4

Смотреть

webformyself.com

Что такое Angular? — Блог ITVDN

Miško рассказал о том, как возникла идея создать фреймворк в интервью 2013 года:

“Мы хотели понять, можно ли упростить работу веб-дизайнеров, а не только разработчиков. Смогут ли они добавить еще больше HTML в свой код, чтобы превратить обычную статическую форму во что-то более стоящее, что можно отправить по емейлу. Идея заключалась в следующем: будь у вас небольшой бизнес, продающий пиццу или что-либо другое, то вы могли бы добавить простую систему заказа, используя необходимые теги, и они действительно отправляли бы письмо на сервер.»

Поскольку домен angular.com был занят – собственно, как и сейчас – создатели фреймворка переименовали Angular в GetAngular и выпустили небольшой сайт, на котором можно было узнать о всех фичах фреймворка.

Домашняя страница Angular по состоянию на декабрь 2009 года (из Internet Archive). 

Скоро Miško начал работать в Google, а в 2010 году занялся проектом Google Feedback. Miško убедил своего менеджера, Brad Green, переписать проект, используя его Angular. Оптимизация сроков и кода, которые показала команда в работе, помогли убедить Google в силе Angular.

Brad Green и Miško Hevery показывают, как много времени и сил удалось сэкономить на проекте, используя Angular. Это скриншот презентации на конференции ng-conf 2014 keynote, которую стоит посмотреть, если вы хотите знать всё о происхождении Angular.

Вскоре после успеха Google Feedback та же команда переписала open-source библиотеку и в мае 2011 года была выпущена версия Angular 1.0. В течение нескольких лет Angular стремительно набирал популярность, и сегодня Google заявляет, что более 1,5 миллиона разработчиков используют Angular.

Что делает Angular?

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

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

Когда использовать Angular?

Технически вы можете использовать Angular где угодно, но лучше всего он работает в нестандартных приложениях с данными. Если вы ознакомитесь с различными приложениями Angular, собранными на madewithangular.com, вы увидите реальные приложения, которые собирают данные из форм и работают с ними.

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

Окончательный результат демо-приложения Tour of Heroes из Angular документации.

Angular хорош в form-based приложениях, он подходит для больших и сложных приложений. Angular — не самый простой и не самый маленький фреймворк JavaScript. Следовательно, если вы создаёте нечто небольшое, вам лучше подобрать для работы фреймворк попроще, например, jQuery. Angular хорошо подойдёт для разработчиков приложений в средних и больших командах. Если вы разрабатываете приложение самостоятельно, может показаться, что шаблонного кода и конвенций разработки в Angular намного больше, чем вам нужно.

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

Если же у вас приложение, которое нужно запустить на веб, iOS или Android, можете использовать NativeScript для рендеринга вашего приложения в мобильной среде. В некоторых случаях вы даже можете распространять код через эти платформы, экономя ценное время разработки.

Кто поддерживает Angular?

Angular Core Team состоит из большого количества людей во всем мире и из сообщества Angular. При этом большая часть разработок Angular изо дня в день осуществляется сотрудниками Google. Примерно 20 сотрудников Google входят в Angular Core Team и все ТОП-разработчики проекта Angular являются сотрудниками Google.

Следует отметить, что, несмотря на контроль Google над Angular, сам фреймворк по-прежнему много в чём зависит от усилий сообщества. Более двух тысяч человек внесли свой вклад в open-source репозиторий Angular, в общем доступе есть бесчисленные туториалы и guides, многочисленные компании предлагают обучение и набор инструментов для разработчиков.

Если контроль над проектом принадлежит одной компании, это неплохо, так как снижает конфликтные вопросы при принятия нестандартных решений.

Какую версию Angular мне лучше использовать?

На данный момент существует две популярные версии Angular. Версия 1 доступна на https://angularjs.org/  и является обновлённой версией того Angular, что был представлен Miško и его командой в 2011 году. Другая популярная версия теперь называется просто Angular и доступна на https://angular.io/. Современный Angular – это полностью переделанная версия для новых браузеров, рабочих процессов и платформ разработки.

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

Как выглядит Angular-приложение?

Теперь, когда вы имеете некоторое представление об Angular, давайте углубимся в код. Начнём с небольшого приложения “hello world”. Все приложения Angular начинаются с НТМL-страницы, которая выглядит следующим образом.

В реальном приложении тег < script > внутри тега < head > может быть немного сложным, но в высокоуровневых приложениях он такой же, как и другие веб-приложениях – вы загружаете кусок JavaScript-кода в HTML-документ, и приложение работает.  

Есть одна уникальная вещь в выше приведённом примере – элемент < my-app >. Вы не используете этот элемент регулярно в веб-приложении. Цель Angular – постоянно расширять словарь НТМL, позволяя вам определять собственные теги.

Такие пользовательские теги называют компонентами, и вы можете определять их поведение в коде. Вот простейшая реализация элемента < my-app >:

Есть несколько моментов, которые вам нужно знать, чтобы понять, что происходит в данном фрагменте кода. Первое – это код на TypeScript, а не на JavaScript. TypeScript может показаться вам пугающим, если вы не встречались с ним раньше, но его основы понять нетрудно.

TypeScript – надстройка над JavaScript, то есть весь синтаксис JavaScript доступен на TypeScript. Кстати, весь приведённый выше синтаксис – import, export, @Component и остальные – это или нынешние фичи JavaScript, или те, что появятся в ближайшем будущем. Так что, когда вы учите TypeScript, вы изучаете будущее JavaScript. TypeScript, к тому же, отличается превосходной документацией, к которой вы можете обратиться в любое время.

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

Давайте еще раз посмотрим на TypeScript-код, определяющий компонент < my-app >:

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

• Свойство selector определяет имя тега при вводе в HTML. Использование селектора < my-app > показывает Angular, что делать, когда он видит тег < my-app > в HTML.
• Свойство template контролирует, что HTML должен делать, когда используется компонент. Пример использования template: «< h2 >Hello World< /h2 >», тут видно, как Angular определяет, какие действия применять при < my-app > и почему это приложение представляет базовый тег < h2 > при предварительном просмотре в браузере. 

Отображение базового примера “Hello World” в браузере.

Зачем мне использовать Angular?

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

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

Такая возможность тоже есть. Хотите добавить такие профессиональные виджеты, как диаграммы и графики? Kendo UI и похожие фреймворки упрощают добавление этих высококачественных компонентов пользовательского интерфейса.

Пользуясь Angular, не рассчитывайте на простоту фреймворка, но будьте уверены в его невероятной надёжности и хорошей документации. Этот фреймворк прошёл не одно боевое испытание и заслужено используется миллионами разработчиков для написания крутых приложений. Сообщество Angular – огромное, и все хелпы легко найти в Google, Stack Overflow и по всему интернету. Ищите разработчика? Тысячи Angular девелоперов откликнутся на ваш запрос. Есть даже специальные рекрутинговые сайты.

Я уже упоминал о том, что Angular – мультиплатформенный? Вернемся к нашему примеру Hello World. У вас уже есть начало для iOS и Android приложения – просто переключите элемент HTML на компонент, который NativeScript может отобразить в мобильной среде, как , например. Вот так примерно будет выглядеть код.

А вот как этот код работает в нативных iOS и Android приложениях.

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

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

Оригинал статьи: http://linkis.com/telerik.com/7vemI

itvdn.com

10 преимуществ использования фреймворка Angular.js при разработке веб-приложений | Блог | Разработка и дизайн сайтов и мобильных приложений

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

Во-первых, что такое Angular.js фреймворк? Это open source-фреймворк (не библиотека!), который позволяет создавать популярные сегодня одностраничные приложения. После запуска в 2009 году Angular.js быстро набрал популярность и не собирается сдавать позиции — он остается самым востребованным JavaScript-фреймворком на GitHub (в топе как по форкам, так и по количеству «звезд»).

Ниже мы перечислили исчерпывающие причины, почему стоит выбрать AngularJS.

1. Большое комьюнити

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

2. Декларативный стиль кода

При создании шаблонов в Angular.js применяется декларативная парадигма программирования. Это делает код более легковесным, облегчает его чтение и поддержку, так как описывается необходимый конечный результат, а не все шаги по его достижению. Например, сравните фрагменты кода на JavaScript:

var students = [
   {name: 'Sara Connor', score:'97'},
   {name: 'John Connor', score:'60'},
   {...}
];
​
var studentsList = document.getElementById('students-list');
​
students.forEach(function(e){
   var studentEntry = document.createElement('li'),
       studentName = document.createElement('span'),
       studentScore = document.createElement('span');
​
       studentName.innerHTML = e.name;
       studentScore.innerHTML = e.score;
​
       studentEntry.appendChild(studentName);
       studentEntry.appendChild(studentScore);
​
       studentList.appendChild(studentEntry);
});

И в AngularJS:

<div ng-controller="studentsController as studentsCrtl">
   <div ng-repeat="student in studentsCrtl.students">
​
       Name: <span>{{student.name}}</span>
       Title: <span>{{student.title}}</span>
​
   </div>
</div>

3. Использование директив

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

4. Высокая скорость разработки

При правильном подходе с помощью Angular.js можно быстро разрабатывать даже большие приложения.

5. MVC из коробки

В AngularJS используется схема MVC, разделяющая логику, представление и данные приложения:

Это позволяет создавать одностраничные веб-приложения (Single Page Application). В Angular.js имеется служба $http, которая обеспечивает взаимодействие с удаленными HTTP-серверами с помощью XMLHttpRequest или JSONP. При передаче объекта JavaScript на сервер он будет автоматически преобразован в строку JSON. После получения ответа служба также попытается преобразовать полученную строку JSON в JavaScript. Используя службу $http можно создать собственную службу с полным контролем над обработкой URL и данных.

6. Полезные фичи для SPA

Angular.js для вебприложений – это как вода для рыб. Трудно представить, чтобы они могли существовать друг без друга. Например, Angular.js предоставляет возможности по работе с валидацией форм. Если на странице используются формы, FormController записывает их состояние. Используя эту информацию, мы можем задавать поведение HTML-элементов в UI (например, скрыть кнопку «Очистить форму», если пользователь еще не начал вводить данные в форму). Для обработки ошибок в Angular.js предусмотрены встроенные валидаторы (required, ng-required, ng-minlength, ng-pattern и другие), но при необходимости мы также можем создавать собственные. Сообщения об ошибках можно выводить как для всей формы, так и для ее отдельных полей.

Шаблоны или темплейты в Angular.js представляют собой HTML-код, дополненный элементами и атрибутами Angular.js. Фреймворк дополняет шаблон информацией из модели, чтобы показать пользователю динамическую страницу. Для обработки данных и форматирования значений, полученных от модели, используются фильтры. Они позволяют показать нужные данные пользователю без необходимости вносить изменения в исходные данные.

7. Модульность

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

8. Наличие готовых решений

Что важно, для Angular.js существует огромное количество готовых решений, которые позволяют решать довольно разнообразные задачи, используя уже готовые модули. Например, существует несколько модулей для роутинга самый популярный из которых ui-router, так же есть различные модули для работы с таблицами ui-grid, ng-table и много других.

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

9. Двустороннее связывание данных

В Angular.js применяется двустороннее связывание: любые изменения в пользовательском интерфейсе сразу же отражаются на объектах приложения и наоборот. Фреймворк сам следит за событиями браузера, изменениями модели и действиями пользователя на странице, чтобы сразу обновлять нужные шаблоны. При этом в коде JavaScript не требуется хранить ссылки на DOM-элементы и явно ими манипулировать. Мы просто описываем необходимый результат в терминах состояния модели, и нам не нужно использовать низкоуровневые конструкции.

10. Простота тестирования

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

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

1. Сложность освоения. Трудности обычно возникают у тех, кто раньше использовал библиотеку jQuery, ведь в отличие от Angular.js она полагается на выполнение манипуляций с деревом DOM.
2. Замедление работы при использовании более 2000 вотчеров (или слушателей событий).
3. Отсутствие обратной совместимости со второй версией. Разумеется, вы можете начать подготовку своего кода к миграции уже сейчас, но гарантий, что она пройдет гладко, нет.

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

Нужен MVP, разработка под iOS, Android или прототип приложения? Ознакомьтесь с нашим портфолио и сделайте заказ уже сегодня!

Об авторе

Front-end разработчик

Антон создавал проекты на AngularJS для студии.

Похожие статьи

Вернуться к списку записей К списку записей

stfalcon.com

Введение в AngularJS

Что такое AngularJS

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

AngularJS представляет собой opensource JavaScript-фреймворк, использующий шаблон MVC. Собственно использование MVC является его одной из отличительных особенностей.

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

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

Кроме того, AngularJS поддерживает такие функциональности, как Ajax, управление структорой DOM, анимация, шаблоны, маршрутизация и так далее. Мощь фреймворка, наличие богатого функционала во многом повлияла на то, что он находит свое применение во все большем количестве веб-приложений, являясь на данный момент наверное одним из самых популярных javascript-фреймворков.

Официальный сайт фреймворка: http://angularjs.org/. Там вы можете найти сами исходные файлы, обучающие материалы и другие сопроводительные материалы относительно библиотеки.

На момент написания данного руководства последней версией фреймворка была версия 1.6.4.

Начало работы c AngularJS

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

Также можно использовать ссылку на библиотеку из сети CDN компании Google: https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js.

При загрузке zip-пакета мы найдем в нем кроме самой библиотеки (angular.js) еще ряд дополнительных файлов и их минимизированные версии:

• angular-touch.js: предоставляет поддержку событий сенсорного экрана

• angular-animate.js: предоставляет функциональность анимации

• angular-aria.js: предоставляет поддержку aria-атрибутов (accesible rich internet application)

• angular-mocks.js: предоставляет mock-объекты для юнит-тестирования

• angular-route.js: обеспечивает механизм маршрутизации

• angular-sanitize.js: предоставляет функционал для управления потенциально опасным контентом (javascript, html)

• angular-cookies.js: обеспечивает функционал для управления куками

• angular-loader.js: используется для загрузки angularjs-скриптов

• angular-messages.js: предоставляет функционал для вывода сообщений

• angular-resource.js: обеспечивает функциональность для работы с ресурсами

• Папка i18n: содержит js-файлы для разных локалей

Из всех загруженных скриптов в архиве нас будет интересовать прежде всего файл angular.min.js

Теперь собственно создадим приложение. Оно будет стандартным HelloWorld. Код html-страницы будет следующим:

<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
</head>
<body>
<label>Введите имя:</label>
<input type="text" ng-model="name" placeholder="Введите имя">

<h2>Добро пожаловать {{name}}!</h2>
     
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</body>
</html>

Первое, наверное, что бросается в глаза — это новые атрибуты, добавленные к стандартным тегам html (в данном случае ng-app и ng-model). Эти атрибуты являются директивами фреймворка AngularJS. Благодаря их встраиванию фреймворк позволяет добавить элементам определенное поведение.

Конкретно в данном случае директива ng-app объявляет элемент <html> корневым для всего приложения, а директива ng-model указывает модель «name», к которой будет привязано значение элемента input. И при изменении текста в элементе input, модель «name» также будет динамически изменять свое значение.

Чуть ниже в элементе <h2>Добро пожаловать {{name}}!</h2> выводится значение этой модели.

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

metanit.com

что это такое и какие у его преимущества

Всем привет! Сегодня мы начнем разбирать фреймворк от известной компании Google — Angular 2.

Что такое Angular 2

Это фреймворк, основной целью которого является создание одностраничных браузерных приложений или по другому Single Page Application (SPA).  Многие фичи были взяты из AngularJs ( первая версия ).

Вот какие отличительные достоинства имеет ангулар 2:

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

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

Для работы с Angular 2 используются:

• TypeScript
• JavaScript
• Dart

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

Каким образом он будет переводится поговорим позже.

Возможности Angular 2

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

• Модульная система — это свойство отделение определенного функционала приложения в отдельные файлы (напоминает объектно-ориентированное-программирование).
• Компоненты — с помощью их отображается содержимого html, css на экран браузера.
• Метаданные — руководят правильным отображениям компонентов и их классов.
• Анимация — компоненты работающие с интерфейсом по средством анимации.
• Формы — компонент работающий с вводимыми формами. Что произайдет после клика по кнопке, после удаление всех символов с формы, за это все отвечает этот компонент.
• Сервисы — компоненты которые внедряют (несут) логику во взаимодействие с приложением.
• Роутер — компонент, который обеспечивает загрузку компонентов из другого компонента. Можно реализовать загрузку содержимого без перезагрузки самой страницы. Например, вы отправили форму, или перешли по ссылке. Такая загрузка реализована на официальном сайте.
• Директивы — помогают улучшить взаимодействие с работой интерфейса.
• Работа с сервером — взаимодействие с сервером.

Обо всем этом и многом другом будут сделаны отдельные уроки.

Если у вас имеются идеи по поводу создания новых статей, то пишите в комментарии.

Поделиться ссылкой:

codelessons.ru

Что такое AngularJS? — Артем Демо

19-09-2014, 10:50

AngularJS – это JavaScript фреймворк предназначенный для создания одностраничных веб приложений. Поскольку до сих пор существует определенная путаница связанная с определением этих слов, то стоит внести ясность. В первую очередь, как я уже сказал AngularJS – это фреймворк. Фреймворк подразумевает под собой то, что вместо того, чтобы писать весь код самому разработчик “играет по заранее оговоренным правилам”. Эти правила – это стандарты и инструменты выбранного фреймворка.

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

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

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

AngularJS позволяет сократить время разработки приложений. Это достигается за счет встроенных механизмов, которые сильно помогают разработчику. Один из таких механизмов – это встроенный шаблонизатор (template engine). Шаблонизатор позволяет использовать встроенные команды AngularJS для вывода данных. Например:

<div> <ul> <!— {{item.name}} — это часть шаблонизатора AngularJS в бразуере пользователя она будет заменена на название товара —> <li ng-repeat=»item in products»>{{ item.name }}</li> </ul> </div>

<div>   <ul>     <!— {{item.name}} — это часть шаблонизатора AngularJS в бразуере пользователя она будет заменена на название товара —>     <li ng-repeat=»item in products»>{{ item.name }}</li>   </ul> </div>

Другой прекрасный инструмент, который предоставляет AngularJS, это то как фреймворк управляет DOM (Document Objerct Model) или, говоря иначе, HTML тегами. Если при разработке с использованием jQuery (и ее сестрами jQuery UI, jQuery Mobile) вам постоянно приходится вручную обновлять все данные на экране пользователя, то AngularJS делает всю работу за нас. Достаточно указать какие элементы к каким объектам данных привязаны и при каждом изменении состояния на экране будут выводиться обновленная информация.

AngularJS использует объектный подход для разработки. Эта архитектура называется MVC (Model View Controller), стоит отметить, что вместе с этим при классическом подходе эта модель не совсем соответствует тому как ангулар работает с данными. Существует более точное определение его архитектуры – MVVM (Model View – View Model), однако точная разница между это и MVC не сильно важна на этом этапе, так что можно пока не заморачиваться.

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

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

Поделиться: Please enable JavaScript to view the comments powered by Disqus. comments powered by

artemdemo.me

Зачем нужен Angular.js и почему именно он

АВТОР: КИРИЛЛ ШИРИНКИН

DevOps и Infrastructure консультант, эксперт по AWS, программист, автор двух книг, ментор и основатель mkdev.me. Я проектирую и разрабатываю программные продукты. Ещё я пишу об этом и учу людей.

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

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

Есть большая вероятность, что вам не придётся использовать JS фреймворки ближайшие месяцы и\или годы. Область их применения довольно специфична: так называемые одностраничные приложения (Single Page Applications, SPA). Типичные примеры: Google Drive, Gmail, Evernote. Но даже в тех случаях, когда стоит задача написать одностраничное приложение, не всегда имеет смысл использовать полноценный JavaScript фреймворк: всё зависит от того, насколько динамичный и сложный UI вы пытаетесь построить.

Веб-версия Evernote – типичное SPA приложение

Тем не менее популярность подобных инструментов как никогда высока, и, как минимум, знать об их существовании стоит. Рассказать обо всех доступных варинтах за раз невозможно, поэтому в этой серии статей мы рассмотрим фреймворк Angular.js. Если вас интересуют альтернативные решения, то вы можете посмотреть на них на сайте http://todomvc.com/ – авторы этого проекта реализуют одно и тоже приложение на разных фреймворках, чтобы разработчикам было легче выбрать наиболее подходящий для них.

Почему Angular.js?

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

Angular.js на данный момент является самым популярным фреймворком, разработка которого поддерживается парнями из Google. Помимо богатой стандартной библиотеки, для «ангуляра» написано много пользовательских расширений, с частью которых мы познакомимся в пределах этой серии статей. Есть даже специальный фреймворк поверх Angular.js, который значительно облегчает написание кроссплатформенных мобильных приложений: http://ionicframework.com.

Что насчёт Angular.js 2.0?

Текущая версия Angular.js, на которой будет основан этот цикл статей – 1.3. Разработчики заявили, что версия 2.0, которая выйдет неизвестно когда (но не раньше чем через год-полтора), будет несовместимой с текущей версией фреймворка, но при этом сохранит большинство концепций, заложенных в него. Так же разработчики обещают поддерживать версии 1.x на протяжении нескольких лет после релиза 2.0.

Это означает, что ещё как минимум 2 года Angular.js 1.x будет по-прежнему доминировать, на нём по-прежнему написаны тысячи приложений и множество вакансий (особенно в Европе) указывают именно этот фреймворках в требованиях. Конечно, в какой-то момент вам придётся потратить пару часов на то, чтобы разобраться с новой версией 2.0 и, скорее всего, пару дней на переход с 1.x на 2.0. Тем не менее, знания Angular.js не будут выброшены на помойку, ведь, как вы уже знаете, это вопрос не конкретной технологии, а умения разобраться в любой из них и применять для своей задачи 😉

Анонс версии 2.0 можно почитать вот здесь: http://angularjs.blogspot.se/2014/10/ng-europe-angular-13-and-beyond.html. Ещё хорошая статья с более техническими деталями: http://ng-learn.org/2014/03/AngularJS-2-Status-Preview/

Так что же мы будем делать?

В этой серии статей мы будем писать небольшой менеджер финансов: начнём с настройки рабочего окружения и структуры проекта и закончим работой с API. По пути познакомимся с основными концепциями Angular.js, роутингом, некоторыми сторонними библиотеками и несколькими важными инструментами современной фронтенд-разработки. Под конец серии вы должны уметь писать простые приложения на Angular.js и знать куда смотреть, чтобы научиться разрабатывать более сложные вещи.

mkdev.me