Bởi thầy đã rất nhiệt tìnhtrong việc hướng dẫn trong quá trình học tập, dìu dắt chúng tôi từng bước tiếp cận, làm quencho đến hiểu được các vấn đề của môn học AngularJs và tạo ra một sản
GIỚI THIỆU ĐỀ TÀI
Mô tả đề tài
Website xem tin tức giúp cho mọi người có thể nắm bắt thông tin kịp thời, được chọn lọc mang giá trị tinh thần xứng đáng đến mọi người Đồng thời nâng cao tri thức cho cộng đồng.
Lý do chọn đề tài
Em thấy hiện nay vẫn còn nhiều người chưa có thói quen xem báo và thông tin trên mạng xã hội quá tràn lan, vì vậy em muốn thử sức để xây dựng một trang website xem tin tức bằng AngularJs kết hợp NodeJs, để vừa giúp em hiểu hơn về những công nghệ này vừa được theo đề tài mình yêu thích.
Các chức năng chính của đề tài
Công nghệ sử dụng
- Sử dụng ngôn ngữ HTML và thư viện AngularJS để xây dựng website xem tin tức
- Tạo CSDL trong SQL Server.
Môi trường lập trình
Công cụ hỗ trợ (nếu có)
- MS Paint : xử lý hình ảnh, nút lệnh, …
CƠ SỞ LÝ THUYẾT
Tổng quan về AngularJS Framework
-Angular là framework javascript mạnh mẽ Angular tăng cường HTML cho các ứng dụng web Nó có chức năng để giảm bớt quá trình phát triển ứng dụng web Từ nhiều năm trước, khi HTML mới bắt đầu, nó được dự định để xây dựng trang web hoặc có thể nói đó là một cách để hiển thị tài liệu tĩnh, không để xây dựng một ứng dụng web động Bây giờ, hãy tưởng tượng nếu HTML lần đầu tiên được dùng để xây dựng các ứng dụng web động, đó là Angular Angular là những gì HTML sẽ có được nếu nó được thiết kế để xây dựng các ứng dụng web Lời giải thích này có thể khó hiểu nhưng khi đọc tiếp về sau bạn sẽ ngạc nhiên với những gì Angular có thể làm và sẽ hiểu ý nghĩa này.
•Data-binding(liên kết dữ liệu): tự động đồng bộ dữ liệu giữa model và view
•Scope(Phạm vi): Đây là những đối tượng kết nối giữa Controller và View
•Controller: Đây là những hàm javascript xử lý kết hợp với bộ điều khiển Scope
- AngularJS sử dụng các API được xây dựng từ các web service (PHP, ASP) để thao tác với DB.
- Là singleton object được khởi tạo 1 lần duy nhất cho mỗi ứng dụng, cung cấp các phương thức lưu trữ dữ liệu có sãn ($http, $httpBackend, $sce, $controller,
$document, $compile, $parse, $rootElement, $rootScope )
•Filters: Bộ lọc lọc ra các thành phẩn của một mảng và trả về mảng mới
•Routing: chuyển đổi giữa các action trong controller
•Directives: đánh dấu vào các yếu tố của DOM, nghĩa là sẽ tạo ra các thẻ HTML tùy chỉnh
•Templates: hiển thị thông tin từ controller, đây là một thành phần của views
MVC là mô hình chia thành phần riêng biệt thành Model, View, Controller Trong khi đó, MVVM là mô hình tương tự nhưng được cải tiến hơn, gần giống với MVC nhưng có sự kết hợp giữa Model và View thành một thành phần gọi là View Model.
•Deep Linking: Liên kết sâu, cho phép bạn mã hóa trạng thái của ứng dụng trong các URL để nó có thể đánh dấu được với công cụ tìm kiếm.
•Dependency Injection: Angular giúp các nhà phát triển tạo ứng dụng dễ dàng hơn để phát triển, hiểu và thử nghiệm dễ dàng.
2.1.3.Các Components chính trong AngularJS
• Angular JS được chia làm ba thành phần chính: ng-app:
Đây là phần tử gốc của ứng dụng AngularJS => Tất cả các ứng dụng AngularJS phải có phần tử gốc.
Chúng ta chỉ có thể có một ng-app chỉ thị trong tài liệu HTML của mình Nếu có nhiều hơn một ng-app chỉ thị xuất hiện, liên kết đầu tiên sẽ được sử dụng. ng-model:
Liên kết giá trị của các điều khiển HTML (đầu vào, chọn, văn bản) với dữ liệu ứng dụng.
Với ng-model, chúng ta có thể liên kết giá trị của trường đầu vào với biến được tạo trong AngularJS. ng-bind:
Để thay thế nội dung của một phần tử HTML với giá trị của một biến hoặc biểu hiện nhất định.
Nếu giá trị của biến hoặc biểu thức thay đổi thì nội dung của phần tử HTML được chỉ định cũng sẽ được thay đổi.
• AngularJS cho phép tạo ra các ứng dụng một cách đơn giản với mã được tổ chức khoa học, rõ ràng.
• AngularJS sử dụng data bind – liên kết dữ liệu với các thẻ HTML nên làm giảm thiểu mã lệnh đọc ghi dữ liệu.
• AngularJS có thể chạy trên hầu hết các trình duyệt điện thoại thông minh.
• Các thuộc tính tích hợp (các chỉ thị) làm cho dữ liệu trong tag HTML trở nên “động”.
• Hỗ trợ ứng dụng đơn trang (SPA).
• Hỗ trợ hai chiều ràng buộc dữ liệu.
• Với AngularJS, lập trình viên sẽ viết ít code hơn, với nhiều chức năng hơn.
• Chạy ở phía người dùng (chạy trong trình duyệt) nên nên các nghiệp vụ an toàn người dùng là không khả thi.
• Phụ thuộc: Nếu người dùng vô hiệu hóa Javascript thì ứng dụng không hoạt động được.
Các thành phần chính của AngularJS
2.2.1 Angular Template Đôi lúc trong quá trình xây dựng hệ thống, file HTML trở nên phức tạp để giải quyết vấn đề này ta cần chia thành nhiều phần khác nhau, AngularJS cung cấp cho chúng ta một giảipháp hữu ích đó là template.
- Angular template là 1 đặc tả dạng declarative (khai báo), cùng với thông tin từ Model
& Controller, trở thành rendered View mà User thấy trên trình duyệt Nó là static DOM, chứa HTML, CSS, và các thành phần, thuộc tính riêng của Angular Các thành phần Angular và các thuộc tính giúp Angular thêm các hành vi và biến đổi template DOM thành dynamic view DOM.
- Nói 1 cách đơn giản nhất thì template trong AngularJS là “HTML voi81 additionalmarkup”.
Trong Angular, chúng ta có 2 cách để tạo một template.
Chúng ta có thể dùng thêm một file html bên ngoài để làm template cho file chính, ví dụ:message.html
Chúng ta có thể tích hợp thẳng template vào file hiện hành thông qua thẻ script với type là text/ng-template
Có hai cách phổ biến nhất để sử dụng template trong AngularJS: ng-include và ngRoute Ng-include được sử dụng để đưa một template tĩnh vào trang HTML, trong khi ngRoute được sử dụng để quản lý các trạng thái trang khác nhau bằng cách tải các template động dựa trên URL.
Hình 2.2 Ví dụ sử dụng template
Trong các ứng dụng thực tế, việc phân chia ứng dụng thành các thành phần khác nhau là điều cần thiết Dưới đây là lợi ích của việc chia nhỏ ứng dụng:
Dễ dàng hơn cho việc quản lý và khai báo ứng dụng cũng như kiểm tra lại sau này
Khả năng tái sử dụng cũng như tận dụng các 3rd modules
Nạp từng phần ứng dụng sẽ nhanh hơn là buộc phải nạp toàn bộ ứng dụng vào rồi mới chạy.
Trong AngularJS, module được hỗ trợ trong khai báo ng-app bên cạnh khai báo nó trongmã nguồn script, dưới đây là một template chuẩn của angular sử dụng modules:
ng-app="myModule": Khai báo một angular app là myModule, sử dụng myModuleđược khai báo trong script.
Trong script, angular.module() là hàm khai báo cho module.
cặp dấu ngoặc [] chính là mảng các module sẽ được nạp chung vào để chạy chung với ứng dụng (module chính được khai báo trong ng-app).Ví dụ:
- '$scope' là đối tượng tham chiếu tới model được sử dụng trong controller Là thành phần gắn kết giữa View và Controller Scope cung cấp các APIs để theo dõi các thay đổi của Model : $watch
-Scope cung cấp các APIs để truyền bất kỳ thay đổi nào của Model tới View :
$applyTự động đồng bộ dữ liệu giữa Model và View.
Hình 2.4 Ví dụ ModelNg-model cho biết đối tượng nhận giá trị của input {{greeting}} sẽ in ra giá trị được nhập vào input.
Ng-controller cho biết controller đang hoạt động Đoạn mã này sẽ in ra trình duyệt chuỗi “Hello World! ” được khai báo trong “GreetingController”.
Expression là thành phần quan trọng và được sử dụng xuyên suốt AngularJS, giúp truy cập dữ liệu và thực hiện các phép tính bên trong ứng dụng Expression được biểu diễn bằng ký hiệu {{ }} Không chỉ các biến khởi tạo từ controller thông qua $scope, mà bất kỳ giá trị nào có thể truy cập được trong ứng dụng đều được coi là expression.
- Expression các snippets giống JS được đặt trong bindings, kiểu như {{expression}}.
- Được xử lý bởi $parse service.
Uppercased: {{ userInput | uppercase }}
{{ "chuỗi kí tự viết thường" | uppercase }}
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}
Angular sẽ tính toán giá trị trong biểu thức và xuất ra màn hình kết quả “2 + 2 = 4”. 2.2.7 Filters (Bộ lọc)
-Trong Angular, một filter cung cấp một định dạng dữ liệu để hiển thị tới người dùng. -Theo tinh thần của UNIX filters và sử dụng các cú pháp tương tự | (pipe).
-Angular cung cấp một số filter được xây dựng sẵn như: lowercase, date, number,currency, limitTo, orderBy
19 Khi người dùng nhập dữ liệu vào input thì giá trị đó sẽ được chuyển thành chữ viết thường.
{{ "chuỗi kí tự viết thường" | uppercase }}
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}
CHUOI KÍ TỰ VIẾT THƯỜNG
Những thứ như thuộc tính, class, tên của 1 DOM element gọi chung là directive.AngularJS sẽ dựa vào chúng để attach các chỉ thị hoặc các sự kiện tới DOM element đó.
Bản thân AngularJS đã có rất nhiều các directive : ng-bind, ng-model, ng-click, ng-controller
Việc dùng directive sẽ giảm thiểu được số lượng thẻ HTML , code HTML nhìn sẽ gọn gàng và sáng sủa hơn.
AngularJS cung cấp cho chúng ta 3 loại directive đó là :
- Directive dạng element ( là 1 thẻ HTML ) viết tắt là E.
- Directive dạng attribute ( thuộc tính của 1 thẻ HTML ) viết tắt là A, dạng này là mặc định.
Directive dạng class( class CSS ) viết tắt là C.
AngularJS service là một object hoặc một function phụ trách một tác vụ nào đó Việc viếtservice chỉ là việc gom các đoạn xử lý logic vào object hoặc function để dễ quản lý hơn Cũng giống như mô hình MVC tách phần xử lý, điều hướng và hiển thị riêng biệt. Trong AngularJS service sẽ chứa tất cả các phần xử lý, Controller nhận yêu cầu và gọi các service cần thiết để xử lý, Model handle dữ liệu từ các control, View hiển thị dữ liệu, Route điều hướng request tới controller.
Bản thân AngularJS cũng chứa những service như: $http, $scope, $window,
Có 2 cách để tạo service trong
Cả 2 cách đều tạo ra được service.
Với cách 1 sau khi đăng ký tên service xong bạn sẽ được cung cấp 1 thể hiện của functionmà bạn truyền vào module.service.
Với cách 2 sau khi đăng ký tên factory, trong function truyền vào trong module.factory cầnreturn thể hiện của đối tượng tạo bên trong nó.
Angular cung cấp giải pháp hiển thị một phần HTML cụ thể trên cùng một trang mà không cần chuyển đổi trang thông qua tính năng Multiple Views and Routing Route trong AngularJS hoạt động như một bộ điều hướng các yêu cầu, chuyển hướng đến các controller tương ứng để xử lý dựa trên các đối số trong thanh URL Tính năng này đóng vai trò quan trọng trong việc tạo ra ứng dụng SPA (Single Page Application) trong AngularJS, cho phép chuyển trang mà không cần tải lại trình duyệt.
Trong AngularJs chúng ta sẽ sử dụng $routeProvider để bắt các yêu cầu Biểu thức route được tính từ sau dấu #.
Hình 2.8 Ví dụ về multiple views và routing
Từ phiên bản AngularJs 1.0.7 thì Route đã được tách thành một file js riêng biệt, và để sửdụng được nó ta phải nhúng file angular-route.min.js vào ứng dụng.
Directive ng-view được sử dụng để hiển thị dữ liệu.
- Controls (input, select, textarea) là các cách mà người dùng nhập dữ liệu.
- Form là một tập các controls với mục đích nhóm các controls liên quan với nhau.
- Form và controls cung cấp các validation services, để người dùng được báo các lỗi liên quan đến nhập dữ liệu.
- Server – side validation cũng cần thiết để đảm bảo độ an toàn của ứng dụng.
- Sử dụng thuộc tính “novalidate” để tắt chức năng validation mặc định của trình duyệt.
ng-valid:class được thêm vào phần tử nếu kiểm tra.
ng-invalid:class được thêm vào phần tử nếu không kiểm tra.
ng-pristine:class được thêm vào phần tử lúc ban đầu, trước khi AngularJS xử lý kiểm tra.
ng-dirty: class được thêm vào phần tử khi AngularJS xử lý kiểm tra.
Angular cung cấp các xử lý cơ bản cho hầu hết các kiểu input HTML5:
(text,number, url, email, radio, checkbox) kèm directives để kiểm tra
(required,pattern,minlength, maxlength, min, max).
Có thể tự đưa ra validate riêng bằng cách tự tạo directive để đưa hàm validate của mình vào ngModel controller.
- Validation có thể xuất hiện ở 2 chỗ
Model to View update: khi Model thay đổi, tất cả các hàm trong
NgModelController#$formattersarray được pipe – lined, để mỗi hàm này có thể định dạng được giá trị và thay đổi trạng thái valid của form control thông qua NgModelController#$setValidity.
View to Model update: tương tự như vậy, khi người dùng tương tác với 1 control, nó gọiNgModelController#$setViewValue Nó sẽ pipe – line tất cả các hàm trongNgModelController#$parsers array, để mỗi hàm này lần lượt chuyển đổi giá trị và trạngthái thay đổi của form control thông quaNGModelController#$setValidity.
PHÂN TÍCH VÀ XÁC ĐỊNH CÁC YÊU CẦU
Đặt câu hỏi và làm rõ yêu cầu
+ Hỏi: Khi đăng nhập vào trang web thì sẽ như thế nào?
+ Đáp: Hệ thống sẽ dựa vào phân quyền của tài khoản để xác định độc giả, admin và biên tập viên.
+ Hỏi: Người dùng có thể làm gì?
+ Đáp: Người dùng có thể xem tin, bình luận, chia sẻ tin, theo dõi chuyên mục yêu thích.
+ Hỏi: Các bài viết sẽ được quản lý như thế nào?
+ Đáp: Biên tập viên sẽ là người viết bài và đăng lên Người quản trị có nhiệm vụ là kiểm duyệt cho phép đăng lên, hoặc là xóa đi.
+ Hỏi: Có thể hiện tin tức theo sở thích cá nhân không?
+ Đáp: Đang nghiên cứu theo thói quen đọc của độc giả để chọn lọc những bài viết có liên quan đế sở thích, từ đó sẽ hiện lên những bài viết phù hợp.
Phân tích chức năng
- Thiết kế giao diện bố cục đẹp mắt lôi cuốn người đọc.
- Tương thích với các thiết bị
- Xử lý thông tin nhanh.
- Người đọc đăng ký để theo dõi, bình luận chia sẻ.
- Soạn bài viết, duyệt bài viết, xuất bản bài viết
Sơ đồ Use Case
Hình 3.1 Sơ đồ use case độc giả
3.3.2.Use case biên tập viên
Hình 3.2 Sơ đồ use case biên tập viên
3.3.3.Use case quản trị viên
25 3.3.4 Sơ đồ use case tổng quát
Hình 3.4 Sơ đồ use case tổng quát
Sơ đồ Class Diagram
Hình 3.5 Sơ đồ Class diagram
Sơ đồ Sequence Diagram
3.5.1 Thiết kế Sequence Diagram Đăng nhập
Hình 3.6 Sequence Diagram đăng nhập 3.5.2 Thiết kế Sequence Diagram Truy Cập
Hình 3.7 Sequence Diagram truy cập
DỰNG WEBSITE XEM TIN TỨC
Một số Code chính
4.2.1 Code ở app-routing.module.ts
4.2.3 Code bình luận ở bài viết
Hình 4.9 Code TypeScript của Carousel