AngularJS - Приложение для прогноза погоды

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

AngularJS - Weather Application

Что такое AngularJS?

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

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

Шаг 1: Включить AngularJS

Для начала нам нужно включить AngularJS в наш проект. Мы сделаем это, добавив тег скрипта в наш HTML-файл:

<!DOCTYPE html>
<html ng-app="weatherApp">
<head>
<title>Мое приложение для погоды</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- Наше приложение будет здесь -->
<script src="app.js"></script>
</body>
</html>

Смотрите на ng-app="weatherApp" в теге <html>? Это говорит AngularJS: "Эй, это место, где живет наше приложение!"

Шаг 2: Создать наше приложение

Теперь создадим наш файл app.js:

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

Эта строка как будто говорит: "Привет, AngularJS! Пожалуйста, создайте новое приложение под названием 'weatherApp'." Просто, правда?

Создание нашего приложения для прогноза погоды

Шаг 3: Создать контроллер

В AngularJS контроллеры - это место, где мы放置им поведение нашего приложения. Давайте создадим один:

app.controller('WeatherController', function($scope, $http) {
$scope.weather = {};

$scope.getWeather = function() {
var apiKey = 'YOUR_API_KEY';
var city = $scope.city;
var url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

$http.get(url)
.then(function(response) {
$scope.weather = response.data;
});
};
});

Ого, это много! Давайте разберем это:

Мы создаем контроллер под названием 'WeatherController'.
$scope - это то, как мы передаем данные между нашим контроллером и представлением.
$http - это способ AngularJS делать HTTP-запросы.
Мы создаем функцию getWeather, которая будет запрашивать данные о погоде при вызове.

Шаг 4: Создать наше представление

Теперь обновим наш HTML, чтобы использовать наш контроллер:

<body ng-controller="WeatherController">
<h1>Приложение для прогноза погоды</h1>
<input type="text" ng-model="city" placeholder="Введите имя города">
<button ng-click="getWeather()">Получить погоду</button>

<div ng-if="weather.main">
<h2>Погода в {{weather.name}}</h2>
<p>Температура: {{weather.main.temp}}°C</p>
<p>Описание: {{weather.weather[0].description}}</p>
</div>
</body>

Вот что происходит:

ng-controller="WeatherController" connects our view to our controller.
ng-model="city" связывает ввод с переменной $scope.city.
ng-click="getWeather()" вызывает функцию getWeather при нажатии на кнопку.
ng-if="weather.main" отображает информацию о погоде только если мы получили данные.
{{}} - это то, как мы отображаем данные из $scope в представлении.

Улучшение внешнего вида

Шаг 5: Добавить немного стиля

Давайте добавим немного CSS, чтобы наше приложение выглядело хорошо:

<style>
body {
font-family: Arial, sans-serif;
max-width: 500px;
margin: 0 auto;
padding: 20px;
}
input, button {
font-size: 16px;
padding: 5px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>

Собрать все вместе

Вот наш полный файл index.html:

<!DOCTYPE html>
<html ng-app="weatherApp">
<head>
<title>Мое приложение для погоды</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style>
/* CSS из шага 5 здесь */
</style>
</head>
<body ng-controller="WeatherController">
<h1>Приложение для прогноза погоды</h1>
<input type="text" ng-model="city" placeholder="Введите имя города">
<button ng-click="getWeather()">Получить погоду</button>

<div ng-if="weather.main">
<h2>Погода в {{weather.name}}</h2>
<p>Температура: {{weather.main.temp}}°C</p>
<p>Описание: {{weather.weather[0].description}}</p>
</div>
<script src="app.js"></script>
</body>
</html>

А вот наш полный файл app.js:

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

app.controller('WeatherController', function($scope, $http) {
$scope.weather = {};

$scope.getWeather = function() {
var apiKey = 'YOUR_API_KEY';
var city = $scope.city;
var url = `http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;

$http.get(url)
.then(function(response) {
$scope.weather = response.data;
});
};
});

Заключение

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

Вот таблица, резюмирующая основные концепции AngularJS, которые мы использовали:

Концепция	Описание
ng-app	Определяет корневой элемент приложения AngularJS
ng-controller	Определяет контроллер для участка приложения
ng-model	Связывает ввод с переменной в контексте
ng-click	Определяет событие клика
ng-if	Условно отображает элемент
{{}}	Отображает данные из контекста в представлении
$scope	Передает данные между контроллером и представлением
$http	Делает HTTP-запросы

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

Credits: Image by storyset

Предыдущий учебник:

AngularJS - Sharing Приложения

Следующий учебник:

AngularJS - Таймерное приложение