Использование Angular для Single Page Applications (SPAs)

Venkata Koppaka, Scott Addie

В этой статье мы покажем вам, как создавать SPA ASP.NET приложения с помощью AngularJS.

Просмотрите или скачайте код.

Что такое AngularJS?

AngularJS - это современный JavaScript фреймворк от Google, который обычно используется для работы с Single Page Applications (SPA). AngularJS имеет открытый исходный код с лицензией MIT, а процесс по разработке AngularJS можно отследить на GitHub. Библиотека называется Angular, потому что HTML использует angular скобки.

AngularJS не управляет DOM, как jQuery, но он использует jQLite. AngularJS в основном используется на декларативных атрибутах HTML, которые можно добавлять к HTML тэгам. Вы можете увидеть AngularJS в браузере с помощью вебсайта Code School.

Начинаем

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

Установка

Есть несколько способов добавить в приложение AngularJS. Если вы создаете новое ASP.NET Core веб приложение в Visual Studio, то можете добавить AngularJS с помощью встроенного Bower. Просто откройте bower.json и добавьте запись к свойству dependencies:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
{
  "name": "ASP.NET",
  "private": true,
  "dependencies": {
    "bootstrap": "3.3.5",
    "jquery": "2.1.4",
    "jquery-validation": "1.14.0",
    "jquery-validation-unobtrusive": "3.2.4",
    "angular": "1.5.7",
    "angular-route": "1.5.7"
  }
}

При сохранении файла bower.json Angular будет установлен в папку проекта wwwroot/lib. Кроме того, он появится в папке Dependencies/Bower.

../_images/angular-solution-explorer.png

Далее, добавьте ссылку <script> внизу раздела <body> HTML страницы или файла _Layout.cshtml:

1
2
3
4
5
        <environment names="Development">
            <script src="~/lib/jquery/dist/jquery.js"></script>
            <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
            <script src="~/lib/angular/angular.js"></script>
        </environment>

Мы рекомендуем, чтобы при публикации использовались CDN. Вы можете ссылаться на Angular с разных CDN:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
        <environment names="Staging,Production">
            <script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"
                    asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                    asp-fallback-test="window.jQuery">
            </script>
            <script src="//ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/bootstrap.min.js"
                    asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                    asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal">
            </script>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"
                    asp-fallback-src="~/lib/angular/angular.min.js"
                    asp-fallback-test="window.angular">
            </script>
            <script src="~/js/site.min.js" asp-append-version="true"></script>
        </environment>

Когда у вас есть ссылка на файл angular.js, вы готовы использовать Angular на ваших веб страницах.

Ключевые компоненты

AngularJS включает в себя несколько основных компонентов, таких как directives, templates, repeaters, modules, controllers, components, component router и тд. Давайте посмотрим, как работают эти компоненты.

Директивы

AngularJS использует директивы, чтобы расширить HTML с помощью пользовательских атрибутов и элементов. Директивы AngularJS определяются через префиксы data-ng-* или ng-*. Есть два типа директив AngularJS:

  1. Простые директивы: Они являются частью фреймворка AngularJS.
  2. Пользовательские директивы: Вы определяете их сами.

Одной из простых директив, используемых во всех AngularJS приложениях, является директива ng-app, которая запускает AngularJS приложение. Эту директиву можно применить к тэгу <body> или к его дочернему элементу. Давайте рассмотрим пример. Допустим, у нас есть ASP.NET проект, и вы можете добавить HTML файл в папку wwwroot, или добавить новый метод действия контроллера и представление. В данном случае я добавил новый метод действия Directives в HomeController.cs. Нужное представление показано здесь:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
@{
    Layout = "";
}
<html>
<body ng-app>
    <h1>Directives</h1>
    {{2+2}}
    <script src="~/lib/angular/angular.js"></script>
</body>
</html>

Чтобы это пример был независим от других, я не использую здесь общий файл с версткой. У тэга body есть директива ng-app, что обозначает, что это AngularJS приложение. {{22}} - это выражение связывания данных Angular, о чем мы поговорим чуть позже. Вы увидите вот такой результат:

../_images/simple-directive.png

Еще одна простая директива AngularJS включает в себя:

ng-controller
Определяет, какой JavaScript контроллер связан с представлением.
ng-model
Определяет модель, с которой связаны значения свойств HTML элементов.
ng-init
Используется для инициализации приложения в форме выражения для текущей области видимости.
ng-if
Удаляет или пересоздает заданный HTML элемент в DOM, основываясь на том, верно ли условие.
ng-repeat
Повторяет данный блок HTML с определенным набором данных.
ng-show
Показывает или скрывает заданные HTML элементы, основываясь на предоставленном выражении.

Если вы хотите увидеть список простых директив AngularJS, посмотрите ` <https://docs.angularjs.org/api/ng/directive>`_.

Связывание данных

AngularJS поддерживает связывание данных, используя директиву ng-bind или синтаксис выражений для связывания данных, такой как {{expression}}. AngularJS поддерживает двухстороннее связывание данных, где данные модели синхронизируются с представлением. Любые изменения в представлении автоматически влияют на модель. А любые изменения в модели влияют на представление.

Создайте HTML файл или метод действия контроллера с представлением Databinding. Включите в представление следующий код:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
@{
    Layout = "";
}
<html>
<body ng-app>
    <h1>Databinding</h1>

    <div ng-init="firstName='John'; lastName='Doe';">
        <strong>First name:</strong> {{firstName}} <br />
        <strong>Last name:</strong> <span ng-bind="lastName" />
    </div>

    <script src="~/lib/angular/angular.js"></script>
</body>
</html>

Обратите внимание, что вы можете отобразить значения модели, используя директивы или связывание данных (ng-bind). Вот результат:

../_images/simple-databinding.png

Шаблоны

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

Давайте создадим новое представление и добавим в него следующее:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
@{
    Layout = "";
}
<html>
<body ng-app>
    <h1>Templates</h1>

    <div ng-init="personName='John Doe'">
        <input ng-model="personName" /> {{personName}}
    </div>

    <script src="~/lib/angular/angular.js"></script>
</body>
</html>

В шаблоне есть AngularJS директивы, как ng-app, ng-init, ng-model и синтаксис связывания данных для personName. Вот как выглядит это представление:

../_images/simple-templates-1.png

Если вы смените имя, набрав его в поле ввода, то текст динамически обновится, и вы увидите, как работает связывание данных.

../_images/simple-templates-2.png

Выражения

Выражения в AngularJS - это куски кода, прописанные внутри операторов с синтаксисом {{ expression }}. Данные этих выражений связаны с HTML так же, как директивы ng-bind. Разница между выражениями AngularJS и регулярными выражениями JavaScript состоит в том, что выражения AngularJS касаются объекта $scope.

Выражения AngularJS в примере ниже связывают personName и простое выражение JavaScript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
@{
    Layout = "";
}
<html>
<body ng-app>
    <h1>Expressions</h1>

    <div ng-init="personName='John Doe'">
        Person's name is: {{personName}} <br />
        Simple JavaScript calculation of 1 + 2: {{1+2}}
    </div>

    <script src="~/lib/angular/angular.js"></script>
</body>
</html>

При просмотре в браузере отображаются данные personName и результаты вычислений:

../_images/simple-expressions.png

Повторение

Повторение в AngularJS делается с помощью простой директивы ng-repeat. Директива ng-repeat проводит заданный HTML элемент в представлении по нужному массиву. Повторение можно использовать со строками или объектами. Вот простой пример повторения по массиву строк:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
@{
    Layout = "";
}
<html>
<body ng-app>
    <h1>Repeaters</h1>

    <div ng-init="names=['John Doe', 'Mary Jane', 'Bob Parker']">
        <ul>
            <li ng-repeat="name in names">
                {{name}}
            </li>
        </ul>
    </div>

    <script src="~/lib/angular/angular.js"></script>
</body>
</html>

Директива повторения выдает результат в виде списка элементов:

../_images/repeater.png

Вот пример повторения по списку объектов. Директива ng-init определяет массив names, где каждый элемент является объектом, содержащим имя и фамилию. В результате использования ng-repeat мы получаем каждый элемент из массива.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
@{
    Layout = "";
}
<html>
<body ng-app>
    <h1>Repeaters2</h1>

    <div ng-init="names=[
		{firstName:'John', lastName:'Doe'},
		{firstName:'Mary', lastName:'Jane'},
		{firstName:'Bob', lastName:'Parker'}]">
        <ul>
            <li ng-repeat="name in names">
                {{name.firstName + ' ' + name.lastName}}
            </li>
        </ul>
    </div>

    <script src="~/lib/angular/angular.js"></script>
</body>
</html>

Результат будет таким же, как и в предыдущем примере.

В Angular есть дополнительные директивы, которые управляют поведением, в зависимости от того, где выполняется цикл.

$index
Используйте $index в цикле ng-repeat, чтобы определить, на какой позиции находится цикл.
$even и $odd
Используйте $even в цикле ng-repeat, чтобы определить, является ли текущий индекс в цикле четной строкой. А $odd используется для определения нечетных строк.
$first и $last
Используйте $first в цикле ng-repeat, чтобы определить, является ли текущий индекс в цикле первой строкой. А $last используется для определения последней строки.

В примере ниже представлены $index, $even, $odd, $first и $last:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@{
    Layout = "";
}
<html>
<body ng-app>
    <h1>Repeaters2</h1>

    <div ng-init="names=[
		{firstName:'John', lastName:'Doe'},
		{firstName:'Mary', lastName:'Jane'},
		{firstName:'Bob', lastName:'Parker'}]">
        <ul>
            <li ng-repeat="name in names">
                {{name.firstName + ' ' + name.lastName}} at index {{$index}}
                <span ng-show="{{$first}}">, the first position</span>
                <span ng-show="{{$last}}">, the last position</span>
                <span ng-show="{{$odd}}">,which is odd-numbered.</span>
                <span ng-show="{{$even}}">,which is even-numbered.</span>
            </li>
        </ul>
    </div>

    <script src="~/lib/angular/angular.js"></script>
</body>
</html>

Вот результат:

../_images/repeaters2.png

$scope

$scope - это JavaScript объект, который связывает представление и контроллер. Представление в AngularJS знает только о значениях, прикрепленных к объекту $scope в контроллере.

Примечание

В MVVM объект $scope AngularJS часто определяется как ViewModel. Команда AngularJS относится к $scope как к Data-Model. См..

Далее представлен пример, где показано, как устанавливаются свойства для $scope внутри отдельного JavaScript файла, scope.js:

1
2
3
4
var personApp = angular.module('personApp', []);
personApp.controller('personController', ['$scope', function ($scope) {
    $scope.name = 'Mary Jane';
}]);

Обратите внимание на параметр $scope, переданный контроллеру, на строке 2. Об этом объекте знает представление. В строке 3 мы настраиваем свойство “name” на “Mary Jane”.

А что случится, если в представлении не найдено конкретное свойство? В представлении ниже мы ссылаемся на свойства “name” и “age”:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
@{
    Layout = "";
}
<html>
<body ng-app="personApp">
    <h1>Scope</h1>

    <div ng-controller="personController">
        <strong>Name:</strong> {{name}} <br />
        <strong>Missing Property (age):</strong> {{age}}
    </div>

    <script src="~/lib/angular/angular.js"></script>
    <script src="~/app/scope.js"></script>
</body>
</html>

На строке 9 мы просим Angular показать свойство “name”, используя синтаксис выражений. На строке 10 мы ссылаемся на “age”, а свойства не существует. name установлено на “Mary Jane”, а для age ничего нет. Отсутствующие свойства игнорируются.

../_images/scope.png

Модули

Модуль в AngularJS - это коллекция контроллеров, сервисов, директив и тд. Функция angular.module() используется для создания, регистрации и извлечения модулей в AngularJS. Все модули являются сторонними библиотеками, и они должны быть зарегистрированы с помощью функции angular.module().

Далее представлен пример того, как создать в AngularJS новый модуль. Первый параметр - это имя модуля. Второй параметр определяет зависимости от других модулей. Далее я покажу, как передать эти зависимости в метод angular.module().

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

Используйте директиву ng-app, чтобы представить на странице модуль AngularJS. Чтобы использовать модуль, присвойте его имя, в данном случае personApp, директиве ng-app.

<body ng-app="personApp">

Контроллеры

Контроллеры в AngularJS являются точкой входа в коде. Функция <module name>.controller() используется для создания и регистрации контроллеров в AngularJS. Директива ng-controller представляет AngularJS контроллер на HTML странице. Роль контроллера в Angular состоит в том, чтобы настроить состояние $scope. Контроллеры не используются для управления DOM.

В коде ниже мы регистрируем новый контроллер. Переменная personApp ссылается на модуль Angular, определенный на строке 2.

1
2
3
4
5
6
7
8
// module
var personApp = angular.module('personApp', []);

// controller
personApp.controller('personController', function ($scope) {
    $scope.firstName = "Mary";
    $scope.lastName = "Jane"
});

Директива ng-controller присваивает имя контроллера представлению:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
@{
    Layout = "";
}
<html>
<body ng-app="personApp">
    <h1>Controllers</h1>

    <div ng-controller="personController">
        <strong>First Name:</strong> {{firstName}} <br />
        <strong>Last Name:</strong> {{lastName}}
    </div>

    <script src="~/lib/angular/angular.js"></script>
    <script src="~/app/controllers.js"></script>
</body>
</html>

На странице показано “Mary” и “Jane”, что соответствует свойствам firstName и lastName, прикрепленным к объекту $scope:

../_images/controllers.png

Components

Components в Angular 1.5.x разрешают инкапсуляцию и возможность создания отдельных HTML элементов. В Angular 1.4.x этого можно было достичь с помощью метода .directive().

При использовании метода .component() разработка упрощается, а вы получаете функционал директивы и контроллера. Функция <module name>.component() используется для создания и регистрации компонентов в AngularJS.

Ниже представлен код для регистрации новых компонентов. Переменная personApp ссылается на Angular модуль, который определен в строке 2.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
// module
var personApp = angular.module('personApp', []);

// controller
var PersonController = function(){
	
	var vm = this;
	vm.firstName = "Aftab";
	vm.lastName = "Ansari";
}

// component
personApp.component('personComponent', {
    templateUrl:'/app/partials/personcomponent.html',
	controller:PersonController,
	controllerAs:'vm'
	
});

Представление, где мы отображаем пользовательский HTML элемент.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
@{
    Layout = "";
}
<html>
<body ng-app="personApp">
    <h1>Components</h1>

	<person-component></person-component>
   
    <script src="~/lib/angular/angular.js"></script>
    <script src="~/app/components.js"></script>
</body>
</html>

Шаблон, используемый компонентом:

1
2
3
4
<div>
    <strong>First Name:</strong> {{vm.firstName}} <br />
    <strong>Last Name:</strong> {{vm.lastName}}
</div>

На странице показаны “Aftab” и “Ansari”, которые соответствуют свойствам firstName и lastName объекта vm:

../_images/components.png

Сервисы

Сервисы в AngularJS обычно используются для общего кода, хранящегося в файле, который можно использовать везде в Angular приложении. Экземпляры сервиса не создаются, пока не начинают использоваться компоненты, которые зависят от этого сервиса. Примером сервисов являются фабрики в приложениях AngularJS. Фабрики создаются с помощью функции myApp.factory(), где myApp - это модуль.

Вот как фабрики используются в AngularJS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
personApp.factory('personFactory', function () {
    function getName() {
        return "Mary Jane";
    }

    var service = {
        getName: getName
    };

    return service;
});

Чтобы вызвать эту фабрику из контроллера, передайте personFactory в качестве параметра функции controller:

personApp.controller('personController', function($scope,personFactory) {
  $scope.name = personFactory.getName();
});

Использование сервисов с REST

Далее представлен пример, где сервисы используются для работы с ASP.NET Core Web API. Здесь мы получаем из Web API данные и отображаем их в представлении. Давайте начнем с представления:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
@{
    Layout = "";
}
<html>
<body ng-app="PersonsApp">
    <h1>People</h1>

    <div ng-controller="personController">
        <ul>
            <li ng-repeat="person in people">
                <h2>{{person.FirstName}} {{person.LastName}}</h2>
            </li>
        </ul>
    </div>

    <script src="~/lib/angular/angular.js"></script>
    <script src="~/app/personApp.js"></script>
    <script src="~/app/personFactory.js"></script>
    <script src="~/app/personController.js"></script>
</body>
</html>

В этом представлении у нас есть Angular модуль PersonsApp и контроллер personController. Мы используем ng-repeat, чтобы пройти циклом по указанному списку. На строках 17-19 мы ссылаемся на три пользовательских JavaScript файла.

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

1
2
3
4
(function () {
    'use strict';
    var app = angular.module('PersonsApp', []);
})();

Сейчас мы рассмотрим personFactory.js. Мы вызываем метод factory, чтобы создать фабрику. На строке 12 представлен встроенный Angular сервис $http, извлекающий информацию из веб сервиса.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
(function () {
    'use strict';

    var serviceId = 'personFactory';

    angular.module('PersonsApp').factory(serviceId,
        ['$http', personFactory]);

    function personFactory($http) {

        function getPeople() {
            return $http.get('/api/people');
        }

        var service = {
            getPeople: getPeople
        };

        return service;
    }
})();

В personController.js мы вызываем метод controller для создания контроллера. Свойству объекта $scope people присваиваются данные, возвращаемые из personFactory (строка 13).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
(function () {
    'use strict';

    var controllerId = 'personController';

    angular.module('PersonsApp').controller(controllerId,
        ['$scope', 'personFactory', personController]);

    function personController($scope, personFactory) {
        $scope.people = [];

        personFactory.getPeople().success(function (data) {
            $scope.people = data;
        }).error(function (error) {
            // log errors
        });
    }
})();

Давайте взглянем на Web API и модель, связанную с ним. Модель Person является POCO со свойствами Id, FirstName и LastName:

1
2
3
4
5
6
7
8
9
namespace AngularSample.Models
{
    public class Person
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
}

Контроллер Person возвращает список объектов Person в формате JSON:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
using AngularSample.Models;
using Microsoft.AspNet.Mvc;
using System.Collections.Generic;

namespace AngularSample.Controllers.Api
{
    public class PersonController : Controller
    {
        [Route("/api/people")]
        public JsonResult GetPeople()
        {
            var people = new List<Person>()
            {
                new Person { Id = 1, FirstName = "John", LastName = "Doe" },
                new Person { Id = 1, FirstName = "Mary", LastName = "Jane" },
                new Person { Id = 1, FirstName = "Bob", LastName = "Parker" }
            };

            return Json(people);
        }
    }
}

Вот как выглядит наше приложение:

../_images/rest-bound.png

Вы можете просмотреть структуру приложения на GitHub.

Примечание

Также просмотрите Руководство по стилям Angular

Примечание

Чтобы легко создать AngularJS модуль, контроллер, фабрику, директиву, просмотрите набор шаблонов SideWaffle для Visual Studio. Сайед Хашими является главным инженером в подразделении по разработке Visual Studio Web на Microsoft, и шаблоны SideWaffle считаются золотым стандартом. На данный момент SideWaffle доступны для Visual Studio 2012, 2013 и 2015.

Роутинг и несколько представлений

В AngularJS есть встроенный провайдер для обработки навигации SPA (Single Page Application). Для работы с роутингом в AngularJS вам нужно добавить библиотеку angular-route с помощью Bower.

После установки пакета добавьте в представление ссылку script (angular-route.js).

Теперь давайте добавим в наше приложение навигацию. Во-первых, нам нужно сделать копию приложения, создав новое действие PeopleController Spa и соответствующее представление Spa.cshtml, скопировав Index.cshtml из папки People. Добавляем ссылку script в angular-route (см. строку 11). Также добавляем div, у которого есть директива ng-view (строка 6), в качестве заменителя, где будут храниться представления. Мы будем использовать несколько дополнительных .js файлов, на которые мы будем ссылаться на строках 13-16.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
@{
    Layout = "";
}
<html>
<body ng-app="personApp">
    <div ng-view>

    </div>

    <script src="~/lib/angular/angular.js"></script>
    <script src="~/lib/angular-route/angular-route.js"></script>

    <script src="~/app/personModule.js"></script>
    <script src="~/app/personRoutes.js"></script>
    <script src="~/app/personListController.js"></script>
    <script src="~/app/personDetailController.js"></script>
</body>
</html>

Давайте взглянем на файл personModule.js, чтобы увидеть, как создать экземпляр модуля с роутингом. В модуль мы передаем ngRoute в качестве библиотеки. В нашем приложении этот модуль обрабатывает роутинг.

1
var personApp = angular.module('personApp', ['ngRoute']);

В файле personRoutes.js определены роуты в зависимости от провайдера. На строках 4-7 определена навигация, где говорится, что запрашивается URL с /persons. Мы используем шаблон partials/personlist с помощью personListController. Строки 8-11 указывают на страницу с параметром роута personId. Если URL не соответствует ни одному из паттернов, Angular возвращается к представлению /persons.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
personApp.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider.
            when('/persons', {
                templateUrl: '/app/partials/personlist.html',
                controller: 'personListController'
            }).
            when('/persons/:personId', {
                templateUrl: '/app/partials/persondetail.html',
                controller: 'personDetailController'
            }).
            otherwise({
                redirectTo: '/persons'
            })
    }
]);

Файл personlist.html - это частичное представление, содержащее только HTML, необходимый для отображения списка людей.

1
2
3
4
<div>
    <h1>PERSONS PAGE</h1>
    <span ng-bind="message"/>
</div>

Контроллер определяется с помощью функции controller в personListController.js.

1
2
3
personApp.controller('personListController', function ($scope) {
    $scope.message = "You are on the Persons List Page.";
})

Если мы запустим это приложение и перейдем к people/spa#/persons, то увидим следующее:

../_images/spa-persons.png

Если мы перейдем, например, к people/spa#/persons/2, то увидим частичное представление:

../_images/spa-persons-2.png

См. GitHub.

Обработчики событий

В AngularJS есть несколько директив, которые добавляют функционал по обработке событий в элементы input в HTML DOM. Вот список событийных директив, встроенных в AngularJS.

  • ng-click
  • ng-dbl-click
  • ng-mousedown
  • ng-mouseup
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-keydown
  • ng-keyup
  • ng-keypress
  • ng-change

Примечание

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

давайте посмотрим, как работает ng-click. Создаем новый JavaScript файл с именем eventHandlerController.js и добавляем в него следующее:

1
2
3
4
5
6
7
8
personApp.controller('eventHandlerController', function ($scope) {
    $scope.firstName = 'Mary';
    $scope.lastName = 'Jane';

    $scope.sayName = function () {
        alert('Welcome, ' + $scope.firstName + ' ' + $scope.lastName);
    }
});

Обратите внимание на новую функцию sayName в eventHandlerController на строке 5. Она показывает нам сообщение с приветствием.

Представление связывает функцию контроллера с AngularJS событием. На строке 9 мы прописываем кнопку, к которой применяется директива ng-click. Она вызывает функцию sayName, прикрепленную к объекту $scope, который передается в это представление.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
@{
    Layout = "";
}
<html>
<body ng-app="personApp">
    <div ng-controller="eventHandlerController">
        <strong>First Name:</strong> {{firstName}} <br />
        <strong>Last Name:</strong> {{lastName}} <br />
        <input ng-click="sayName()" type="button" value="Say Name" />
    </div>
    <script src="~/lib/angular/angular.js"></script>
    <script src="~/lib/angular-route/angular-route.js"></script>

    <script src="~/app/personModule.js"></script>
    <script src="~/app/eventHandlerController.js"></script>
</body>
</html>

При нажатии кнопки функция sayName вызывается автоматически.

../_images/events.png

См. вебсайт.

Поделись хорошей новостью с друзьями!
Следи за новостями!