Angular là gì? 5 phút tìm hiểu cơ bản về Angular

Bạn đang cần một môi trường dùng để viết giao diện web bằng các ngôn ngữ lập trình HTML, CSS hay JavaScript và các dòng lệnh terminal? Bạn đang cần một công cụ hỗ trợ cho phép các nhà phát triển mở rộng dự án và tạo phần mềm mới. Vậy thì Angular là một trong những cái tên bạn không thể bỏ qua? Vậy Angular là gì? BKHOST sẽ cùng bạn tìm hiểu về Angular trong bài viết này.

Tóm Tắt

Angular là gì ?

Angular là một framework JavaScript được viết bằng TypeScript bao gồm các ứng dụng và thư viện web được trang bị nhiều chức năng như quản lý, giao tiếp, kiểm tra hay cập nhật code.

Đăng ký chứng chỉ SSL tại BKHOST

Bạn đang đọc: Angular là gì? 5 phút tìm hiểu cơ bản về Angular | BKHOST

Chứng chỉ SSL giúp bảo vệ những thanh toán giao dịch trực tuyến, nâng cao độ uy tín của website với người mua, bằng cách bảo vệ tính riêng tư toàn bộ những tài liệu được truyền giữa những sever và những trình duyệt .BKHOST cam kết giá tốt nhất thị trường, mua ngay :mua ssl

Angular là một công cụ mã nguồn mở dành cho các nhà phát triển, lập trình viên khởi tạo và hoạt động các dự án của mình. Công cụ cho phép bạn tạo ra các ứng dụng có thể mở rộng từ những dự án của nhà phát triển hoặc doanh nghiệp và giúp quản lý các tác vụ một cách dễ dàng và hiệu quả.

Ví dụ 1 số ít tác vụ với Angular CLI :

ng build: Biên dịch ứng dụng Angular vào thư mục output.
ng serves: Tạo và xử lý các thay đổi của ứng dụng.
ng generate: Tạo hoặc sửa đổi tệp dựa trên lược đồ.
ng test: Chạy kiểm tra đơn vị trong dự án.
ng e2e: Tạo, xử lý và chạy kiểm tra ứng dụng Angular.

Những gì bạn sẽ tạo ra với Angular

Sau đây chúng tôi sẽ hướng dẫn bạn tạo một ứng dụng Angular để quản trị, chỉnh sửa và giải quyết và xử lý tác vụ với Angular .

Điều kiện bắt buộc

Trước khi setup Angular, bạn nên kiểm tra những yếu tố sau đây :

Node.js: các phiên bản LTS của Node.js bắt buộc đang hoạt động hoặc được bảo trì tạm thời. Để kiểm tra LTS, hãy mở tệp package.json và xem engines. Để xem thông tin cài đặt Node.js, mở tệp nodejs.org. Để kiểm tra phiên bản Node.js có đang hoạt động trên hệ thống hay không, hãy chạy lệnh “node -v”
Trình quản lý gói npm Angular: Trước khi tải xuống các gói npm cung cấp cho Angular nhiều tính năng quản lý các ứng dụng, bạn cần phải có trình quản lý gói npm Angular. Hướng dẫn này sử dụng giao diện dòng lệnh npm client. Để kiểm tra npm client đã được cài trên máy chủ hay chưa, hãy vào cửa sổ dòng lệnh chạy lệnh Node.js npm -v

Thiết lập ứng dụng

Cài đặt Angular CLI cho phép chạy các lệnh terminal để tạo và hoạt động các ứng dụng bằng lệnh:

npm install -g @angular/cli

Tạo một ứng dụng Angular CLI mới trong thư mục desktop với tên: ng new todo, chạy lệnh:

ng new todo --routing=false --style=css

Khởi động ứng dụng Angular và các tính năng như thẻ bổ sung, xử lý điều hướng hay các phiên bản, chạy lệnh:

ng new - routing - style

Lưu ý: Thông báo yêu cầu thực hiện kiểm tra, chọn “yes”.Tạo một ứng dụng Angular CLI mới trong thư mục desktop với tên :, chạy lệnh : Khởi động ứng dụng Angular và những tính năng như thẻ bổ trợ, giải quyết và xử lý điều hướng hay những phiên bản, chạy lệnh :: Thông báo nhu yếu thực thi kiểm tra, chọn “ yes ” .

Điều hướng vào dự án mới với lệnh “cd”

cd todo

Để chạy ứng dụng, sử dụng lệnh “ng serve”

ng serve

Khi CLI yêu cầu phân tích, chọn “no”Để chạy ứng dụng, sử dụng lệnh “ Khi CLI nhu yếu nghiên cứu và phân tích, chọn “ no ”

Nếu các tệp nguồn có sự thay đổi, ứng dụng sẽ tự khởi động lại. Để xem những đổi mới đó, điều hướng trong trình duyệt web đến http://localhost: 4200/. Để tắt ứng dụng khi ng serve đang hoạt động, sử dụng tổ hợp Ctrl + c.

Làm quen với ứng dụng Angular

Trong mỗi ứng dụng Angular, CLI sẽ tạo bốn tệp thành phần gồm có mẫu, kiểu và lớp trải qua lệnh : src / app

app.module.ts: Chỉ định các tệp của ứng dụng làm hoạt động chính.
app.component.ts: Các bộ phận lớp chứa logic trên trang chính của ứng dụng.
app.component.html: Các bộ phận mẫu chứa HTML cho phép theo dõi nội dung của tệp trong trình duyệt “AppComponent”.
app.component.css: Các bộ phận kiểu chứa phiên bản tệp cho phép xác định các kiểu áp dụng cho các thành phần cụ thể của ứng dụng “AppComponent”

Angular CLI cũng sẽ tạo tệp cho phép kiểm tra các thành phần, nếu không cần thiết có thể bỏ qua bằng lệnh app.component.spec.ts

Cấu trúc của ứng dụng Angular

Angular là một ứng dụng viết bằng TypeScript ( một tập hợp JavaScript ) cung ứng cách gõ và những cú pháp đơn thuần, hạn chế lỗi .

Angular được tạo bởi 4 thành phần chính đó là một lớp TypeScript, một mẫu HTML, các kiểu và 1 trình @Component().

Class ( lớp )

Thành phần lớp nằm trong một tệp có tên cụ thể chứa các logic quan trọng trên trang chính của ứng dụng cho phép xử lý thuộc tính, sự kiện và tham chiếu các dịch vụ. Lớp sẽ ở trong các file có tên dạng như feature.component.ts.

Xem thêm: Trí Tuệ Nhân Tạo AI là gì?

Bạn có thể tạo ra những file với tên như header.component.ts, signup.component.ts, feed.component.ts. Bạn có thể tạo ra 1 thành phần @Component() đảm nhận phần giao diện chứa dữ liệu để thông báo cho Angular nơi tìm kiếm thư viện HTML và CSS. Ví dụ như đoạn code cho một thành phần dưới đây:

import { Component } from '@angular/core';
@Component({
selector: 'app-item',
// the following metadata specifies the location of the other parts of the component
templateUrl: './item.component.html',
styleUrls: ['./item.component.css']
})
export class ItemComponent {
// your code goes here
}

Trong đoạn code trên có “selector” được gọi và nó giống như một thẻ HTML hoạt động trong tệp mẫu của thành phần bất kỳ. Lệnh này cho phép bạn tạo hai thành phần và sử dụng một thành phần bên trong thành phần kia. Thành phần trong đoạn code này là Item Component và thẻ selector là app-item. Các thành phần của ứng dụng Angular cung cấp các cấu trúc cho phép bạn kiểm tra và đọc code tốt hơn.

Mẫu HTML

Ứng dụng Angular đều có mẫu HTML riêng cho các thành phần với tính năng hiển thị cách các thành phần hoạt động. Bạn có thể xác định mẫu này nội tuyến hoặc theo đường dẫn tệp. Để tham chiếu đến tệp HTML bên ngoài, sử dụng thuộc tính: templateUrl

@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
}

Để viết HTML cùng một dòng, sử dụng thuộc tính template trong cách dấu “`”:

@Component({
selector: 'app-root',
template: `

`,
})
export class AppComponent {
}

Mẫu HTML có thể được mở rộng bổ sung cho phép chèn giá trị và văn bản động. Angular sẽ tự động cập nhật Để viết HTML cùng một dòng, sử dụng thuộc tính template trong cách dấu “ ` ” : Mẫu HTML hoàn toàn có thể được lan rộng ra bổ trợ được cho phép chèn giá trị và văn bản động. Angular sẽ tự động hóa update DOM nếu những thành phần có tín hiệu đổi khác .

Ví dụ:

{{ title }}

Ký hiệu “{}” chỉ cho Angular nhận biết nội dung, giá trị của thành phần bên trong. Ví dụ ở trên là giá trị title

import { Component } from '@angular/core';

@Component ({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {
title = 'To do application';
}

Hoàn thành tải xuống thành phần và mẫu trong ứng dụng, kết quả hiển thị sẽ như sau:

To do application

Styles

Ký hiệu “ ” chỉ cho Angular phân biệt nội dung, giá trị của thành phần bên trong. Ví dụ ở trên là giá trịHoàn thành tải xuống thành phần và mẫu trong ứng dụng, hiệu quả hiển thị sẽ như sau :

Kiểu trong thành phần của Angular cho phép tùy chọn bổ sung hoặc ghi đè trực tiếp bằng các kiểu riêng của nó. Bạn cũng có thể tự viết các kiểu riêng cho thành phần cụ thể trong @Component() hoặc chỉ định đường dẫn đến tệp CSS: styles.css

Để chứa các kiểu trong @Component(), sử dụng thuộc tính styles

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styles: ['h1 { color: red; }']
})

Sử dụng các kiểu trong 1 tệp riêng cho thành phần, sử dụng thuộc tính styleUrls

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

Đối với kiểu thành phần cụ thể, bạn nên sử dụng CSS để bảo trì và hoạt động hiệu quả hơn.

Tổng kết về Angular

Sử dụng những kiểu trong 1 tệp riêng cho thành phần, sử dụng thuộc tính styleUrlsĐối với kiểu thành phần đơn cử, bạn nên sử dụng CSS để bảo dưỡng và hoạt động giải trí hiệu suất cao hơn .

Bài viết trên đây BKHOST đã tổng hợp thông tin chi tiết về khái niệm, cách thiết lập và cấu trúc của Angular. Hy vọng qua thông tin trên đây, bạn sẽ có thể cài đặt và tạo cho mình một ứng dụng Angular để quản lý các dự án một cách hiệu quả.

Nếu còn vướng mắc về Angular hoặc muốn tìm hiểu và khám phá thêm về những frameword javascript khác, hãy để lại phản hồi ở bên dưới, BKHOST sẽ vấn đáp bạn trong thời hạn sớm nhất .P. / s : Bạn cũng hoàn toàn có thể truy vấn vào Blog của BKHOST để đọc thêm những bài viết san sẻ kiến thức và kỹ năng về lập trình, quản trị mạng, website, domain, hosting, vps, server, email, … Chúc bạn thành công xuất sắc .Đăng ký tên miền tại BKHOSTBKHOST đang có chương trình khuyến mại cực shock dành cho người mua ĐK mới tên miền .

Giảm giá lên đến 70 %.
Bắt đầu chỉ từ
59k

Xem thêm: Frontend, Backend, Fullstack là gì? Phân Biệt Frontend, Backend, Fullstack

/năm đầu.

Rất nhiều tên miền đẹp đang chờ bạn. Nhanh tay chiếm hữu ngay thời điểm ngày hôm nay trước khi đối thủ cạnh tranh của bạn nhắm tới .tra tên miền

Source: https://final-blade.com
Category : Kiến thức Internet

admin

final-blade.com