Русский

Учебник по AngularJS

Приложения AngularJS

AngularJS и Leaflet: Начальный гид

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

AngularJS - Leaflet Application

Что такое AngularJS и Leaflet?

Прежде чем погружаться в код, давайте разберемся, что представляют собой эти технологии:

AngularJS

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

Leaflet

Leaflet - это开源овая библиотека на JavaScript для интерактивных карт,友好ных для мобильных устройств. Это похоже на Google Maps, но вы становитесь боссом и решаете, как будет выглядеть и работать ваша карта!

Теперь, когда мы ourselves с introductions, давайте наденем рабочие перчатки и начнем создавать нашу собственнуюкарту приложение!

Настройка нашего проекта

Сначала нам нужно настроить наш проект. Не волнуйтесь, это проще, чем собирать мебель IKEA!

Шаг 1: Создание HTML файла

Создайте новый файл под названием index.html и вставьте следующий код:

<!DOCTYPE html>
<html ng-app="leafletApp">
<head>
<title>Мое потрясающее приложение с картой</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<style>
#map { height: 400px; }
</style>
</head>
<body ng-controller="MapController">
<div id="map"></div>
<script src="app.js"></script>
</body>
</html>

Этот HTML файл resembles как скелет нашего приложения. Он включает все необходимые библиотеки (AngularJS и Leaflet) и настраивает div, где будет жить наша карта.

Шаг 2: Создание JavaScript файла

Теперь создадим наш файл app.js. Вот где happens магия!

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

app.controller('MapController', function($scope) {
var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
.bindPopup('Красивая CSS3 popup.<br> Легко настраивается.')
.openPopup();
});

Давайте разберем это:

  1. Мы создаем AngularJS модуль под названием 'leafletApp'.
  2. Мы определяем контроллер под названием 'MapController'.
  3. Внутри контроллера мы инициализируем карту Leaflet, устанавливаем ее вид на Лондон (вы можете изменить это на любые координаты по вашему усмотрению) и добавляем слой тилей из OpenStreetMap.
  4. Наконец, мы добавляем метку на нашу карту с popup.

Понимание кода

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

HTML файл

<html ng-app="leafletApp">

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

<body ng-controller="MapController">

Эта строка связывает наш MapController с телом нашего HTML. Это означает, что вся логика, которую мы определим в нашем MapController, будет доступна внутри тела.

<div id="map"></div>

Здесь будет отрисовываться наша карта. Leaflet использует этот div для создания карты.

JavaScript файл

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

Эта строка создает новый AngularJS модуль. Представьте модуль как контейнер для разных частей вашего приложения.

app.controller('MapController', function($scope) {
// Логика контроллера здесь
});

Здесь мы определяем наш MapController. $scope - это особый объект, который acts как мост между контроллером и видом (нашим HTML).

var map = L.map('map').setView([51.505, -0.09], 13);

Эта строка инициализирует нашу карту Leaflet. 'map' - это id нашего div, [51.505, -0.09] - это координаты центра нашей карты (широта и долгота), и 13 - это уровень увеличения.

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);

Этот код добавляет слой тилей к нашей карте. Слои тилей - это собственно map изображения. Здесь мы используем тайлы OpenStreetMap.

L.marker([51.5, -0.09]).addTo(map)
.bindPopup('Красивая CSS3 popup.<br> Легко настраивается.')
.openPopup();

Этот код добавляет метку на нашу карту на указанные координаты, привязывает к ней popup и открывает popup.

Добавление интерактивности

Теперь, когда у нас есть базовая карта, давайте сделаем ее более интерактивной! Мы добавим функцию, которая позволяет пользователям clicking на карте, чтобы добавлять новые метки.

Обновите ваш файл app.js следующим образом:

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

app.controller('MapController', function($scope) {
var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);

$scope.markers = [];

map.on('click', function(e) {
var marker = L.marker(e.latlng).addTo(map);
$scope.markers.push(marker);
$scope.$apply();
});

$scope.removeMarkers = function() {
$scope.markers.forEach(function(marker) {
map.removeLayer(marker);
});
$scope.markers = [];
};
});

Теперь обновите ваш index.html, чтобы включить кнопку для удаления меток:

<body ng-controller="MapController">
<div id="map"></div>
<button ng-click="removeMarkers()">Удалить все метки</button>
<script src="app.js"></script>
</body>

Давайте разберем, что мы добавили:

  1. Мы создаем массив $scope.markers для отслеживания всех наших меток.
  2. Мы добавляем обработчик событий к нашей карте, который создает новую метку каждый раз, когда пользователь clicking на карте.
  3. Мы создаем функцию removeMarkers, которая удаляет все метки с карты и cleared наш массив меток.
  4. Мы добавляем кнопку в наш HTML, которая вызывает функцию removeMarkers при нажатии.

Заключение

Поздравления! Вы только что создали свое первое интерактивное приложение с картой, используя AngularJS и Leaflet. Вы узнали, как настроить базовую карту, добавлять метки и даже реализовывать пользовательские взаимодействия.

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

Credits: Image by storyset

Предыдущий учебник:
AngularJS - Таймерное приложение
Следующий учебник:
AngularJS - Приложение Last.fm