NGHIÊN CỨU ANGULAR VÀ ỨNG DỤNG PHÁT TRIỀN BỘ CÔNG THƯƠNG TRƯỜNG ĐẠI HỌC CÔNG NGHIỆP HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO THỰC NGHIỆM MÔN TTCN KỸ THUẬT PHẦN MỀM Đề tài Tìm hiểu Angular và phát triển.
TỔNG QUAN VỀ ANGULAR
Khái niệm
Angular là một framework front-end mã nguồn mở do Google phát triển, giúp xây dựng các ứng dụng web hiện đại và sinh động Framework này sử dụng TypeScript, một ngôn ngữ lập trình dựa trên JavaScript, nhằm loại bỏ mã thừa, từ đó tạo ra các ứng dụng nhẹ hơn và nhanh hơn.
Angular là một framework mạnh mẽ giúp phát triển các ứng dụng trang đơn (SPA) tương tác và động Nó cung cấp nhiều tính năng hấp dẫn như tạo khuôn mẫu, ràng buộc hai chiều, mô-đun hóa, xử lý API RESTful, dependency injection và xử lý AJAX, mang lại trải nghiệm người dùng mượt mà và hiệu quả.
Kiến trúc Angular (Angular Architecture)
Angular tuân theo kiến trúc MVC, sơ đồ của MVC framework như hình dưới đây:
Hình 1.1 Sơ đồ kiến trúc Angular
- Controller: Bộ điều khiển đại diện cho lớp có logic nghiệp vụ.
- View: Chế độ xem được sử dụng để đại diện cho lớp bản trình bày được cung cấp cho người dùng cuối
- Model: Mô hình được sử dụng để đại diện cho dữ liệu
Các tính năng của Angular
Angular có các tính năng chính:
Mẫu MVC (Model-View-Controller) phân chia ứng dụng thành ba phần riêng biệt: lớp logic nghiệp vụ, lớp dữ liệu và lớp trình bày Sự tách biệt này giúp quản lý và bảo trì từng phần dễ dàng hơn, cải thiện hiệu suất và tính linh hoạt của ứng dụng.
Liên kết mô hình dữ liệu trong Angular cho phép người dùng kết nối dữ liệu với các điều khiển HTML mà không cần viết mã phức tạp Chỉ với một vài đoạn mã đơn giản, quá trình này trở nên dễ dàng và hiệu quả.
Viết mã ít hơn (Writing less code): khi thực hiện thao tác DOM
Mô hình Các Đối tượng Tài liệu (DOM) cho phép truy xuất và thao tác các tài liệu HTML và XML thông qua các ngôn ngữ lập trình phổ biến như Javascript và PHP Khi sử dụng Angular, số lượng mã cần viết sẽ giảm đi đáng kể so với việc sử dụng Javascript.
Kiểm thử đơn vị (Unit Testing): framework kiểm thử “Karma” giúp thiết kế các kiểm thử đơn vị cho các ứng dụng Angular
Angular CLI
Angular CLI (giao diện dòng lệnh) là công cụ nhanh chóng và hiệu quả nhất để phát triển ứng dụng Angular Nó hỗ trợ thực hiện nhiều tác vụ một cách dễ dàng và không gặp trục trặc Dưới đây là một số ví dụ về các tính năng của Angular CLI.
Các lệnh Angular cơ bản bao gồm: `ng build` để biên dịch ứng dụng vào thư mục đầu ra, `ng serve` để xây dựng và phục vụ ứng dụng đồng thời tự động xây dựng lại khi có thay đổi tệp, `ng generate` để tạo hoặc sửa đổi tệp dựa trên giản đồ, `ng test` để chạy các bài kiểm thử đơn vị cho dự án, và `ng e2e` để xây dựng và cung cấp ứng dụng Angular, sau đó thực hiện các bài kiểm tra từ đầu đến cuối.
Ưu điểm và nhược điểm của Angular
- Ưu điểm : là một giải pháp hữu hiệu dành cho các Single Page Application làm việc.
Liên kết hai chiều trong Angular cho phép đồng bộ hóa giữa lớp dữ liệu và bản trình bày, chỉ cần chỉ định điều khiển nào bị ràng buộc với phần nào của mô hình.
Hình 1.2 Ưu điểm của Angular
Có thể tái sử dụng thành phần (component) tiện ích.
Angular hỗ trợ kiểm thử, hỗ trợ cả Kiểm thử đơn vị (Unit Testing) và Kiểm thử tích hợp (Integration Testing).
Định tuyến (Routing): Angular có thể đảm nhận việc định tuyến có nghĩa là chuyển từ chế độ xem này sang chế độ xem khác.
Hỗ trợ cho các lập trình viên có thể viết code được ít hơn với nhiều chức năng hơn.
Chạy Angular linh hoạt trên nhiều loại trình duyệt khác nhau: cả PC và mobile.
Angular là một framework Front End, nhưng do bản chất của nó, khả năng bảo mật không thể so sánh với Back End Điều này dẫn đến các vấn đề về an toàn dữ liệu Nếu quyết định sử dụng Angular, bạn cần thiết lập một hệ thống kiểm tra dữ liệu hiệu quả để đảm bảo việc xử lý và trả về dữ liệu được an toàn và tối ưu nhất.
Một số trình duyệt có tính năng tắt Javascript, điều này khiến cho website không thể hoạt động đầy đủ trên những trình duyệt này.
Một số trang web phổ sử dụng Angular
Các ứng dụng stream video trực tiếp như Youtube trên Playstation 3
Các ứng dụng thương mại điện tử như T-Mobile
Trang tìm việc làm freelancer.com
Trang xem phim Netflix.com
LÀM VIỆC VỚI ANGULAR
Làm việc với Angular
Những điều cần biết khi làm việc của Angular Framework
Các thành phần (Components)
Các thành phần (components) là khối xây dựng chính cho các ứng dụng Angular Mỗi thành phần bao gồm:
Mẫu HTML khai báo những gì hiển thị trên trang
Một lớp TypeScript xác định hành vi
Bộ chọn CSS xác định cách thành phần được sử dụng trong mẫu
Tùy chọn, các kiểu CSS được áp dụng cho mẫu
Sử dụng Angular CLI để tạo một thành phần Từ cửa sổ dòng lệnh, điều hướng đến thư mục chứa ứng dụng.
Chạy lệnh: ng create component trong đó là tên của thành phần mới.
Hình 2.1 Tạo mới một thành phần
Các mẫu (Templates)
Trong Angular, mẫu là bản thiết kế cho giao diện người dùng (UI), được viết bằng HTML và cú pháp đặc biệt Các mẫu này cho phép xây dựng dựa trên nhiều tính năng mạnh mẽ của Angular.
3.1 Nội suy văn bản (text interpolation)
Nội suy, hay còn gọi là text interpolation, là quá trình nhúng các biểu thức vào văn bản được đánh dấu Mặc định, nội suy sử dụng dấu ngoặc nhọn kép “{{” và “}}” để phân cách các biểu thức.
Ví dụ minh họa cách hoạt động của nội suy: một thành phần Angular có chứa biến currentCustomer:
Sử dụng phép nội suy để hiển thị giá trị của biến này trong mẫu thành phần tương ứng:
Câu lệnh mẫu trong HTML là các phương thức và thuộc tính giúp ứng dụng phản hồi các sự kiện từ người dùng Chúng cho phép hiển thị nội dung động và gửi biểu mẫu, từ đó thu hút sự chú ý của người dùng thông qua các hành động tương tác.
Ví dụ, câu lệnh mẫu deleteHero () xuất hiện trong dấu ngoặc kép ở bên phải của ký tự bằng dấu “=” như trong (event) = "câu lệnh".
Khi người dùng nhấp vào nút “Delete hero”, Angular sẽ gọi phương thức deleteHero () trong lớp thành phần.
Trong khuôn mẫu Angular, liên kết (Binding) thiết lập kết nối trực tiếp giữa giao diện người dùng và mô hình, cho phép tương tác hiệu quả giữa phần tử DOM, chỉ thị hoặc thành phần với bản sao của thành phần mà khuôn mẫu đó thuộc về.
Kết nối này cho phép đồng bộ hóa chế độ xem với mô hình, đồng thời thông báo cho mô hình về các sự kiện hoặc hành động của người dùng diễn ra trong chế độ xem.
Thuật toán Phát hiện Thay đổi (Change Detection algorithm) của Angular chịu trách nhiệm giữ cho chế độ xem và mô hình được đồng bộ.
Liên kết (binding) luôn có hai phần
- mục tiêu sẽ nhận giá trị liên kết
- biểu thức mẫu tạo ra giá trị từ mô hình.
1) Liên kết các thuộc tính
Liên kết thuộc tính trong Angular cho phép bạn gán giá trị cho các thuộc tính của phần tử hoặc chỉ thị HTML, giúp chuyển đổi chức năng nút, thiết lập đường dẫn theo chương trình và chia sẻ giá trị giữa các thành phần Để thực hiện liên kết thuộc tính, bạn cần đặt thuộc tính trong dấu ngoặc vuông, [] để xác định thuộc tính là mục tiêu.
2) Liên kết với các sự kiện Để liên kết với một sự kiện (Event binding) cần sử dụng cú pháp liên kết sự kiện Angular Cú pháp này bao gồm: tên sự kiện đích trong dấu ngoặc đơn ở bên trái dấu bằng và câu lệnh mẫu được trích dẫn ở bên phải.
Ví dụ: tạo sự kiện click khi nhấn vào nút
Hình 2.4 Liên kết sự kiện
Liên kết hai chiều cho phép các thành phần trong ứng dụng chia sẻ dữ liệu hiệu quả Bằng cách sử dụng ràng buộc hai chiều, các thành phần có thể lắng nghe các sự kiện và đồng bộ hóa giá trị giữa các thành phần cha và con một cách tức thì.
Cú pháp liên kết hai chiều trong Angular được biểu thị bằng sự kết hợp giữa dấu ngoặc vuông và dấu ngoặc đơn, cụ thể là [()] Cú pháp này kết hợp ràng buộc thuộc tính với dấu ngoặc vuông, [] và ràng buộc sự kiện với dấu ngoặc đơn, (), tạo thành một phương thức hiệu quả để quản lý dữ liệu trong ứng dụng.
Hình 2.5 Liên kết hai chiều
Pipes là các hàm đơn giản được sử dụng trong biểu thức mẫu, cho phép nhận giá trị đầu vào và trả về giá trị đã chuyển đổi Chúng rất hữu ích trong toàn bộ ứng dụng, vì chỉ cần khai báo mỗi pipe một lần.
Ví dụ: Sử dụng pipe để hiển thị ngày là ngày 15 tháng 4 năm 1988 thay vì định dạng chuỗi thô.
Angular cung cấp các pipes tích hợp để thực hiện các phép biến đổi dữ liệu thông dụng, bao gồm cả các phép biến đổi phục vụ cho quốc tế hóa (i18n), giúp định dạng dữ liệu dựa trên thông tin ngôn ngữ.
Dưới đây là các pipes tích hợp thường được sử dụng để định dạng dữ liệu:
DatePipe: Định dạng giá trị ngày theo quy tắc ngôn ngữ.
UpperCasePipe: Chuyển văn bản thành tất cả các chữ hoa.
LowerCasePipe: Chuyển văn bản thành tất cả các chữ thường.
CurrencyPipe: Chuyển đổi một số thành chuỗi tiền tệ, được định dạng theo quy tắc ngôn ngữ.
DecimalPipe: Chuyển một số thành một chuỗi có dấu thập phân, được định dạng theo quy tắc ngôn ngữ.
PercentPipe: Chuyển một số thành chuỗi phần trăm, được định dạng theo quy tắc ngôn ngữ.
Chỉ thị (Directive)
Chỉ thị (Directives) trong Angular là các lớp bổ sung giúp cải thiện hành vi của các phần tử trong ứng dụng Chúng cho phép quản lý hiệu quả các biểu mẫu, danh sách, kiểu dáng và trải nghiệm người dùng, nhờ vào việc sử dụng các chỉ thị có sẵn của Angular.
Dưới đây là các loại chỉ thị Angular khác nhau:
Các thành phần(Components): Được sử dụng với một mẫu Loại chỉ thị này là loại chỉ thị phổ biến nhất.
Các chỉ thị thuộc tính(Attribute directives): Thay đổi giao diện hoặc hành vi của một phần tử, thành phần hoặc một chỉ thị khác.
Chỉ thị cấu trúc(Structural directives) Thay đổi bố cục DOM bằng cách thêm và xóa các phần tử DOM.
4.1 Các chỉ thị thuộc tính tích hợp
Các chỉ thị thuộc tính lắng nghe và sửa đổi hành vi của các phần tử, thuộc tính, thuộc tính và thành phần HTML khác.
ngClass: Thêm và xóa một tập hợp các lớp CSS.
ngStyle: Thêm và xóa một tập hợp các kiểu HTML.
ngModel: Thêm liên kết dữ liệu hai chiều vào một phần tử biểu mẫu
1) Sử dụng ngClass với một biểu thức
2) Đặt kiểu nội tuyến với ngStyle
Sử dụng NgStyle để đặt nhiều kiểu nội tuyến đồng thời, dựa trên trạng thái của thành phần.
3) Hiển thị và cập nhật các thuộc tính với ngModel
Sử dụng lệnh NgModel để hiển thị thuộc tính dữ liệu và cập nhật thuộc tính đó khi người dùng thực hiện thay đổi.
4.2 Chỉ thị cấu trúc tích hợp
Các chỉ thị cấu trúc đóng vai trò quan trọng trong việc xác định bố cục HTML Chúng điều chỉnh và thay đổi cấu trúc của DOM thông qua việc thêm, xóa và thao tác các phần tử máy chủ liên quan Một số chỉ thị cấu trúc phổ biến bao gồm:
ngIf: tạo hoặc loại bỏ có điều kiện các lượt xem phụ từ mẫu.
ngFor: Lặp lại một nút cho mỗi mục trong danh sách.
ngSwitch: Một tập hợp các lệnh chuyển đổi giữa các chế độ xem thay thế.
Khi ngIf có giá trị false, Angular sẽ xóa phần tử cùng với các phần tử con của nó khỏi DOM, từ đó giải phóng bộ nhớ và tài nguyên bằng cách loại bỏ các thành phần liên quan.
2) Sử dụng ngFor để hiển thị danh sách
NgSwitch hiển thị một phần tử trong số một số phần tử có thể có, dựa trên điều kiện chuyển đổi.
Dependency injection
Chèn phụ thuộc (Dependency Injection - DI) là một mẫu thiết kế cho phép một lớp nhận các dịch vụ hoặc đối tượng cần thiết từ bên ngoài, thay vì tự tạo ra chúng Điều này giúp cải thiện khả năng mở rộng và kiểm thử của ứng dụng, đồng thời giảm sự phụ thuộc giữa các lớp.
Khung DI của Angular cung cấp các phụ thuộc vào một lớp khi khởi tạo.
Sử dụng Angular Dependency Injection (DI) giúp tăng tính linh hoạt và mô-đun cho ứng dụng của bạn Để đưa một phụ thuộc vào hàm tạo của thành phần, bạn cần cung cấp một đối số với kiểu phụ thuộc trong hàm tạo Chẳng hạn, trong ví dụ dưới đây, HeroService được chỉ định trong phương thức khởi tạo của HeroListComponent, với heroService có kiểu là HeroService.
Hướng dẫn dành cho nhà phát triển Angular
Hướng dẫn dành cho nhà phát triển Angular cung cấp một khung ứng dụng mạnh mẽ, bao gồm một bộ sưu tập thư viện tích hợp với nhiều tính năng đa dạng, giúp tối ưu hóa quá trình phát triển ứng dụng.
Các thư viện Angular bao gồm định tuyến, quản lý biểu mẫu, giao tiếp máy khách-máy chủ và hơn thế nữa.
Bài viết này cung cấp hướng dẫn chi tiết cho các nhà phát triển để nắm bắt và áp dụng hiệu quả các tính năng của Angular trong ứng dụng của họ.
6.1 Định tuyến Angular Định tuyến Angular(Routing and Navigation), trong ứng dụng một trang,việc thay đổi những gì người dùng nhìn thấy bằng cách hiển thị hoặc ẩn các phần của màn hình tương ứng với các thành phần cụ thể, thay vì đi ra ngoài máy chủ để lấy một trang mới Khi người dùng thực hiện các tác vụ ứng dụng, họ cần di chuyển giữa các dạng xem khác nhau đã xác định. Để xử lý điều hướng từ chế độ xem này sang chế độ xem tiếp theo, nên sử dụng Bộ định tuyến Angular Bộ định tuyến cho phép điều hướng bằng cách diễn giải URL của trình duyệt như một chỉ dẫn để thay đổi chế độ xem.
Khám phá một ứng dụng mẫu có các tính năng chính của bộ định tuyến bằng ví dụ sau.
- Nhập các thành phần mới.
- Để sử dụng các thành phần mới, hãy nhập chúng vào AppRoutingModule ở đầu tệp, như sau:
- Sau đó xác định các tuyến đường trong mảng Tuyến đường.
Mỗi tuyến đường trong ứng dụng Angular được biểu diễn dưới dạng một đối tượng JavaScript với hai thuộc tính chính Thuộc tính đầu tiên, "đường dẫn", chỉ định URL cho tuyến đường, trong khi thuộc tính thứ hai, "thành phần", xác định thành phần mà Angular sẽ sử dụng cho đường dẫn đó.
Sau khi xác định các tuyến đường, bạn cần thêm chúng vào ứng dụng bằng cách gán thẻ liên kết cho thuộc tính routerLink Đặt giá trị cho thuộc tính này để hiển thị thành phần tương ứng khi người dùng nhấp vào liên kết Cuối cùng, cập nhật mẫu thành phần để bao gồm , giúp Angular cập nhật chế độ xem ứng dụng với thành phần cho tuyến đường đã chọn.
Hình 2.15 Sử dụng định tuyến
Xử lý đầu vào từ người dùng qua các biểu mẫu là yếu tố quan trọng trong nhiều ứng dụng hiện nay Những ứng dụng này sử dụng biểu mẫu để người dùng có thể đăng nhập, cập nhật hồ sơ, nhập thông tin nhạy cảm và thực hiện nhiều tác vụ nhập dữ liệu khác.
Angular cung cấp hai phương pháp chính để xử lý đầu vào người dùng qua biểu mẫu: phương pháp phản ứng và phương pháp mẫu Cả hai phương pháp này đều cho phép nắm bắt sự kiện đầu vào, xác thực thông tin người dùng, tạo mô hình biểu mẫu và mô hình dữ liệu, từ đó cập nhật và theo dõi các thay đổi một cách hiệu quả.
Cả hai biểu mẫu theo hướng phản ứng và hướng mẫu đều được xây dựng trên các lớp cơ sở:
formControl: Theo dõi giá trị và trạng thái xác thực của một điều khiển biểu mẫu riêng lẻ.
formGroup: Theo dõi các giá trị và trạng thái giống nhau cho một tập hợp các điều khiển biểu mẫu.
formArray: Theo dõi các giá trị và trạng thái giống nhau cho một mảng điều khiển biểu mẫu.
controlValueAccessor: Tạo cầu nối giữa các thể hiện Angular FormControl và các phần tử DOM tích hợp sẵn.
Giao tiếp với các dịch vụ phụ trợ bằng HTTP
Hầu hết các ứng dụng front-end cần giao tiếp với máy chủ qua giao thức HTTP để tải xuống hoặc tải lên dữ liệu Angular cung cấp một API HTTP cho các ứng dụng của mình thông qua lớp dịch vụ HttpClient trong @angular/common/http, giúp dễ dàng truy cập các dịch vụ back-end.
Dịch vụ máy khách HTTP cung cấp các tính năng chính:.
Khả năng yêu cầu các đối tượng phản hồi đã nhập
Xử lý lỗi được sắp xếp hợp lý
Yêu cầu và đánh chặn phản hồi Để sử dụng dịch vụ máy khách http cần:
- Thiết lập giao tiếp máy chủ, trước khi sử dụng HttpClient, cần nhập Angular HttpClientModule Hầu hết các ứng dụng đều làm như vậy trong AppModule gốc.
Hình 2.16 Thêm dịch vụ máy khách
- Sau đó, đưa dịch vụ HttpClient vào như một phần phụ thuộc của một lớp ứng dụng, như được hiển thị trong ví dụ ConfigService sau đây.
Hình 2.17 Chèn phụ thuộc HttpClient
ỨNG DỤNG PHÁT TRIỂN
Khảo sát bài toán
Hiện nay, nhiều trường học vẫn quản lý thông tin học sinh, sinh viên bằng phương pháp thủ công, gây ra khó khăn trong việc cập nhật và duy trì tính chính xác của dữ liệu Việc chỉnh sửa thông tin trở nên phức tạp và thiếu thẩm mỹ, đồng thời tài liệu lưu trữ cũng dễ bị hư hỏng và bị xâm nhập bởi côn trùng.
Việc áp dụng công nghệ thông tin vào quản lý thông tin học sinh, sinh viên là rất cần thiết Mục tiêu là xây dựng chương trình “Quản lý học viên” để hỗ trợ công tác quản lý thông tin học viên trong lớp học, giúp quá trình này trở nên đơn giản, tiện ích và dễ dàng hơn.
Giáo viên dễ dàng thực hiện các công việc quản lý như quản lý thông tin học sinh, sinh viên, quản lý điểm, điểm danh đầu giờ…
Yêu cầu chức năng của hệ thống:
Xem thông tin trang chủ
Xem danh sách bài viết
Quản lý thông tin sinh viên
Yêu cầu phi chức năng của hệ thống:
Website trình bày dễ hiểu, giao diện dễ dùng, đẹp mắt.
Ngôn ngữ phù hợp, thuận tiện với người sử dụng.
Website có thể nâng cấp, bảo trì khi cần bổ sung, cập nhật những tính năng mới.
Phân tích và thiết kế
2.1 Biểu đồ use case của hệ thống
Hình 3.1 Biểu đồ use case của hệ thống
Mô tả ý nghĩa các use case theo biểu đồ use case hệ thống:
Đăng nhập: Đăng nhập hệ thống với vai trò người sử dụng.
Xem trang chủ: Người dùng truy cập giao diện trang chủ.
Xem diễn đàn: Người dùng truy cập xem thông tin diễn đàn.
Xem danh sách bài viết: Người dùng xem danh sách các bài viết trên diễn đàn
Quản lý thông tin sinh viên: Người dùng thực hiện thêm, sửa, xóa danh sách sinh viên.
Quản lý môn học: Người dùng thực hiện xem, điểm danh môn học.
Quản lý điểm: Người dùng thực hiện nhập điểm, cập nhật điểm của từng môn học.
2.2 Biểu đồ lớp của hệ thống
Hình 3.2 Biểu đồ lớp của hệ thống
Cài đặt chương trình
Giao diện trang Giới thiệu
Hình 3.4 giao diện trang Giới thiệu
Giao diện trang Diễn đàn
Hình 3.5 giao diện trang Diễn đàn
Hình 3.6 Quản lý sinh viên
Hình 3.7 Form thêm mới sinh viên
Hình 3.8 Form sửa thông tin sinh viên
Hình 3.9 Danh sách các môn học
Hình 3.10 Xem điểm môn học
Hình 3.11 Form sửa thông tin và nhập điểm
