Статьи

5 потрясающих возможностей AngularJS

Декабрь 3, 2018

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

Чтобы понять, что вы можете делать с AngularJS, ознакомьтесь с ассортиментом AngularJS на Envato Market. Вы можете найти изображение , веб-приложение для электронной коммерции , редактор JSON и многое другое.

Товары AngularJS на рынке Envato
Товары AngularJS на рынке Envato

Лифт Pitch: AngularJS в двух словах

AngularJS — это новая, мощная технология на стороне клиента, которая обеспечивает способ реализации действительно мощных вещей таким образом, чтобы охватывать и расширять HTML, CSS и JavaScript, одновременно устраняя некоторые из его явных недостатков. Это то, чем был бы HTML, если бы он был построен для динамического контента.

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

Особенность 1: Двухстороннее связывание данных

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

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

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

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

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

Вот простой пример, который демонстрирует, как связать входное значение с элементом <h1> .

01
02
03
04
05
06
07
08
09
10
11
12
13
14
<!doctype html>
 <html ng-app>
   <head>
     <script src=»http://code.angularjs.org/angular-1.0.0rc10.min.js»></script>
   </head>
   <body>
     <div>
       <label>Name:</label>
       <input type=»text» ng-model=»yourName» placeholder=»Enter a name here»>
       <hr>
       <h1>Hello, {{yourName}}!</h1>
     </div>
   </body>
 </html>

Это чрезвычайно просто настроить, и почти волшебно …

Особенность 2: Шаблоны

Важно понимать, что AngularJS ни в коем случае не манипулирует шаблоном как строками. Это все браузер DOM.

В AngularJS шаблон просто старый-HTML. Словарь HTML расширен, чтобы содержать инструкции о том, как модель должна проецироваться в представление.

Шаблоны HTML анализируются браузером в DOM. Затем DOM становится входом для компилятора AngularJS. AngularJS пересекает шаблон DOM для рендеринга инструкций, которые называются директивами. В совокупности директивы отвечают за настройку привязки данных для представления вашего приложения.

Важно понимать, что AngularJS ни в коем случае не манипулирует шаблоном как строками. Входные данные для AngularJS — это DOM браузера, а не строка HTML. Привязки данных — это преобразования DOM, а не конкатенации строк или изменения innerHTML . Использование DOM в качестве входных данных, а не строк, является самым большим отличием AngularJS от его родственных структур. Использование DOM — это то, что позволяет расширять словарь директив и создавать собственные директивы или даже абстрагировать их в повторно используемые компоненты!

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

Вот пример, где я использую директиву ng-repeat чтобы перебрать массив images и заполнить то, что по сути является шаблоном img . 

  function AlbumCtrl ($ scope) {
	 scope.images = [
		 {"thumbnail": "img / image_01.png", "description": "Описание изображения 01"},
		 {"thumbnail": "img / image_02.png", "description": "Описание изображения 02"},
		 {"thumbnail": "img / image_03.png", "description": "Описание изображения 03"},
		 {"thumbnail": "img / image_04.png", "description": "Описание изображения 04"},
		 {"thumbnail": "img / image_05.png", "description": "Описание изображения 05"}
	 ];
 }
1
2
3
4
5
6
7
<div ng-controller=»AlbumCtrl»>
   <ul>
     <li ng-repeat=»image in images»>
       <img ng-src=»{{image.thumbnail}}» alt=»{{image.description}}»>
     </li>
   </ul>
 </div>

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

Особенность 3: MVC

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

Шаблон MVC или Model-View-Controller означает много разных вещей для разных людей. AngularJS не реализует MVC в традиционном смысле, а скорее что-то ближе к MVVM (Model-View-ViewModel).

Модель

Модель — это просто данные в приложении. Модель — это просто старые объекты JavaScript. Нет необходимости наследовать от каркасных классов, оборачивать их в прокси-объекты или использовать специальные методы getter / setter для доступа к ним. Тот факт, что мы имеем дело с ванильным JavaScript, является действительно хорошей функцией, которая сокращает шаблон приложения.

ViewModel

Модель представления — это объект, который предоставляет конкретные данные и методы для поддержки определенных представлений.

Viewmodel — это объект $scope который находится в приложении AngularJS. $scope — это простой объект JavaScript с небольшим API, предназначенный для обнаружения и передачи изменений в его состояние.

Контроллер

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

Вид

Представление — это HTML-код, существующий после того, как AngularJS проанализировал и скомпилировал HTML-код для включения визуализированной разметки и привязок.

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

Особенность 4: Инъекция зависимости

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

Внедрение зависимостей (DI) позволяет вам запрашивать зависимости, а не искать их или создавать самостоятельно. Думайте об этом как о способе сказать: «Привет, мне нужен X», и DI отвечает за его создание и предоставление.

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

  function EditCtrl ($ scope, $ location, $ routeParams) {
        // Что-то умное здесь ...
   }

Вы также можете определить свои собственные сервисы и сделать их доступными для инъекций. 

  Угловой.
       модуль («MyServiceModule», []).
       factory ('notify', ['$ window', function (win) {
       функция возврата (msg) {
           win.alert (MSG);
       };
   }]);

   function myController (scope, notifyService) {
       scope.callNotify = function (msg) {
           notifyService (MSG);
       };
   }

   myController. $ inject = ['$ scope', 'notify'];

Особенность 5: Директивы

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

Директивы могут использоваться для создания пользовательских HTML-тегов, которые служат новыми пользовательскими виджетами. Их также можно использовать для «декорирования» элементов поведением и интересными способами манипулировать атрибутами DOM.

Вот простой пример директивы, которая прослушивает событие и обновляет его $scope соответственно. 

  myModule.directive ('myComponent', функция (mySharedService) {
       возвращение {
           ограничить: «E»,
           контроллер: функция ($ scope, $ attrs, mySharedService) {
               $ scope. $ on ('handleBroadcast', function () {
                   $ scope.message = 'Directive:' + mySharedService.message;
               });
           },
           заменить: правда,
           шаблон: '<input>'
       };
   });

Затем вы можете использовать эту пользовательскую директиву, вот так.

1
<my-component ng-model=»message»></my-component>

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

Бонус: Тестирование

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

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

AngularJS написан полностью с нуля, чтобы быть тестируемым. Он даже поставляется с комплексной настройкой бегунка и модульного тестирования. Если вы хотите увидеть это в действии, посмотрите проект angular-seed по адресу https://github.com/angular/angular-seed .

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

AngularJS Essentials

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

Вывод

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

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

Дайте мне знать, что вы думаете!

36
Share: