ITVDN logo
Видеокурсы по
программированию

Доступ более чем к 7700 видеоурокам от $19.99

Подписка
ITVDN logo
Видеокурсы по
программированию

Доступ более чем к 7700 видеоурокам от $19.99

Подписка

Введение

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!

СТАТЬИ ПО СХОЖЕЙ ТЕМАТИКЕ
ВИДЕО КУРСЫ ПО СХОЖЕЙ ТЕМАТИКЕ
КОМЕНТАРИИ И ОБСУЖДЕНИЯ
ОЦЕНИТЕ ДАННЫЙ МАТЕРИАЛ

ПОДПИСКА НА ITVDN ВЫГОДА ДО 29.95$ НА ОБУЧЕНИЕ ПРЕСТИЖНЫМ ПРОФЕССИЯМ!

1 месяц19.99$
подписка

легкий старт в обучении

3 месяца49.99$
подписка

выгода от подписки до9.98$

6 месяцев89.99$
подписка

выгода от подписки до29.95$