Tiếng Việt

Hướng dẫn AngularJS

Ứng dụng AngularJS

AngularJS - Ứng dụng Thời tiết

Xin chào các ngôi sao lập trình tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị để tạo một ứng dụng thời tiết sử dụng AngularJS. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - tôi sẽ là người hướng dẫn bạn trong hành trình này, giống như tôi đã làm cho hàng trăm học sinh trong những năm dạy học của mình. Vậy, hãy gấp Sleeve của chúng ta lên và nhảy vào!

AngularJS - Weather Application

AngularJS là gì?

Trước khi chúng ta bắt đầu xây dựng ứng dụng thời tiết của mình, hãy nói về AngularJS. Hãy tưởng tượng bạn đang xây dựng một ngôi nhà. AngularJS giống như khung công tác của ngôi nhà đó - nó cung cấp cấu trúc và hỗ trợ cho ứng dụng web của bạn. Đây là một khung công tác JavaScript mạnh mẽ giúp chúng ta tạo ra các ứng dụng đơn trang động một cách dễ dàng.

Thiết lập Dự án của Chúng ta

Bước 1: Bao gồm AngularJS

Đầu tiên, chúng ta cần bao gồm AngularJS trong dự án của mình. Chúng ta sẽ làm điều này bằng cách thêm thẻ script vào tệp HTML của mình:

<!DOCTYPE html>
<html ng-app="weatherApp">
<head>
    <title>Ứng dụng Thời tiết của tôi</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
    <!-- Ứng dụng của chúng ta sẽ ở đây -->
    <script src="app.js"></script>
</body>
</html>

Thấy ng-app="weatherApp" trong thẻ <html> phải không? Điều đó đang nói với AngularJS, "Hey, đây là nơi ứng dụng của chúng ta sống!"

Bước 2: Tạo Ứng dụng của Chúng ta

Bây giờ, hãy tạo tệp app.js của chúng ta:

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

Dòng này giống như nói, "Xin chào, AngularJS! Vui lòng tạo một ứng dụng mới có tên 'weatherApp'." Đơn giản phải không?

Xây dựng Ứng dụng Thời tiết của Chúng ta

Bước 3: Tạo một Controller

Trong AngularJS, controllers là nơi chúng ta đặt hành vi của ứng dụng. Hãy tạo một cái:

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, đó là rất nhiều! Hãy phân tích nó:

  1. Chúng ta đang tạo một controller có tên 'WeatherController'.
  2. $scope là cách chúng ta truyền dữ liệu giữa controller và view.
  3. $http là cách AngularJS thực hiện các yêu cầu HTTP.
  4. Chúng ta đang tạo một hàm叫做 getWeather sẽ lấy dữ liệu thời tiết khi được gọi.

Bước 4: Tạo View của Chúng ta

Bây giờ, hãy cập nhật HTML của chúng ta để sử dụng controller:

<body ng-controller="WeatherController">
    <h1>Ứng dụng Thời tiết</h1>
    <input type="text" ng-model="city" placeholder="Nhập tên thành phố">
    <button ng-click="getWeather()">Lấy Thời tiết</button>

    <div ng-if="weather.main">
        <h2>Thời tiết ở {{weather.name}}</h2>
        <p>Nhiệt độ: {{weather.main.temp}}°C</p>
        <p>Mô tả: {{weather.weather[0].description}}</p>
    </div>
</body>

Đây là những gì đang xảy ra:

  1. ng-controller="WeatherController" kết nối view của chúng ta với controller.
  2. ng-model="city" liên kết input với biến $scope.city.
  3. ng-click="getWeather()" gọi hàm getWeather khi nút được nhấp.
  4. ng-if="weather.main" chỉ hiển thị thông tin thời tiết nếu chúng ta đã lấy dữ liệu.
  5. {{}} là cách chúng ta hiển thị dữ liệu từ $scope trong view.

Làm cho Nó Đẹp

Bước 5: Thêm một ít Style

Hãy thêm một chút CSS để làm cho ứng dụng của chúng ta trông đẹp hơn:

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

Kết hợp Tất cả

Đây là tệp index.html hoàn chỉnh của chúng ta:

<!DOCTYPE html>
<html ng-app="weatherApp">
<head>
    <title>Ứng dụng Thời tiết của tôi</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <style>
        /* CSS từ Bước 5 ở đây */
    </style>
</head>
<body ng-controller="WeatherController">
    <h1>Ứng dụng Thời tiết</h1>
    <input type="text" ng-model="city" placeholder="Nhập tên thành phố">
    <button ng-click="getWeather()">Lấy Thời tiết</button>

    <div ng-if="weather.main">
        <h2>Thời tiết ở {{weather.name}}</h2>
        <p>Nhiệt độ: {{weather.main.temp}}°C</p>
        <p>Mô tả: {{weather.weather[0].description}}</p>
    </div>
    <script src="app.js"></script>
</body>
</html>

Và đây là tệp app.js hoàn chỉnh của chúng ta:

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

Kết luận

Và thế là, các bạn! Chúng ta đã xây dựng một ứng dụng thời tiết đơn giản nhưng chức năng sử dụng AngularJS. Nhớ rằng, học lập trình giống như học một ngôn ngữ mới - nó đòi hỏi sự thực hành và kiên nhẫn. Đừng nản lòng nếu bạn không hiểu mọi thứ ngay lập tức. Hãy tiếp tục thử nghiệm, tiếp tục lập trình, và quan trọng nhất, hãy vui vẻ!

Dưới đây là bảng tóm tắt các khái niệm chính của AngularJS chúng ta đã sử dụng:

Khái niệm Mô tả
ng-app Định nghĩa phần tử gốc của một ứng dụng AngularJS
ng-controller Định nghĩa controller cho một phần của ứng dụng
ng-model Liên kết input với một biến trong phạm vi
ng-click Định nghĩa sự kiện nhấp
ng-if Điều kiện渲染 phần tử
{{}} Hiển thị dữ liệu từ phạm vi trong view
$scope Truyền dữ liệu giữa controller và view
$http Thực hiện các yêu cầu HTTP

Chúc các bạn lập trình vui vẻ! Nhớ rằng, mỗi chuyên gia từng là một người mới bắt đầu. Hãy tiếp tục cố gắng, và trước khi bạn biết điều đó, bạn sẽ xây dựng các ứng dụng tuyệt vời. Bây giờ, hãy tiến lên và chinh phục thế giới lập trình!

Credits: Image by storyset

Hướng Dẫn Trước:
AngularJS - Chia sẻ Ứng dụng
Hướng Dẫn Tiếp Theo:
AngularJS - Ứng dụng Đ计时器