3 причины выбрать AngularJS для вашего следующего проекта

AngularJS — это относительно новый JavaScript-фреймворк от Google, разработанный для того, чтобы сделать вашу разработку как можно проще. Существует множество фреймворков и плагинов. Таким образом, иногда бывает трудно просеять весь шум, чтобы найти полезные инструменты.

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

1 — Разработано Google

Angular создан и поддерживается преданными инженерами Google.

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

Это не первая попытка Google создать среду JavaScript; Сначала они разработали свой комплексный веб-инструментарий , который компилирует Java до JavaScript и широко использовался командой Google Wave. С появлением HTML5, CSS3 и JavaScript, в качестве внешнего и внутреннего языков, Google осознал, что веб не предназначен для написания исключительно на Java.

AngularJS пришел к стандартизации структуры веб-приложений и предоставил будущий шаблон для разработки клиентских приложений.

Версия 1.0 была выпущена чуть менее 6 месяцев назад (по состоянию на декабрь 2012 года) и используется множеством приложений , от хобби до коммерческих продуктов. Принятие AngularJS в качестве жизнеспособной среды для разработки на стороне клиента быстро становится известным всему сообществу веб-разработчиков.

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

2 — Это всеобъемлющее

Если вы знакомы с такими проектами, как QUnit , Mocha или Jasmine , у вас не возникнет проблем с изучением API модульного тестирования Angular.

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

• Отдых Легко. Действия RESTful быстро становятся стандартом для обмена данными между сервером и клиентом. В одной строке JavaScript вы можете быстро общаться с сервером и получать данные, необходимые для взаимодействия с вашими веб-страницами. AngularJS превращает это в простой объект JavaScript, как Models, следуя шаблону MVVM (Model View View-Model).
• MVVM на помощь! Модели общаются с объектами ViewModel (через то, что называется объектом $ scope ), которые прослушивают изменения в Моделях. Затем они могут быть доставлены и обработаны представлениями, которые являются HTML-кодом, выражающим ваш код. Представления могут маршрутизироваться с использованием объекта $ routeProvider , так что вы можете создавать глубокие ссылки и упорядочивать свои представления и контроллеры, превращая их в доступные для навигации URL-адреса. AngularJS также предоставляет контроллеры без сохранения состояния, которые инициализируют и контролируют объект $scope .
• Связывание данных и внедрение зависимостей. Все в шаблоне MVVM автоматически передается через пользовательский интерфейс, когда что-либо меняется. Это устраняет необходимость в обертках, методах получения / установки или объявлениях классов. AngularJS обрабатывает все это, так что вы можете выражать свои данные так же просто, как с помощью примитивов JavaScript, таких как массивы, или так сложно, как вы хотите, с помощью пользовательских типов. Поскольку все происходит автоматически, вы можете запросить ваши зависимости как параметры в сервисных функциях AngularJS, а не один гигантский вызов main() для выполнения вашего кода.
• Расширяет HTML. Большинство веб-сайтов, созданных сегодня, представляют собой гигантскую серию тегов <div> с небольшой семантической ясностью. Вам нужно создать обширные и исчерпывающие классы CSS, чтобы выразить намерение каждого объекта в DOM. С Angular вы можете управлять своим HTML как XML, предоставляя вам бесконечные возможности для тегов и атрибутов. Angular выполняет это с помощью своего HTML-компилятора и использования директив для запуска поведения на основе вновь созданного синтаксиса, который вы пишете.
• Делает HTML вашим шаблоном. Если вы привыкли к Mustache или Hogan.js , вы можете быстро понять синтаксис скобок движка шаблонов Angular, потому что это всего лишь HTML . Angular проходит DOM для этих шаблонов, в которых находятся директивы, упомянутые выше. Затем шаблоны передаются компилятору AngularJS в виде элементов DOM, которые могут быть расширены, выполнены или использованы повторно. Это имеет ключевое значение, потому что теперь у вас есть необработанные компоненты DOM, а не строки, что позволяет напрямую манипулировать и расширять дерево DOM.
• Тестирование на уровне предприятия. Как указано выше, AngularJS не требует никаких дополнительных платформ или плагинов, включая тестирование. Если вы знакомы с такими проектами, как QUnit , Mocha или Jasmine , у вас не возникнет проблем с изучением API модульного тестирования Angular и Scenario Runner , который поможет вам выполнить ваши тесты настолько близко к фактическому состоянию вашего производственного приложения, насколько это возможно.

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

3 — Начните в считанные минуты

Начать работу с AngularJS невероятно легко. С несколькими атрибутами, добавленными в ваш HTML, вы можете создать простое приложение Angular менее чем за 5 минут!

1. Добавьте директиву ng-app в <html> чтобы Angular знал, что нужно запускать на странице:

   1	<html lang=»en» ng-app>

2. Добавьте <script> Angular <script> в конец <head> :

   1 2 3

   <head> …meta and stylesheet tags…  <script src=»lib/angular/angular.js»></script>

3. Добавьте обычный HTML. Директивы AngularJS доступны через атрибуты HTML, а выражения оцениваются в двойных скобках:

   1 2 3 4 5 6 7 8 9

   <body ng-controller=»ActivitiesListCtrl»>   <h1>Today’s activities</h1>   <ul>    <li ng-repeat=»activity in activities»>      {{activity.name}}    </li>   </ul> </body> </html>

Директива ng-controller устанавливает пространство имен, где мы можем разместить наш Angular JavaScript, чтобы манипулировать данными и оценивать выражения в нашем HTML. ng-repeat — это объект повторителя Angular, который инструктирует Angular продолжать создавать элементы списка, пока у нас есть действия для отображения, и использовать этот элемент <li> в качестве шаблона того, как мы хотим, чтобы все они выглядели.

1. Если вы хотите получить что-то из Angular, извлеките данные из файла JavaScript, содержащего функцию, имя которой соответствует контроллеру, который вы указали в своем HTML:

  function ActivitiesListCtrl ($ scope) {
   $ scope.activities = [
     {"name": "Wake up"},
     {"name": "Чистить зубы"},
     {"name": "Shower"},
     {"name": "Завтракать"},
     {"name": "Go to work"},
     {"name": "Напишите статью о Nettuts"},
     {"name": "Перейти в спортзал"},
     {"name": "Встречаться с друзьями"},
     {"name": "Ложись спать"}
   ];
  } 

Как упоминалось ранее, мы создаем функцию с тем же именем, что и директива ng-controller , поэтому наша страница может найти соответствующую функцию Angular для инициализации и выполнения нашего кода с данными, которые мы хотим получить. Мы передаем параметр $scope для доступа к списку activities шаблона, который мы создали в нашем представлении HTML. Затем мы предоставляем базовый набор действий с ключом, name , соответствующим имени свойства действия, которое мы перечислили в нашей двойной скобке, и значением, которое представляет собой строку, представляющую действия, которые мы хотим выполнить сегодня.

1. Хотя это приложение завершено, оно не слишком практично. Большинство веб-приложений содержат много данных, хранящихся на удаленных серверах. Если ваши данные хранятся где-то на сервере, мы можем легко заменить массив вызовом из AJAX API от Angular:

  function ActivitiesListCtrl ($ scope) {
   $ http.get ('activity / list.json'). success (function (data) {
     $ scope.activities = data;
   }
 } 

Мы просто заменили собственный объект массива JavaScript хэшей специальной функцией HTTP GET, предоставляемой Angular API. Мы передаем имя файла, который мы просматриваем для извлечения с сервера (в данном случае это файл действий JSON), и нам возвращается обещание из Angular, во многом аналогично тому, как шаблон обещания работает в jQuery.

Узнайте больше об обещаниях в jQuery здесь на Nettuts +.

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

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

Добавьте директиву model в выпадающий список:

Наконец, мы модифицируем <li> для распознавания sortModel как способа упорядочить наш список:

Все тяжелые работы выполняются компанией AngularJS.

Вот и все! Секрет в том, что мы добавили фильтр в директиву ng-repeat в элементе списка. Фильтр orderBy принимает входной массив (наш список действий), копирует его и переупорядочивает, что копирует, по свойству, указанному в теге select . Не случайно, что атрибутом значения тега option является name , то же значение, которое предоставляется нашим файлом JSON, как свойство activity . Это то, что позволяет AngularJS автоматически превращать значение HTML-параметра в мощное ключевое слово для сортировки нашего шаблона действий.

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

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

Вывод

AngularJS быстро становится доминирующей средой JavaScript для профессиональной веб-разработки. На Envato Market вы можете найти множество скриптов и приложений AngularJS, которые помогут вам добиться большего с Angular JS, таких как инструменты обрезки , шаблоны интернет-магазинов , рейтинговые приложения и многое другое.

В этом уроке:

• Мы рассмотрели, как Google разработал этот фреймворк как способ максимально использовать HTML.
• Мы рассмотрели основные основные функции и возможности, с которыми Angular приятно работать.
• Наконец, мы разработали динамическую полнофункциональную демонстрацию за считанные минуты, чтобы продемонстрировать истинную силу того, как легко перейти от нуля к полноценному приложению.

Если вы ищете надежную, хорошо поддерживаемую среду для любого проекта, я настоятельно рекомендую вам взглянуть на AngularJS. Его можно бесплатно скачать на AngularJS.org , который также содержит обширную информацию, включая полную документацию по API, а также многочисленные примеры и учебные пособия, которые охватывают все аспекты веб-разработки на переднем крае. Удачи!