AngularJS - Weather Application

Hello there, future coding superstars! Today, we're going to embark on an exciting journey to create a weather application using AngularJS. Don't worry if you've never written a line of code before – I'll be your friendly guide through this adventure, just like I've been for countless students over my years of teaching. So, let's roll up our sleeves and dive in!

What is AngularJS?

Before we start building our weather app, let's talk about AngularJS. Imagine you're building a house. AngularJS is like the framework of that house – it provides structure and support for your web application. It's a powerful JavaScript framework that helps us create dynamic, single-page applications with ease.

Setting Up Our Project

Step 1: Include AngularJS

First things first, we need to include AngularJS in our project. We'll do this by adding a script tag to our HTML file:

<!DOCTYPE html>
<html ng-app="weatherApp">
<head>
    <title>My Weather App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
    <!-- Our app will go here -->
    <script src="app.js"></script>
</body>
</html>

See that ng-app="weatherApp" in the <html> tag? That's telling AngularJS, "Hey, this is where our app lives!"

Step 2: Create Our App

Now, let's create our app.js file:

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

This line is like saying, "Hello, AngularJS! Please create a new app called 'weatherApp'." Simple, right?

Building Our Weather App

Step 3: Create a Controller

In AngularJS, controllers are where we put our app's behavior. Let's create one:

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;
            });
    };
});

Wow, that's a lot! Let's break it down:

We're creating a controller called 'WeatherController'.
$scope is how we pass data between our controller and view.
$http is AngularJS's way of making HTTP requests.
We're creating a function called getWeather that will fetch weather data when called.

Step 4: Create Our View

Now, let's update our HTML to use our controller:

<body ng-controller="WeatherController">
    <h1>Weather App</h1>
    <input type="text" ng-model="city" placeholder="Enter city name">
    <button ng-click="getWeather()">Get Weather</button>

    <div ng-if="weather.main">
        <h2>Weather in {{weather.name}}</h2>
        <p>Temperature: {{weather.main.temp}}°C</p>
        <p>Description: {{weather.weather[0].description}}</p>
    </div>
</body>

Here's what's happening:

ng-controller="WeatherController" connects our view to our controller.
ng-model="city" binds the input to our $scope.city variable.
ng-click="getWeather()" calls our getWeather function when the button is clicked.
ng-if="weather.main" only shows the weather info if we've fetched data.
{{}} is how we display data from our $scope in the view.

Making It Pretty

Step 5: Add Some Style

Let's add some CSS to make our app look nice:

<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>

Putting It All Together

Here's our complete index.html file:

<!DOCTYPE html>
<html ng-app="weatherApp">
<head>
    <title>My Weather App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <style>
        /* CSS from Step 5 goes here */
    </style>
</head>
<body ng-controller="WeatherController">
    <h1>Weather App</h1>
    <input type="text" ng-model="city" placeholder="Enter city name">
    <button ng-click="getWeather()">Get Weather</button>

    <div ng-if="weather.main">
        <h2>Weather in {{weather.name}}</h2>
        <p>Temperature: {{weather.main.temp}}°C</p>
        <p>Description: {{weather.weather[0].description}}</p>
    </div>
    <script src="app.js"></script>
</body>
</html>

And here's our complete app.js file:

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;
            });
    };
});

Conclusion

And there you have it, folks! We've built a simple but functional weather app using AngularJS. Remember, learning to code is like learning a new language – it takes practice and patience. Don't be discouraged if you don't understand everything right away. Keep experimenting, keep coding, and most importantly, keep having fun!

Here's a table summarizing the main AngularJS concepts we've used:

Concept	Description
ng-app	Defines the root element of an AngularJS application
ng-controller	Defines the controller for a section of the application
ng-model	Binds an input to a variable in the scope
ng-click	Defines a click event
ng-if	Conditionally renders an element
{{}}	Displays data from the scope in the view
$scope	Passes data between the controller and the view
$http	Makes HTTP requests

Happy coding, everyone! Remember, every expert was once a beginner. Keep at it, and before you know it, you'll be building amazing applications. Now, go forth and conquer the coding world!

Credits: Image by storyset

Previous Tutorial:

AngularJS - Share Application

Next Tutorial:

AngularJS - Timer Application