Основы AngularJS на практике - Блог ITVDN
ITVDN: курсы программирования
Видеокурсы по
программированию

    Выбери свою IT специальность

    Начать бесплатно

    Выбери свою IT специальность

    Начать бесплатно

      Основы AngularJS на практике

      Введение

      AngularJS – фреймворк-библиотека Javascript, разработанная для создания одностраничных приложений на основе MVC (Model-View-Controller) шаблона.

      Будем осваивать данную технологию на практике.


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

      тег с данным кодом:

      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">

      script>

      Следующим шагом мы явно укажем на то, что наша страница является AngularJS приложением. Нужно добавить ng-app директиву, которой мы обозначим корневой элемент приложения. Зачастую таким элементом выступает тег или же тег . Добавим эту директиву к : 

      <!DOCTYPE html>

      <html ng-app="">

      <head>

          <title>title>

          <meta charset="utf-8">

          <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">

          script>

      head>

      <body>

      body>

      html>

      Проверим,  все ли работает, добавив небольшое выражение для подсчета произведения чисел 123 и 45. В AngularJs все выражения записываются в двойных скобках. Добавим в параграф со следующим содержимым:

      <p>Результат произведение чисел 123 и 45 равен : {{ 123 * 45 }}p>

      Запустим в браузере: 

      Окно браузера

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

      AngularJS позволяет разработчику легко взаимодействовать с пользовательским вводом. Для этого есть соответствующая директива ng-model, которая связывает значения HTML элементов контроля (teaxtarea, input etc.) с приложением. Использовать эти данные поможет директива ng-bind, добавив эти данные во View (элемент MVC) и отобразив их на странице.

      Применим полученные знания на практике. В созданный ранее шаблон добавим поле для ввода <input> с директивой ng-model и параграф для вывода данных c директивой ng-bind.

      Код странички:

      <!DOCTYPE html>

      <html ng-app="">

      <head>

          <title>title>

          <meta charset="utf-8">

          <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">

          script>

      head>

      <body>

          <p>Ввведте свое имя:p>

          <input type="text" ng-model="yourName">

          <p>Здравствуй, <span ng-bind="yourName">span>p>

      body>

      html>

      Откроем в браузере:

      Браузер

      Теперь попробуйте ввести свое имя в поле для ввода.

      Тестирование примера

      Давайте добавим в данный пример дефолтное значение имени, к примеру Анна. Сделаем это, конечно же, с помощью директивы ng-init, которая позволяет инициализировать любую переменную AngularJS приложения.

      В строку  добавим директиву ng-init.

      <input type="text" ng-model="yourName" ng-init="yourName='Aнна'">

      Посмотрим изменения в браузере:

      Просмотр изменений в браузере

      Теперь мы имеем значение по дефолту – Анна, но все так же можем изменять его:

      Просмотр изменений

      Вывод данных в этом примере можно сделать еще одним способом, а именно, использовав выражение. Заменим на {{yourName}}.

      <p>Здравствуй, {{ yourName }}p>

      Открыв страницу, мы не увидим абсолютно никаких изменений, а все потому, что выражения в AngularJS связывают данные со страничкой точно так же, как и ng-bind директива.

      Как упоминалось в статье ранее, AngularJS строит приложения на основе MVC. Часть модель – представление (Model - View) определяется с помощью директивы ng-app. Контроллер в свою очередь определяется директивой ng-controller.

      Рассмотрим пример с использованием контроллера страницы.

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

      К созданному ранее шаблону добавим контроллер, а так же установим имя для приложения. В тег внесем следующие изменения:

      <html ng-app="firstApp" ng-controller="firstController">

      Далее добавим с типом text для введения имени гостя и еще один с типом submit для добавления гостя в список. Также добавим

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

      <!DOCTYPE html>

      <html>

      <head>

          <title>title>

          <meta type="utf-8">

          <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">script>

      head>

      <body ng-app="firsApp" ng-controller="firstController">

          <h2>Мои гости:h2>

          <form ng-submit="addGuest()">

              <input type="text" ng-model="guestsInput" size="50" placeholder="Введите имя гостя">

              <input type="submit" value="Добавить гостя">

          form>

          br>

          <div ng-repeat="guest in listOfGests">

              <input type="checkbox" ng-model="guest.come"> <span ng-bind="guest.guestName">span>

          div>

          <p><button ng-click="remove()">Удалить гостя button>p>

      body>

      html>

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

      Скопируйте и добавьте после закрывающегося тега параграфа с кнопкой

      <p><button ng-click="remove()">Удалить гостя button>p>

      следующий код:

      <script>

              var app = angular.module('firsApp', []);

              app.controller('firstController', function($scope) {

                  $scope.listOfGests = [{guestName:'Я любимый', come:false}];

                  var countOfGuests = 1;

                  $scope.addGuest = function() {

                      $scope.listOfGests.push({guestName:$scope.guestsInput, come:false});

                      $scope.guestsInput = "";

                      countOfGuests++;

                      checkNumberOfGuests();

                  };

                  $scope.remove = function() {

                      var oldGuests = $scope.listOfGests;

                      $scope.listOfGests = [];

                      angular.forEach(oldGuests, function(guest) {

                          if (!guest.come) $scope.listOfGests.push(guest);

                          countOfGuests--;

                      });

                      checkNumberOfGuests()

                  };

                  function checkNumberOfGuests(){

                      if(countOfGuests <= 2){

                          alert("Маленькая вечеринка тоже не плохо! Не печалься! Лучших друзей не бывает много!");

                      }else if(countOfGuests >= 9){

                          alert("Праздник?! ВЕЧЕРИНИЩЕ!");

                      }else{

                          alert("Узкий круг самых близких, это всегда хорошо!");

                      }

                  } script>

      В данном коде у нас есть три функции: добавление и удаление гостя и проверка количества гостей.

      В функции добавления мы берем введенные данные guestsInput и добавляем их в лист listOfGests. Устанавливаем значение чекбокса в false (в нашем случае, это значит, что человек придет / если значение true, то есть галочка стоит - значит не придет), после чего очищаем поле ввода. Далее увеличиваем счетчик гостей и вызываем функцию проверки их количества.

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

      Функция проверки количества гостей очень проста, поэтому подробнее мы ее разбирать не будем.

      Давайте откроем пример в браузере и поработаем с ним:

      Пример в браузере

      Добавим несколько гостей:

      Добавление гостей

      С изменением количества гостей содержимое оповещений будет меняться.

      Содержимое браузера

      Когда вы добавите больше 9 друзей, тогда увидите такое оповещение:

      Полный список друзей

      Поздравляем, вот Вы и создали свое первое одностраничное приложение с помощью AngularJS!

      КОММЕНТАРИИ И ОБСУЖДЕНИЯ

      Пакеты подписки с доступом ко всем курсам и сервисам

      Стартовый
      • Все видеокурсы на 3 месяца
      • Тестирование по 10 курсам
      • Проверка 5 домашних заданий
      • Консультация с тренером 30 мин
      Базовый
      • Все видеокурсы на 6 месяцев
      • Тестирование по 16 курсам
      • Проверка 10 домашних заданий
      • Консультация с тренером 60 мин
      Премиум
      • Все видеокурсы на 1 год
      • Тестирование по 24 курсам
      • Проверка 20 домашних заданий
      • Консультация с тренером 120 мин
      Notification success
      Мы используем cookie-файлы, чтобы сделать взаимодействие с нашими веб-сайтами и услугами простым и значимым.