Введение в Angular.js

Сегодня мы начнём изучать известный фрэймворк Angular.js. Этот урок у нас будет вводным, и мы разберёмся, что такое Angular.js и как его использовать.


Angular.js - это MVC фрэймворк, который облегчает жизнь разработчикам, пишущим на языке JavaScript. Данный фрэймворк начал разрабатывать сотрудник фирмы Google в 2009 году, как свой персональный проект. Первая версия была выпущена в 2012 году и в ней использовался JQuery, но в дальнейшем от него отказались.Оффициальный сайт. Там вы можете найти исходный код, документацию, видео уроки и примеры.

Давайте теперь посмотрим на простой пример.

Добавить angular в проект можно несколькими способами:

  • Зайти на оффициальный сайт и нажать кнопку download, чтобы скачать библиотеку
  • Подключить через CDN
  • Пакетный менеджер (Например bower)

          
          bower install angular
          
        

Теперь подключим файл angular в главном файле:

  
    <!DOCTYPE html>
    <html lang="ru">
    <head>
      <meta charset="UTF-8">
      <title>Введение в Angular JS</title>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    </head>
    <body ng-app>
      {{3+5}}
    </body>
    </html>
  

Просто подключив библиотеку, она не начнёт свою работу. Её ещё нужно активировать. Для этого нужно добавить нестандартный атрибут ng-app. Все специальные теги и атрибуты html, поддерживаемые фрэймворком AngularJs, называются директивами.

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

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

Теперь рассмотрим более практический пример.

  
    <input type="text" ng-model="name">
    <p>Привет, {{name}}!</p>
  

Если вы запустите этот пример, то, каждый раз нажимая на клавиши, страница будет перерисовываться, и мы будем видеть динамический ввод. Т.е. значение будет браться из текстового поля с директивой ng-model и подставляться вместо фигурных скобок со значением name.

И ещё один пример

  
    <input type="checkbox" ng-model="ShowMyBlock">
    <div ng-show="ShowMyBlock">Текст, который появится сразу после того, как пользователь активирует checkbox.</div>
  

Здесь используется директива ng-show, которая в данном примере делает тоже самое что и пример с фигурными скобками

На чистом JavaScript у нас было бы намного больше строчек кода, но AngularJs избавляет нас от этого.

Поделитесь статьей со своими друзьями