Cách tạo ứng dụng thời tiết với Angular, Bootstrap và API APIXU

Angular là một khung công tác web front-end do Google xây dựng. Nó cho phép các nhà phát triển xây dựng các ứng dụng một trang được mô hình hóa xung quanh mô hình kiến trúc phần mềm model-view-controller (MVC) hoặc model-view-viewmodel (MVVM). Kiến trúc này chia các ứng dụng thành các phần khác nhau, nhưng được kết nối cho phép phát triển song song. Theo mô hình này, Angular chia các thành phần khác nhau của nó thành các phần tương ứng của ứng dụng web. Các thành phần của nó quản lý dữ liệu và logic liên quan đến thành phần đó, hiển thị dữ liệu trong chế độ xem tương ứng và điều chỉnh hoặc điều khiển chế độ xem dựa trên các thông báo khác nhau mà nó nhận được từ phần còn lại của ứng dụng.

---

Bootstrap là một thư viện front-end giúp các nhà phát triển xây dựng các trang web đáp ứng (các trang web thích ứng với các thiết bị khác nhau), một cách nhanh chóng và hiệu quả. Nó sử dụng hệ thống lưới chia mỗi trang thành mười hai cột, đảm bảo trang duy trì kích thước và tỷ lệ chính xác cho dù nó được xem trên thiết bị nào.

APIXU cung cấp dữ liệu thời tiết global cho user thông qua API của họ. Sử dụng APIXU, user có thể truy xuất thời tiết mới nhất cũng như dự báo thời tiết trong tương lai cho bất kỳ địa điểm nào trên thế giới.

Trong hướng dẫn này, bạn sẽ tạo ứng dụng thời tiết bằng Angular, Bootstrap và API APIXU. Bạn có thể nhập một vị trí vào biểu mẫu tìm kiếm và khi gửi biểu mẫu đó, hãy xem chi tiết thời tiết hiện tại cho vị trí đó được hiển thị trong ứng dụng của bạn. Phiên bản Angular được sử dụng trong hướng dẫn này là 7.2.0 và version Bootstrap được sử dụng là 4.2.1.

Yêu cầu

Trước khi bắt đầu hướng dẫn này, bạn cần những thứ sau:

• Node.js và npm được cài đặt trên máy local của bạn. Bạn có thể cài đặt cả hai thứ này từ trang web Node.js hoặc bạn có thể làm theo hướng dẫn này về cài đặt Node.js và cài đặt môi trường phát triển local .
• Khóa API APIXU. Đăng ký account APIXU miễn phí và nhận khóa API miễn phí tại đây .
• Đã cài đặt một editor , chẳng hạn như Visual Studio Code , Atom hoặc Sublime Text .
• Làm quen với JSON và định dạng của nó. Bạn có thể tìm hiểu thêm về điều này trong cách làm việc với JSON trong Javascript .
• Hiểu biết về mảng và đối tượng trong Javascript mà bạn có thể tìm hiểu thêm trong Tìm hiểu mảng trong Javascript và trong Hiểu kiểu dữ liệu trong Javascript tương ứng.

Bước 1 - Cài đặt Angular

Trước khi bắt đầu tạo ứng dụng, bạn cần cài đặt Angular. Mở terminal của bạn và chạy lệnh sau để cài đặt Angular CLI global trên máy của bạn:

npm install -g @angular/cli 

Angular CLI là Giao diện Dòng lệnh cho Angular. Nó đóng role là cách chính để tạo một dự án Angular mới cũng như các yếu tố phụ khác nhau tạo nên một dự án Angular. Sử dụng đối số -g sẽ cài đặt nó trên phạm vi global .

Sau một thời gian ngắn, bạn sẽ thấy kết quả sau:

... + @angular/cli@7.2.2 ... 

Đến đây bạn đã cài đặt Angular trên máy local của bạn . Tiếp theo, bạn sẽ tạo ứng dụng Angular của bạn .

Bước 2 - Tạo ứng dụng Angular của bạn

Trong bước này, bạn sẽ tạo và cấu hình ứng dụng Angular mới của bạn , cài đặt tất cả các phụ thuộc của nó, chẳng hạn như Bootstrap và jQuery, sau đó cuối cùng kiểm tra xem ứng dụng mặc định có hoạt động như mong đợi hay không.

Đầu tiên, sử dụng lệnh ng để tạo một ứng dụng Angular, bạn có thể chạy ứng dụng này từ terminal của bạn .

Lưu ý: Nếu bạn đang ở trên Windows, bạn có thể có vấn đề cố gắng để chạy một ng lệnh từ Command Prompt ngay cả khi bạn đã cài đặt Node.js và NPM một cách chính xác. Ví dụ, bạn có thể gặp lỗi như: ng is not recognized as an internal or external command . Để giải quyết vấn đề này, hãy chạy lệnh ng bên trong dấu nhắc lệnh Node.js đã cài đặt nằm trong folder Node.js trên Windows.

Lệnh ng là yêu cầu để chạy bất kỳ hành động nào với Angular từ dòng lệnh. Ví dụ: cho dù bạn đang xây dựng một dự án mới, tạo thành phần hay tạo thử nghiệm, bạn đặt tiền tố cho mỗi chức năng mong muốn bằng lệnh ng . Trong hướng dẫn này, bạn cần tạo một ứng dụng mới; bạn sẽ đạt được điều này bằng cách chạy lệnh ng new . Lệnh ng new tạo một ứng dụng Angular mới, nhập các thư viện cần thiết và tạo tất cả các đoạn mã mặc định mà ứng dụng của bạn yêu cầu.

Bắt đầu bằng cách tạo một ứng dụng mới, trong hướng dẫn này, nó sẽ được gọi là weather-app , nhưng bạn có thể thay đổi tên tùy ý:

ng new weather-app 

Lệnh ng new sẽ nhắc bạn thông tin bổ sung về các tính năng mà bạn muốn thêm vào ứng dụng mới của bạn .

Output
Would you like to add Angular routing? (y/N) 

routing Angular cho phép bạn xây dựng các ứng dụng trang đơn với các dạng xem khác nhau bằng cách sử dụng các tuyến và thành phần. Hãy tiếp tục và nhập y hoặc nhấn ENTER để chấp nhận các giá trị mặc định.

Output
Which stylesheet format would you like to use? (Use arrow keys) 

Nhấn ENTER để chấp nhận tùy chọn CSS mặc định.

Ứng dụng sẽ tiếp tục quá trình tạo và sau một thời gian ngắn, bạn sẽ thấy thông báo sau:

Output
... CREATE weather-app/e2e/src/app.e2e-spec.ts (623 bytes) CREATE weather-app/e2e/src/app.po.ts (204 bytes) ... Successfully initialized git. 

Tiếp theo, trong editor của bạn, hãy mở folder weather-app .

Nhìn vào cấu trúc folder của bạn, bạn sẽ thấy một số folder và file khác nhau. Bạn có thể đọc giải thích đầy đủ về chức năng của tất cả các file này tại đây , nhưng đối với mục đích của hướng dẫn này, đây là những file quan trọng nhất cần hiểu:

• Tệp package.json . Nằm trong folder weather-app root , nó hoạt động giống như bất kỳ ứng dụng Node.js nào khác, chứa tất cả các thư viện mà ứng dụng của bạn sẽ sử dụng, tên ứng dụng của bạn, các lệnh chạy khi thử nghiệm, v.v. Về cơ bản, file này chứa thông tin chi tiết về các thư viện bên ngoài mà ứng dụng Angular của bạn cần để chạy đúng cách.

• Tệp app.module.ts . Nằm trong folder app trong folder weather-app /src , file này cho Angular biết cách lắp ráp ứng dụng của bạn và nắm giữ thông tin chi tiết về các thành phần, module và nhà cung cấp trong ứng dụng của bạn. Bạn sẽ có một module được nhập, BrowserModule , trong mảng imports của bạn . BrowserModule cung cấp các dịch vụ và chỉ thị cần thiết cho ứng dụng của bạn và phải luôn là module được nhập đầu tiên trong mảng imports của bạn.

• Tệp angular.json . Nằm trong folder weather-app root của weather-app của bạn, đây là file cấu hình cho Angular CLI. Tệp này chứa cài đặt cấu hình nội bộ về những gì ứng dụng Angular của bạn cần để chạy. Nó đặt mặc định cho toàn bộ ứng dụng của bạn và có các tùy chọn như file cấu hình sẽ sử dụng khi thử nghiệm, kiểu chung nào sẽ sử dụng trong ứng dụng của bạn hoặc đến folder nào để xuất file xây dựng của bạn. Bạn có thể tìm hiểu thêm về các tùy chọn này trong tài liệu Angular-CLI chính thức.

Bạn có thể để yên tất cả các file này trong lúc này, khi bạn sẽ cài đặt Bootstrap tiếp theo.

Bootstrap có hai phụ thuộc mà bạn cần cài đặt để nó hoạt động bình thường trong Angular - jQuery và popper.js . jQuery là thư viện JavaScript tập trung vào kịch bản phía client , trong khi popper.js là thư viện định vị chủ yếu quản lý chú giải công cụ và cửa sổ bật lên.

Trong terminal của bạn, hãy chuyển đến folder weather-app root của bạn:

cd weather-app 

Sau đó thực hiện lệnh sau để cài đặt tất cả các phụ thuộc và lưu các tham chiếu vào file package.json :

npm install --save jquery popper.js bootstrap 

Tùy chọn --save tự động nhập các tham chiếu của bạn vào file package.json để bạn không phải thêm chúng theo cách thủ công sau khi cài đặt.

Bạn sẽ thấy kết quả hiển thị số version đã được cài đặt, như sau:

Output
+ popper.js@1.14.6 + bootstrap@4.2.1 + jquery@3.3.1 ... 

Đến đây bạn đã cài đặt thành công Bootstrap và các phụ thuộc của nó. Tuy nhiên, bạn cũng cần bao gồm các thư viện này bên trong ứng dụng của bạn . weather-app của bạn chưa biết rằng nó cần các thư viện này, do đó bạn cần thêm các đường dẫn đến jquery , popper.js , bootstrap.js và bootstrap.css vào file angular.json của bạn .

Đối với popper.js , file bạn cần bao gồm là node_modules/popper.js/dist/umd/popper.js . jQuery yêu cầu node_modules/jquery/dist/jquery.slim.js . Cuối cùng, đối với Bootstrap, bạn cần hai file (cả file JavaScript và file CSS). Đây là node_modules/bootstrap/dist/js/bootstrap.js và node_modules/bootstrap/dist/css/bootstrap.css tương ứng.

Đến đây bạn đã có tất cả các đường dẫn file cần thiết, hãy mở file angular.json trong editor của bạn. Mảng styles là nơi bạn sẽ thêm tham chiếu vào các file CSS, trong khi mảng scripts sẽ tham chiếu đến tất cả các tập lệnh. Bạn sẽ tìm thấy cả hai mảng này ở gần đầu file angular.json , trong đối tượng "options": JSON. Thêm nội dung được đánh dấu sau vào file :

... "options:" { ... "styles": [     "node_modules/bootstrap/dist/css/bootstrap.css",      "src/styles.css" ], "scripts": [     "node_modules/jquery/dist/jquery.slim.js",     "node_modules/popper.js/dist/umd/popper.js",     "node_modules/bootstrap/dist/js/bootstrap.js" ]}, ... 

Đến đây bạn đã nhập các file .js và .css mà bạn cần để Bootstrap hoạt động bình thường. Bạn đã chỉ định các đường dẫn tương đối đến các file này từ file angular.json của bạn : thêm file .css của bạn trong mảng kiểu và file .js trong mảng tập lệnh của angular.json . Đảm bảo rằng bạn đã lưu file angular.json sau khi thêm nội dung này.

Bây giờ, khởi động ứng dụng của bạn bằng lệnh ng serve để kiểm tra xem mọi thứ có hoạt động chính xác hay không. Từ folder weather-app trong terminal của bạn, hãy chạy:

ng serve --o 

Đối số --o sẽ tự động mở ra một cửa sổ trình duyệt hiển thị ứng dụng của bạn. Ứng dụng sẽ mất một vài giây để tạo và sau đó sẽ hiển thị trong trình duyệt của bạn.

Bạn sẽ thấy kết quả sau trong terminal của bạn :

Output
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** ... 

Khi trình duyệt mở ra, bạn sẽ thấy trang ứng dụng Angular mặc định.

Nếu bạn không thấy các kết quả kết quả này, hãy chạy lại bước này và đảm bảo mọi thứ đều chính xác. Nếu bạn gặp lỗi như: Port 4200 is already in use. Use '--port' to specify a different port sau đó bạn có thể thay đổi số cổng bằng lệnh :

ng serve --o --port <different-port-number> 

Lý do cho thông báo lỗi tiềm ẩn này là do cổng 4200 trên máy của bạn đang được sử dụng bởi một chương trình hoặc quy trình khác. Bạn có thể, nếu bạn biết quy trình đó là gì, chấm dứt nó hoặc bạn có thể làm theo bước trên để chỉ định một số cổng khác.

Đến đây bạn đã cài đặt giàn giáo ứng dụng của bạn . Tiếp theo, bạn sẽ tạo một thành phần thời tiết sẽ chứa biểu mẫu chính và các chi tiết thời tiết liên quan của vị trí tìm kiếm.

Bước 3 - Tạo thành phần thời tiết của bạn

Một ứng dụng Angular chủ yếu được tạo thành từ các thành phần , là các phần logic có một chức năng cụ thể trong một ứng dụng. Thành phần này bao gồm một số logic quản lý một phần của màn hình trong một ứng dụng - đây được gọi là khung nhìn .

Ví dụ trong hướng dẫn này, bạn sẽ tạo một Weather Component sẽ chịu trách nhiệm xử lý hai tác vụ:

• Tìm kiếm vị trí
• Hiển thị dữ liệu thời tiết liên quan cho vị trí đó

Để đạt được mục tiêu đầu tiên, bạn sẽ tạo một biểu mẫu cho phép bạn tìm kiếm vị trí. Khi bạn nhấp vào nút tìm kiếm trên biểu mẫu của bạn , nó sẽ kích hoạt một chức năng sẽ tìm kiếm vị trí đó.

Để đạt được mục tiêu thứ hai, bạn sẽ có một <div> với các <p> lồng nhau sẽ hiển thị gọn gàng dữ liệu đã truy xuất của bạn.

Trong khi ứng dụng của bạn đang chạy từ cửa sổ terminal , bạn không thể nhập bất kỳ thứ gì khác vào cửa sổ cụ thể đó. Do đó, mở ra weather-app folder trong một cửa sổ terminal mới nếu bạn muốn thực hiện khác ng lệnh. Ngoài ra, bạn có thể dừng ứng dụng chạy trong cửa sổ terminal ban đầu bằng cách nhấn CTRL + C Sau đó, bạn có thể cài đặt thành phần mới và sau đó khởi động lại ứng dụng bằng lệnh ng serve --o .

Thực thi lệnh sau sẽ tạo Weather Component của bạn và tự động nhập nó vào file app.module.ts của bạn. Lưu ý file app.module.ts của bạn chứa thông tin chi tiết về tất cả các thành phần, module và nhà cung cấp trong ứng dụng của bạn.

ng generate component weather 

Bạn sẽ thấy kết quả như thế này (kích thước byte chính xác có thể khác nhau):

Output
CREATE src/app/weather/weather.component.css (0 bytes) CREATE src/app/weather/weather.component.html (26 bytes) CREATE src/app/weather/weather.component.spec.ts (635bytes) CREATE src/app/weather/weather.component.ts (273 bytes) UPDATE src/app/app.module.ts (400 bytes) ... 

Kết quả này cho thấy Angular đã tạo bốn file cần thiết cho một thành phần:

• Các .css và .html cho chế độ xem của bạn
• .spec.ts để kiểm tra thành phần của bạn
• .component.ts để chứa các chức năng của thành phần của bạn

Angular cũng đã cập nhật file src/app/app.module.ts để thêm một tham chiếu đến thành phần mới được tạo. Bạn sẽ luôn tìm thấy các file thành phần trong folder src/app/ name-of-component .

Đến đây bạn đã cài đặt thành phần mới của bạn , hãy quay lại trình duyệt của bạn để xem ứng dụng. Nếu bạn đã dừng ứng dụng đang chạy để cài đặt thành phần mới, hãy khởi động lại bằng lệnh :

ng serve --o 

Bạn sẽ nhận thấy rằng bạn vẫn có thể thấy thông báo “Chào mừng bạn đến với ứng dụng!” (thành phần mặc định) hiển thị trên trang. Bạn không thể thấy thành phần mới tạo của bạn . Trong phần tiếp theo, bạn sẽ thay đổi điều này để khi nào bạn truy cập localhost:4200 , bạn sẽ truy cập thành phần thời tiết mới được tạo của bạn thay vì thành phần mặc định của Angular.

Bước 4 - Truy cập thành phần thời tiết của bạn

Trong HTML chuẩn, khi nào bạn muốn tạo một trang mới, bạn phải tạo một file .html mới. Ví dụ, nếu bạn đã có một trang HTML có từ trước mà từ đó bạn muốn chuyển đến trang vừa tạo, bạn muốn có một href thuộc tính với một anchor thẻ để điểm đến trang mới. Ví dụ:

<a href="/newpage.html">Go to New Page</a> 

Tuy nhiên, trong Angular, điều này hoạt động hơi khác. Bạn không thể sử dụng thuộc tính href theo cách này để chuyển đến một thành phần mới. Khi bạn muốn liên kết đến một thành phần, bạn cần sử dụng thư viện Router của Angular và khai báo một đường dẫn URL mong muốn trong một file sẽ ánh xạ trực tiếp đến một thành phần.

Trong Angular, bạn gọi file này là routes.ts . Điều này nắm giữ tất cả các chi tiết về các tuyến đường của bạn (liên kết). Để file này hoạt động chính xác, bạn sẽ nhập loại Định Routes từ thư viện @angular/router và liệt kê các liên kết mong muốn của bạn thuộc loại Định Routes . Điều này sẽ thông báo với Angular rằng đây là danh sách các tuyến đường để chuyển trong ứng dụng của bạn.

Tạo các file routes.ts trong editor của bạn và lưu nó trong folder src/app . Tiếp theo, thêm nội dung sau vào file routes.ts :

import { Routes } from '@angular/router' 

Bây giờ, khai báo đường dẫn URL và thành phần trong src/app/routes.ts . Bạn muốn tạo ứng dụng của bạn sao cho khi truy cập trang chủ ( http://localhost:4200 ), bạn truy cập Thành phần thời tiết mới tạo của bạn . Thêm các dòng này vào file , sẽ ánh xạ URL root tới Thành phần thời tiết mà bạn vừa tạo:

import { Routes } from '@angular/router' import { WeatherComponent } from './weather/weather.component';  export const allAppRoutes: Routes = [   { path: '', component: WeatherComponent } ]; 

Bạn đã nhập WeatherComponent của bạn , và sau đó tạo một biến allAppRoutes , đó là một mảng các loại Routes . allAppRoutes chứa các đối tượng định nghĩa tuyến đường, mỗi đối tượng chứa một đường dẫn URL và thành phần để ánh xạ tới. Bạn đã chỉ định rằng bất kỳ khi nào bạn truy cập URL root (“), nó sẽ chuyển đến WeatherComponent .

Tệp routes.ts cuối cùng của bạn sẽ trông giống như sau:

import { Routes } from "@angular/router"; import { WeatherComponent } from "./weather/weather.component";  export const allAppRoutes: Routes = [   { path: '', component: WeatherComponent } ]; 

Đến đây bạn cần thêm các tuyến đường này vào file app.module.ts chính của bạn . Bạn cần chuyển mảng vừa tạo - allAppRoutes - vào một module Angular được gọi là RouterModule . RouterModule sẽ khởi tạo và cấu hình Bộ định tuyến (chịu trách nhiệm thực hiện tất cả chuyển ứng dụng) và cung cấp cho nó dữ liệu định tuyến từ allAppRoutes . Thêm nội dung được đánh dấu sau:

... import {WeatherComponent} from './weather/weather.component'; import {RouterModule} from '@angular/router'; import {allAppRoutes} from './routes'; ... @NgModule({     declarations:[       ...     ],     imports: [         BrowserModule,         RouterModule.forRoot(allAppRoutes)     ]     ... }) ... 

Trong file này, bạn đã nhập các RouterModule và allAppRoutes mảng các đối tượng đường. Sau đó, bạn đã chuyển mảng allAppRoutes vào RouterModule để Bộ định tuyến của bạn biết nơi định tuyến các URL của bạn đến.

Cuối cùng, bạn cần phải bật định tuyến. Mở file app.component.ts . Có một thuộc tính templateUrl chỉ định HTML cho thành phần cụ thể đó: ./app.component.html . Mở file này, src/app/app.component.html và bạn sẽ thấy rằng nó chứa tất cả HTML cho trang localhost:4200 của bạn.

Xóa tất cả HTML có trong app.component.html và thay thế bằng:

<router-outlet></router-outlet> 

Các router-outlet thẻ kích hoạt định tuyến và phù hợp với URL mà user vào trình duyệt để định nghĩa đường mà bạn đã tạo trước đó trong routes.ts file dưới allAppRoutes biến. Sau đó, bộ định tuyến hiển thị chế độ xem trong HTML. Trong hướng dẫn này, bạn sẽ hiển thị mã weather.component.html ngay sau <router-outlet></router-outlet> .

Bây giờ, nếu bạn chuyển đến http://localhost:4200 , bạn sẽ thấy thời tiết hoạt động! xuất hiện trên trang web .

Bạn đã cài đặt định tuyến trong ứng dụng của bạn . Tiếp theo, bạn sẽ tạo biểu mẫu và phần chi tiết cho phép bạn tìm kiếm một vị trí và hiển thị các chi tiết liên quan của nó.

Bước 5 - Xác định Giao diện User

Bạn sẽ sử dụng Bootstrap để hoạt động như giàn giáo cho chế độ xem ứng dụng của bạn . Bootstrap rất hữu ích để tạo các trang web đáp ứng sẵn, thích ứng với mọi thiết bị (điện thoại di động, máy tính bảng hoặc máy tính để bàn). Nó đạt được điều này bằng cách coi mỗi hàng trên trang web rộng mười hai cột. Trên một trang web, một hàng chỉ đơn giản là một dòng từ đầu này đến đầu kia của trang. Điều này nghĩa là mọi nội dung của trang phải được chứa trong dòng đó và nó phải bằng mười hai cột. Nếu nó không bằng mười hai cột, nó sẽ bị đẩy xuống một hàng khác. Ví dụ, trong hệ thống lưới của Bootstrap, sẽ có một hàng mười hai cột được chia thành hai phần của sáu cột và hàng mười hai cột tiếp theo được chia thành ba phần của bốn cột.

Trong tài liệu Bootstrap , bạn có thể đọc thêm về hệ thống lưới này.

Bạn sẽ chia trang của bạn thành hai phần gồm sáu cột với cột bên trái giữ biểu mẫu tìm kiếm của bạn và cột bên phải hiển thị chi tiết thời tiết.

Mở src/app/weather/weather.component.html để truy cập mã HTML WeatherComponent của bạn. Xóa đoạn hiện có trong file , sau đó thêm mã sau:

<div class="container">   <div class="row">     <div class="col-md-6"><h3 class="text-center">Search for Weather:</h3></div>     <div class="col-md-6"><h3 class="text-center">Weather Details:</h3></div>   </div> </div>  

Bạn đã tạo một <div> với vùng container lớp để chứa tất cả nội dung của bạn. Sau đó, bạn tạo một hàng mà bạn chia thành hai phần, mỗi phần sáu cột. Bên tay trái sẽ giữ biểu mẫu tìm kiếm của bạn và bên phải là dữ liệu thời tiết của bạn.

Tiếp theo, để xây dựng biểu mẫu của bạn, bạn sẽ làm việc trong col-md-6 đầu tiên. Bạn cũng sẽ thêm một nút sẽ gửi những gì bạn đã nhập vào biểu mẫu của bạn tới APIXU, sau đó sẽ trả về các chi tiết thời tiết được yêu cầu. Để thực hiện việc này, hãy xác định lớp col-md-6 đầu tiên và thêm nội dung được đánh dấu sau bên dưới <h3> :

... <div class="col-md-6">   <h3 class="text-center">Search for Weather:</h3>   <form>     <div class="form-group">       <input         class="form-control"         type="text"         id="weatherLocation"         aria-describedby="weatherLocation"         placeholder="Please input a Location"       />      </div>      <div class="text-center">        <button type="submit" class="btn btn-success btn-md">         Search for the weather</button>      </div>    </form>  </div> ... 

Bạn đã thêm biểu mẫu của bạn và thêm một lớp form-group giữ thanh tìm kiếm của bạn. Bạn cũng đã tạo nút của bạn để tìm kiếm thời tiết. Trong trình duyệt của bạn, trang ứng dụng thời tiết của bạn sẽ giống như sau:

Điều này trông hơi nhỏ gọn, vì vậy bạn có thể thêm một số CSS để tạo kiểu trang với một số khoảng cách tốt hơn. Ưu điểm chính của Bootstrap là nó đi kèm với các lớp giãn cách mà bạn có thể thêm vào HTML của bạn mà không cần phải viết thêm bất kỳ CSS nào của bạn . Tuy nhiên, nếu có thêm bất kỳ CSS nào bạn muốn kết hợp mà các lớp tiêu chuẩn của Bootstrap không bao gồm, bạn có thể viết bằng CSS của riêng mình nếu cần. Đối với hướng dẫn này, bạn sẽ sử dụng các lớp tiêu chuẩn của Bootstrap.

Đối với mỗi <h3> , bạn sẽ thêm lớp CSS .my .my-4 Boostrap. m đặt lề trên phần tử, y đặt cả margin-top và margin-bottom trên phần tử, và cuối cùng 4 chỉ định số lượng lề cần thêm. Bạn có thể tìm hiểu thêm chi tiết về các loại và kích thước khoảng cách khác nhau tại đây . Trong file weather.component.html của bạn, hãy thêm nội dung được đánh dấu sau để thay thế các <h3> hiện tại:

<div class="col-md-6">   <h3 class="text-center my-4">Search for Weather:</h3>   <form>     <div class="form-group">       <input         class="form-control"         type="text"         id="weatherLocation"         aria-describedby="weatherLocation"         placeholder="Please input a Location"       />     </div>     <div class="text-center">       <button type="submit" class="btn btn-success btn-md">         Search for the weather       </button>     </div>   </form> </div> <div class="col-md-6">   <h3 class="text-center my-4">Weather Details:</h3> </div> 

Reload trang trong trình duyệt của bạn và bạn sẽ thấy rằng bạn có nhiều khoảng cách hơn.

Bạn đã tạo biểu mẫu của bạn cũng như phần nơi bạn sẽ hiển thị thông tin bạn nhận được từ API APIXU. Tiếp theo, bạn sẽ sắp xếp biểu mẫu của bạn để có thể nhập chính xác vị trí của bạn .

Bước 6 - Kết nối biểu mẫu của bạn

Trong Angular, có hai cách tạo biểu mẫu để user nhập vào ứng dụng của bạn - theo hướng phản ứng hoặc theo mẫu . Mặc dù chúng đạt được cùng một kết quả, mỗi loại biểu mẫu xử lý xử lý dữ liệu đầu vào của user khác nhau.

Với biểu mẫu phản ứng, bạn tạo danh sách các phần tử khác nhau của biểu mẫu trong file .component.ts của bạn. Sau đó, bạn kết nối chúng với biểu mẫu HTML đã tạo của bạn trong file .component.html tương ứng. Đây hoàn toàn là một chiều; tức là, dữ liệu chảy từ HTML sang file .component.ts của bạn, không có stream dữ liệu hai chiều.

Với biểu mẫu theo hướng mẫu, bạn tạo biểu mẫu của bạn như cách bạn làm trong HTML thông thường. Sau đó, sử dụng các lệnh như ngModel , bạn có thể tạo liên kết dữ liệu một chiều hoặc hai chiều từ HTML của bạn , quay lại mô hình dữ liệu trong thành phần của bạn và ngược lại.

Có những điểm mạnh và điểm yếu trong mỗi cách tiếp cận, nhưng nhìn chung, các hình thức phản ứng được ưu tiên hơn vì:

• Tính linh hoạt để tạo ra các dạng phức tạp khác nhau.
• Đơn giản hơn để kiểm tra đơn vị bằng cách kiểm tra trạng thái của mỗi điều khiển biểu mẫu trong file .component.ts của thành phần.
• Khả năng đăng ký các giá trị trong một biểu mẫu. Nhà phát triển có thể đăng ký dòng giá trị của biểu mẫu, cho phép họ thực hiện một số hành động đối với các giá trị được nhập vào biểu mẫu trong thời gian thực.

Bất chấp những điểm mạnh này, các dạng phản ứng đôi khi có thể phức tạp hơn để thực hiện. Điều này có thể dẫn đến việc các nhà phát triển viết nhiều mã hơn so với biểu mẫu theo hướng mẫu. Để xem tổng quan toàn diện về cả hai loại biểu mẫu và các trường hợp sử dụng tốt nhất, hướng dẫn chính thức của Angular cung cấp một điểm khởi đầu tốt. Đối với hướng dẫn này, bạn sẽ sử dụng các biểu mẫu phản ứng.

Để sử dụng biểu mẫu phản ứng, hãy mở file app.module.ts . Tiếp theo, nhập ReactiveFormsModule bằng cách khai báo quá trình nhập ở đầu file .

... import { ReactiveFormsModule } from '@angular/forms'; @NgModule({     ... }) ... 

Cuối cùng, thêm ReactiveFormsModule vào danh sách nhập của bạn.

... @NgModule({     ...     imports: [         BrowserModule,         RouterModule.forRoot(allAppRoutes),         ReactiveFormsModule     ]     ... }) ... 

Sau những bổ sung mã này, app.module.ts của bạn sẽ trông giống như sau:

import { BrowserModule } from "@angular/platform-browser"; import { NgModule } from "@angular/core";  import { AppComponent } from "./app.component"; import { WeatherComponent } from "./weather/weather.component"; import { RouterModule } from "@angular/router"; import { allAppRoutes } from "./routes"; import { ReactiveFormsModule } from "@angular/forms";  @NgModule({   declarations: [AppComponent, WeatherComponent],   imports: [     BrowserModule,     RouterModule.forRoot(allAppRoutes),     ReactiveFormsModule   ],   providers: [],   bootstrap: [AppComponent] }) export class AppModule {} 

Khi bạn đã thêm cả hai dòng này, hãy mở file weather.component.ts và nhập các FormBuilder và FormGroup .

import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; 

Bây giờ, hãy tạo một biến trong file weather.component.ts sẽ tham chiếu đến FormGroup của bạn:

export class WeatherComponent implements OnInit {    public weatherSearchForm: FormGroup;    constructor() { } ... 

Mỗi khi bạn muốn thực hiện một hành động trên biểu mẫu của bạn , bạn sẽ tham chiếu nó qua biến weatherSearchForm . Đến đây bạn sẽ thêm FormBuilder nhập khẩu vào bạn constructor để bạn có thể sử dụng nó trong thành phần của bạn.

... public weatherSearchForm: FormGroup; constructor(private formBuilder: FormBuilder) {} ... 

Bằng cách thêm formBuilder vào hàm constructor , nó tạo ra một thể hiện của lớp FormBuilder , cho phép bạn sử dụng nó trong thành phần của bạn .

Đến đây bạn đã sẵn sàng tạo FormGroup của bạn và các giá trị tương ứng của nó trong file weather.component.ts . Nếu bạn có một số tùy chọn đầu vào trong biểu mẫu của bạn , cách tốt nhất là đặt nó trong một FormGroup . Trong hướng dẫn này, bạn sẽ chỉ có một (đầu vào vị trí của bạn), nhưng bạn vẫn sẽ sử dụng FormGroup để thực hành.

Điều quan trọng là biểu mẫu của bạn đã sẵn sàng để sử dụng khi bạn chuyển đến thành phần của bạn . Vì bạn đang sử dụng biểu mẫu phản ứng, trước tiên bạn phải tạo cây các phần tử trong biểu mẫu trước khi bạn liên kết nó với HTML. Để làm điều này, bạn cần đảm bảo bạn tạo các phần tử biểu mẫu của bạn trong móc ngOnInit bên trong WeatherComponent của bạn. Phương thức ngOnInit chạy một lần khi khởi tạo thành phần, thực thi bất kỳ logic nào mà bạn chỉ định cần chạy trước khi thành phần sẵn sàng sử dụng.

Do đó, bạn phải tạo biểu mẫu của bạn trước khi có thể hoàn thành quá trình liên kết với HTML.

Trong WeatherComponent , bạn sẽ khởi tạo biểu mẫu trong móc ngOnInit :

... constructor(private formBuilder: FormBuilder) {} ngOnInit() {     this.weatherSearchForm = this.formBuilder.group({       location: ['']     });   } 

Bạn đã tạo phần đầu tiên của biểu mẫu theo kiểu biểu mẫu phản ứng: xác định các thành phần biểu mẫu của bạn trong file weather.component.ts . Bạn đã tạo một group các phần tử tổng hợp của biểu mẫu (tại thời điểm này, bạn có một phần tử, location ). Mảng [''] cho phép bạn chỉ định một số tùy chọn bổ sung cho đầu vào biểu mẫu của bạn chẳng hạn như: điền trước vào nó một số dữ liệu và sử dụng trình xác thực để xác thực đầu vào của bạn. Bạn không cần bất kỳ thứ nào trong số này cho hướng dẫn này, vì vậy bạn có thể để trống. Bạn có thể tìm hiểu thêm về những gì bạn có thể chuyển vào thuộc tính phần tử tại đây .

Bạn có hai việc nữa phải làm trước khi biểu mẫu của bạn hoàn tất. Trước tiên, hãy mở file weather.component.html của bạn. Bạn cần gán cho biểu mẫu một thuộc tính [formGroup] . Thuộc tính này sẽ bằng với biến mà bạn vừa khai báo trong file weather.component.ts : weatherSearchForm . Thứ hai, bạn phải liên kết phần tử location của bạn (được khai báo trong file weather.component.ts ) với HTML của bạn. Trong weather.component.html , hãy thêm nội dung được đánh dấu sau:

... <form   [formGroup]="weatherSearchForm" >   <div class="form-group">     <input       class="form-control"       type="text"       id="weatherLocation"       aria-describedby="weatherLocation"       placeholder="Please input a Location"     />formControlName="location" />   </div>   <div class="text-center">     <button type="submit" class="btn btn-success btn-md">       Search for the weather     </button>   </div> </form> ... 

Bạn đã thêm thuộc tính [formGroup] , liên kết biểu mẫu của bạn với HTML. Bạn cũng đã thêm thuộc tính formControlName khai báo rằng phần tử input cụ thể này được liên kết với phần tử location trong file weather.component.ts của bạn.

Lưu file của bạn và quay lại trình duyệt, bạn sẽ thấy ứng dụng của bạn trông giống hệt nhau. Điều này nghĩa là biểu mẫu của bạn được kết nối chính xác. Nếu bạn thấy bất kỳ lỗi nào ở giai đoạn này, vui lòng quay lại các bước trước đó đảm bảo rằng mọi thứ đều chính xác trong file của bạn.

Tiếp theo, bạn sẽ kết nối nút của bạn để có thể chấp nhận dữ liệu đầu vào vào biểu mẫu của bạn.

Bước 7 - Kết nối nút của bạn

Trong bước này, bạn sẽ kết nối nút tìm kiếm với biểu mẫu của bạn để có thể chấp nhận dữ liệu đầu vào của user . Bạn cũng cần tạo giàn giáo cho phương thức cuối cùng sẽ gửi dữ liệu đầu vào của user tới API thời tiết APIXU.

Nếu bạn xem lại mã của bạn trong weather.component.html , bạn có thể thấy rằng nút của bạn có loại submit :

<form> ... <div class="text-center">     <button type="submit" class="btn btn-success btn-md">Search for the weather</button> </div> </form> 

Đây là một giá trị HTML tiêu chuẩn sẽ gửi các giá trị biểu mẫu của bạn đến một số chức năng để thực hiện hành động.

Trong Angular, bạn chỉ định hàm đó trong sự kiện (ngSubmit) . Khi bạn nhấp vào nút trong biểu mẫu của bạn , miễn là nó có một loại submit , nó sẽ kích hoạt sự kiện (ngSubmit) , sau đó sẽ gọi bất kỳ phương thức nào bạn đã chỉ định cho nó. Trong trường hợp này, bạn muốn có thể lấy vị trí mà user của bạn đã nhập và gửi vị trí đó đến API APIXU.

Đầu tiên bạn sẽ tạo một phương pháp để xử lý điều này. Trong weather.component.ts của bạn, hãy tạo một phương thức sendToAPIXU() sẽ nhận một đối số: (các) giá trị bạn đã nhập vào biểu mẫu của bạn . Thêm nội dung được đánh dấu sau vào file :

... ngOnInit() {     this.weatherSearchForm = this.formBuilder.group({       location: [""]     });   }  sendToAPIXU(formValues) {  } ... 

Tiếp theo, thêm sự kiện ngSubmit vào HTML của bạn và chuyển các giá trị của biểu mẫu đã gửi vào phương thức sendToAPIXU() :

... <form [formGroup]="weatherSearchForm" (ngSubmit)="sendToAPIXU(weatherSearchForm.value)">   ... </form> ... 

Bạn đã thêm sự kiện ngSubmit vào biểu mẫu của bạn , kết nối phương thức bạn muốn chạy khi gửi biểu mẫu và chuyển các giá trị của weatherSearchForm làm đối số cho phương thức xử lý của bạn ( weatherSearchForm.value ). Đến đây bạn có thể kiểm tra hoạt động này bằng cách sử dụng console.log để in ra formValues của bạn , trong phương thức sendToAPIXU() của bạn, hãy thêm nội dung được đánh dấu sau vào weather.component.ts :

... sendToAPIXU(formValues){     console.log(formValues); } 

Truy cập trình duyệt của bạn và mở console của bạn bằng cách nhấp chuột phải vào bất kỳ đâu trên trang web , sau đó nhấp vào Kiểm tra phần tử . Sẽ có một tab trên cửa sổ bật lên được gọi là Console . Nhập London vào biểu mẫu của bạn. Khi bạn nhấp vào nút Tìm kiếm thời tiết , bạn sẽ thấy một đối tượng kèm theo vị trí của bạn.

Đầu ra của bạn từ console là một đối tượng JSON {location: "London"} . Nếu bạn muốn truy cập giá trị vị trí của bạn , bạn có thể thực hiện việc này bằng cách truy cập formValues.location . Tương tự, nếu bạn có đầu vào nào khác bên trong biểu mẫu của bạn , bạn sẽ swap .location cho bất kỳ tên phần tử nào khác mà bạn có.

Ghi chú:
Tất cả các giá trị của một biểu mẫu phản ứng được lưu trữ trong một đối tượng - trong đó khóa là tên của giá trị bạn đã chuyển vào formBuilder.group({}) .

Nút hiện đã được kết nối và có thể nhận đầu vào chính xác. Tiếp theo, bạn sẽ làm cho phương thức sendToAPIXU() thực hiện một yêu cầu HTTP tới API APIXU.

Bước 8 - Gọi API APIXU

API APIXU chấp nhận thông tin vị trí, tìm kiếm chi tiết thời tiết hiện tại cho vị trí đó và trả lại chúng cho client . Bây giờ, bạn sẽ sửa đổi ứng dụng của bạn để ứng dụng gửi dữ liệu vị trí đến API, nhận phản hồi và sau đó hiển thị kết quả trên trang web .

Để thực hiện các yêu cầu HTTP trong Angular, bạn phải nhập HttpClientModule . Mở src/app/app.module.ts và thêm các dòng được đánh dấu sau:

... import { ReactiveFormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; @NgModule({     ...     imports: [         BrowserModule,         RouterModule.forRoot(allAppRoutes),         ReactiveFormsModule,         HttpClientModule     ]     ... }) ... 

Tiếp theo, bạn cần viết mã để thực hiện lệnh gọi HTTP tới API APIXU. Cách tốt nhất là tạo một dịch vụ Angular để thực hiện các yêu cầu HTTP. Tách các mối quan tâm là key trong bất kỳ ứng dụng nào bạn xây dựng. Một dịch vụ cho phép bạn chuyển tất cả các yêu cầu HTTP đó mà ứng dụng của bạn tạo thành một file mà sau đó bạn có thể gọi bên trong các file .component.ts nào bạn tạo. Bạn có thể viết " hợp lệ " các yêu cầu HTTP đó trong file .component.ts cụ thể, nhưng đây không phải là phương pháp hay nhất. Ví dụ: bạn có thể thấy rằng một số yêu cầu của bạn phức tạp và yêu cầu bạn thực hiện một số xử lý sau các hành động sau khi nhận được dữ liệu . Một số thành phần khác nhau trong ứng dụng của bạn có thể sử dụng một số yêu cầu HTTP của bạn và bạn không muốn viết cùng một phương thức nhiều lần.

Từ một cửa sổ terminal mới hoặc bằng cách dừng server trong phiên terminal hiện tại của bạn, hãy thực thi lệnh sau để tạo một dịch vụ có tên apixu :

ng g service apixu 

Bạn sẽ thấy kết quả giống như sau:

Output
create src/app/apixu.service.spec.ts (328 bytes) create src/app/apixu.service.ts (134 bytes) ... 

Lệnh đã tạo file dịch vụ ( apixu.service.ts ) và file thử nghiệm ( apixu.service.spec.ts ).

Đến đây bạn cần thêm dịch vụ này làm nhà cung cấp vào file app.module.ts của bạn . Điều này làm cho nó có sẵn để sử dụng bên trong ứng dụng của bạn. Mở file này và nhập ApixuService :

... import { HttpClientModule } "@angular/common/http"; import { ApixuService } from "./apixu.service"; ... 

Tiếp theo, thêm ApixuService mới được nhập làm nhà cung cấp vào khối providers :

... @NgModule({     ...     providers: [ApixuService],     ... }) ... 

Trong Angular, nếu bạn muốn sử dụng một dịch vụ mà bạn đã tạo, bạn cần chỉ định dịch vụ đó làm nhà cung cấp trong file module.ts của bạn . Trong trường hợp này, bạn đã chỉ định nó làm nhà cung cấp trong toàn bộ ứng dụng của bạn trong app.module.ts .

Cuối cùng, mở file src/app/apixu.service.ts . Bạn sẽ thấy mã soạn sẵn về những gì bạn cần để tạo một dịch vụ: đầu tiên là nhập giao diện Injectable từ Angular; thì thực tế là dịch vụ phải được providedIn bộ phun root providedIn (cho toàn bộ ứng dụng); và sau đó là trang trí (điều này nghĩa là chỉ định cụ thể) dịch vụ của bạn là @Injectable .

import { Injectable } from '@angular/core';  @Injectable({   providedIn: 'root' }) export class ApixuService {    constructor() { } } 

Việc trang trí dịch vụ dưới dạng @Injectable cho phép bạn đưa dịch vụ này vào bên trong hàm tạo trong weather.component.ts để bạn có thể sử dụng nó bên trong thành phần của bạn .

Nếu bạn đã dừng ứng dụng của bạn , hãy khởi động lại nó bằng lệnh:

ng serve --o 

Như đã đề cập ở trên, dịch vụ của bạn cần thực hiện các yêu cầu HTTP tới API APIXU và nhập HttpClientModule trong file app.module.ts để thực hiện các yêu cầu HTTP trong toàn bộ ứng dụng. Ngoài ra, bạn cần nhập thư viện HttpClient vào file apixu.service.ts để thực hiện các yêu cầu HTTP tới API APIXU từ chính file apixu.service.ts . Mở file apixu.service.ts và thêm nội dung được đánh dấu sau:

... import { HttpClient } from '@angular/common/http'; ... 

Đến đây bạn cần viết một phương thức, getWeather() , sử dụng một paramater: location. Phương thức này sẽ thực hiện một yêu cầu API tới APIXU và trả về dữ liệu vị trí đã truy xuất.

Đối với điều này, bạn cần khóa API được cung cấp khi đăng ký API APIXU. Nếu bạn đăng nhập vào APIXU , bạn sẽ đến trang tổng quan:

Bạn sẽ thấy khóa của bạn và bên dưới đó là các liên kết đến URL API với khóa của bạn đã được điền sẵn cho cả Thời tiết Hiện tại và Dự báo Thời tiết . Sao chép liên kết HTTPS để biết chi tiết Thời tiết Hiện tại , nó sẽ giống như sau:

https://api.apixu.com/v1/current.json?key= YOUR_API_KEY &q=Paris

URL này sẽ cung cấp cho bạn chi tiết thời tiết hiện tại của Paris. Thay vào đó, bạn muốn có thể chuyển location từ biểu mẫu của bạn vào tham số &q= . Do đó, hãy xóa Paris khỏi URL khi bạn thêm nó vào file apixu.service.ts của bạn :

... export class ApixuService {    constructor(private http: HttpClient) {}    getWeather(location){       return this.http.get(           'https://api.apixu.com/v1/current.json?key=YOUR_API_KEY&q=' + location       );   } } 

Lưu ý: Bạn đã sử dụng khóa API trực tiếp trong mã. Trong tình huống production , bạn nên lưu trữ an toàn phía server và truy xuất khóa này một cách an toàn và sử dụng nó trong ứng dụng của bạn. Bạn có thể lưu trữ nó một cách an toàn phía server hoặc sử dụng một ứng dụng quản lý khóa như Hashicorp Vault hoặc Azure Key Vault , để đặt tên cho một số.

Đến đây bạn đã nhập và đưa HttpClient vào hàm tạo để bạn có thể sử dụng nó. Bạn cũng đã tạo một phương thức getWeather() nhận tham số location và thực hiện yêu cầu GET đối với URL bạn đã cung cấp. Bạn để trống thông số &q= vì bạn sẽ cung cấp vị trí này trực tiếp từ thông số location trong phương thức. Cuối cùng, bạn đã trả lại dữ liệu cho bất kỳ ai đã gọi phương thức.

Dịch vụ của bạn đã hoàn tất. Bạn cần nhập dịch vụ của bạn vào WeatherComponent , đưa nó vào phương thức khởi tạo để sử dụng, sau đó cập nhật phương thức sendToAPIXU() để gửi vị trí của bạn tới dịch vụ mới tạo của bạn. Mở file weather.component.ts để hoàn thành các việc này bằng cách thêm nội dung được đánh dấu:

... import { FormBuilder, FormGroup } from "@angular/forms"; import { ApixuService } from "../apixu.service"; ... constructor(     private formBuilder: FormBuilder,     private apixuService: ApixuService   ) {} ... ngOnInit(){...} sendToAPIXU(formValues){     this.apixuService       .getWeather(formValues.location)       .subscribe(data => console.log(data)); } 

Bạn đã xóa câu lệnh console.log cũ trong phương thức sendToAPIXU() và cập nhật nó với nội dung này. Bạn hiện đang chuyển vị trí của bạn từ biểu mẫu sang phương thức sendToAPIXU() mà bạn đã tạo trước đó. Sau đó, bạn đã chuyển dữ liệu đó đến phương thức getWeather() của ApixuService mà sau đó đã thực hiện một yêu cầu HTTP tới API với vị trí đó. Sau đó, bạn đã đăng ký phản hồi mà bạn nhận được và trong ví dụ này, ghi dữ liệu đó vào console . Bạn luôn phải gọi phương thức đăng ký trên một yêu cầu HTTP vì yêu cầu sẽ không bắt đầu cho đến khi bạn có cách đọc phản hồi có thể Observable mà bạn nhận được. Có thể quan sát là một cách gửi tin nhắn giữa nhà xuất bản và người đăng ký, cho phép bạn chuyển qua lại bất kỳ loại dữ liệu nào. Bạn sẽ không thể nhận dữ liệu từ một người có thể quan sát cho đến khi một người đăng ký đã đăng ký nó, bởi vì nó sẽ không thực thi trước thời điểm đó.

Mở lại console trong trình duyệt của bạn. Bây giờ, hãy nhập London, Vương quốc Anh và nhấp vào Tìm kiếm thời tiết . Nếu bạn nhấp vào mũi tên tab, bạn sẽ thấy danh sách chi tiết thời tiết trong console .

Đầu ra hiển thị các đối tượng JSON chứa tất cả thông tin thời tiết cần thiết. Bạn có hai đối tượng được trả về: một đối tượng current và một đối tượng location . Cái trước cung cấp thông tin chi tiết về thời tiết mong muốn và thông tin chi tiết sau về vị trí của bạn.

Bây giờ, dữ liệu thời tiết của bạn đã hiển thị thành công trong console . Để hoàn thành hướng dẫn này, bạn sẽ hiển thị các chi tiết thời tiết này trong HTML của bạn .

Bước 9 - Hiển thị dữ liệu thời tiết trong ứng dụng của bạn

Hiển thị kết quả trong console là một bước ban đầu tốt để kiểm tra xem mọi thứ có hoạt động hay không. Tuy nhiên, cuối cùng bạn muốn hiển thị dữ liệu thời tiết trong HTML cho user của bạn . Để thực hiện việc này, bạn sẽ tạo một biến để lưu giữ dữ liệu thời tiết đã trả về, sau đó hiển thị biến đó bằng phép nội suy trong HTML của bạn.

Nội suy cho phép bạn hiển thị dữ liệu trong các khung nhìn của bạn . Để thực hiện điều này, nó yêu cầu bạn ràng buộc một thuộc tính thông qua kiểu {{ }} , để hiển thị thuộc tính đó trong HTML của bạn.

Mở file weather.component.ts và tạo một biến có tên là weatherData mà bạn sẽ gán dữ liệu JSON đã truy xuất từ API. Ngoài ra, hãy xóa mã trước đó trong dấu ngoặc .subscribe() và thay thế bằng mã được đánh dấu sau:

... export class WeatherComponent implements OnInit { public weatherSearchForm: FormGroup; public weatherData: any; ... sendToAPIXU(formValues){     this.apixuService     .getWeather(formValues.location)     .subscribe(data => this.weatherData = data)       console.log(this.weatherData);     } } 

Bạn đã tạo ra weatherData biến và khai báo rằng nó có thể chứa any loại dữ liệu any . Sau đó, bạn đã gán dữ liệu bạn nhận lại từ lệnh gọi API của bạn cho biến đó. Cuối cùng, bạn đã thêm một câu lệnh console.log() để kiểm tra lại xem weatherData có giữ tất cả thông tin đã truy xuất của bạn hay không.

Tệp weather.component.ts của bạn sẽ trông như thế này ở giai đoạn này:

import { Component, OnInit } from "@angular/core"; import { FormBuilder, FormGroup } from "@angular/forms"; import { ApixuService } from "../apixu.service";  @Component({   selector: "app-weather",   templateUrl: "./weather.component.html",   styleUrls: ["./weather.component.css"] }) export class WeatherComponent implements OnInit {   public weatherSearchForm: FormGroup;   public weatherData: any;    constructor(     private formBuilder: FormBuilder,     private apixuService: ApixuService   ) {}    ngOnInit() {     this.weatherSearchForm = this.formBuilder.group({       location: [""]     });   }    sendToAPIXU(formValues) {     this.apixuService.getWeather(formValues.location).subscribe(data => {       this.weatherData = data;       console.log(this.weatherData);     });   } } 

Nếu bạn quay lại và tìm kiếm lại London, Vương quốc Anh , bạn sẽ thấy đối tượng của bạn được in ra console như bình thường. Bây giờ, bạn muốn hiển thị dữ liệu này trong HTML của bạn . Nếu bạn kiểm tra đối tượng current từ dữ liệu thời tiết đã truy xuất trong console , bạn sẽ thấy các giá trị như condition , feelslike_c , feelslike_f , temp_c , temp_f , v.v. Bạn sẽ sử dụng tất cả năm thuộc tính này.

Mở lại file weather.component.html và thêm phụ đề vào dữ liệu bạn muốn hiển thị. Bạn sẽ thêm các <p> vào col-md-6 thứ hai:

... <div class="col-md-6">   <h3 class="text-center my-4">Weather Details:</h3>   <p class="text-center">Current weather conditions:</p>   <p class="text-center">Temperature in Degrees Celsius:</p>   <p class="text-center">Temperature in Degrees Farenheit:</p>   <p class="text-center">Feels like in Degrees Celsius:</p>   <p class="text-center">Feels like in Degrees Farenheit:</p>   <p class="text-center">Location Searched:</p> </div> 

Tiếp theo, bạn sẽ thêm dữ liệu bạn đã nhận được từ đối tượng JSON vào HTML của bạn :

... <h3 class="text-center my-4 ">Weather Details:</h3> <p class="text-center">   Current weather conditions: {{this.weatherData?.current.condition.text}} </p> <p class="text-center">   Temperature in Degrees Celsius: {{this.weatherData?.current.temp_c}} </p> <p class="text-center">   Temperature in Degrees Farenheit: {{this.weatherData?.current.temp_f}} </p> <p class="text-center">   Feels like in Degrees Celsius: {{this.weatherData?.current.feelslike_c}} </p> <p class="text-center">   Feels like in Degrees Farenheit:   {{this.weatherData?.current.feelslike_f}} </p> <p class="text-center">   Location Searched: {{this.weatherData?.location.name}},   {{this.weatherData?.location.country}} </p> 

Bạn đã sử dụng một toán tử ? khi bạn truy xuất dữ liệu từ biến weatherData trong HTML của bạn . Toán tử này được gọi là Toán tử Elvis .

Vì bạn đang thực hiện cuộc gọi HTTP, bạn đang thực hiện một yêu cầu không đồng bộ . Bạn sẽ lấy lại dữ liệu đó vào một lúc nào đó, nhưng nó sẽ không phải là phản hồi ngay lập tức. Tuy nhiên, Angular sẽ vẫn tiếp tục điền vào HTML của bạn với dữ liệu bạn đã chỉ định từ biến weatherData . Nếu bạn chưa nhận lại dữ liệu vào thời điểm Angular bắt đầu điền vào các đoạn văn của bạn, sẽ có một lỗi cho biết Angular không thể tìm thấy dữ liệu đó. Ví dụ: .current hoặc .location sẽ được hiển thị là không xác định.

Người điều hành Elvis là người chuyển an toàn và ngăn điều này xảy ra. Nó yêu cầu Angular đợi và kiểm tra xem dữ liệu thời weatherData có được xác định lần đầu hay không, trước khi tiếp tục và hiển thị dữ liệu đó trong HTML. Sau khi weatherData có tất cả thông tin, Angular sau đó sẽ cập nhật các ràng buộc của bạn và hiển thị dữ liệu như bình thường.

Tệp weather.component.ts cuối cùng của bạn sẽ giống như sau:

<div class="container">   <div class="row">     <div class="col-md-6">       <h3 class="text-center my-4">Search for Weather:</h3>       <form         [formGroup]="weatherSearchForm"         (ngSubmit)="sendToAPIXU(weatherSearchForm.value)"       >         <div class="form-group">           <input             class="form-control"             type="text"             id="weatherLocation"             aria-describedby="weatherLocation"             placeholder="Please input a Location"             formControlName="location"           />         </div>         <div class="text-center">           <button type="submit" class="btn btn-success btn-md">             Search for the weather           </button>         </div>       </form>     </div>     <div class="col-md-6">       <h3 class="text-center my-4">Weather Details:</h3>       <p class="text-center">         Current weather conditions: {{ this.weatherData?.current.condition.text         }}.       </p>       <p class="text-center">         Temperature in Degrees Celsius: {{ this.weatherData?.current.temp_c }}       </p>       <p class="text-center">         Temperature in Degrees Farenheit: {{ this.weatherData?.current.temp_f }}       </p>       <p class="text-center">         Feels like in Degrees Celsius: {{ this.weatherData?.current.feelslike_c         }}       </p>       <p class="text-center">         Feels like in Degrees Farenheit: {{         this.weatherData?.current.feelslike_f }}       </p>       <p class="text-center">         Location Searched: {{ this.weatherData?.location.name }}, {{         this.weatherData?.location.country }}.       </p>     </div>   </div> </div> 

Bạn đã theo dõi mẫu của đối tượng thời tiết JSON được trả về để xuất dữ liệu mong muốn của bạn. Lưu file của bạn, quay lại trình duyệt và nhập London, Vương quốc Anh , bạn sẽ thấy dữ liệu thời tiết của bạn xuất hiện ở phía bên tay phải.

Hãy thử nó với các địa điểm khác nhau, như: San Francisco, US , Dakar, Senegal và Honololu, Hawaii . Bạn sẽ thấy dữ liệu thời tiết tương ứng xuất hiện cho tất cả các vị trí đó.

Kết luận

Bạn đã tạo một ứng dụng thời tiết bằng Angular, Bootstrap và API APIXU. Bạn đã cài đặt dự án Angular từ đầu, tuân theo các phương pháp hay nhất về Angular trong khi đảm bảo ứng dụng của bạn được thiết kế tốt và cài đặt phù hợp.

Angular là một khuôn khổ nâng cao cho phép bạn tạo bất cứ thứ gì từ các ứng dụng web nhỏ đến các ứng dụng lớn, phức tạp một cách dễ dàng. Angular, như với bất kỳ khung công tác nào, có một đường cong học tập, nhưng các dự án nhỏ như dự án này có thể giúp bạn nhanh chóng tìm hiểu và bắt đầu sử dụng nó một cách hiệu quả.

Một tính năng khác cần xem xét thêm vào ứng dụng của bạn là xử lý lỗi từ các yêu cầu HTTP của bạn; chẳng hạn, nếu bạn nhập vào một vị trí không hợp lệ. Một cải tiến khác sẽ là hiển thị các hình ảnh khác nhau nếu nhiệt độ nằm giữa các ngưỡng nhất định. Bạn cũng có thể tạo các ứng dụng khác nhau với Angular bằng cách sử dụng các API khác.

Bạn cũng có thể cần sử dụng NgBootstrap , là một loại Bootstrap đặc biệt được xây dựng cho Angular. Điều này cho phép bạn sử dụng tất cả các widget Bootstrap JavaScript tiêu chuẩn cũng như một số widget đặc biệt không có trong bản cài đặt chuẩn được điều chỉnh riêng cho Angular.

Mã đầy đủ cho hướng dẫn này có sẵn trên GitHub .

---

---

Các tin liên quan