Angular

Nếu đã từng tạo ra một vài ba ứng dụng Web, có lẽ rằng chúng ta đã từng tìm đến cái tên Angular, một Frameworks Javascript góp bọn họ desgin ứng dụng Web rất đầy đủ khả năng từ phía Client.

Bạn đang xem: Angular

 

1. Angular là gì?

 

Angular là một trong những javascript framework bởi google phát triển nhằm thành lập các Single Page Application (SPA) bằng JavaScript , HTML cùng TypeScript . Angular cung cấp các kĩ năng tích đúng theo mang lại animation , http service cùng gồm các tài năng như auto-complete , navigation , toolbar , menus ,… Code được viết bằng TypeScript , biên dịch thành JavaScript và hiển thị giống như trong trình chu đáo.

Để học tập được angular thì bạn cần biết những kiển thức cơ phiên bản sau:

HTMLCSSJavaScriptTypeScriptDocument Object Model (DOM)

 

2. Các phiên bạn dạng của Angular

Angular js :

Model là thành phần trung trung khu biểu đạt hành động của ứng dụng và cai quản lí dữ liệu.View được tạo ra dựa trên biết tin của Model .Controller nhập vai trò trung gian giữa Model và View với nhằm xử lý súc tích.

Angular 2 :

Sau phiên phiên bản angular js thì trong tháng 3 năm năm ngoái phiên bạn dạng bạn dạng angular 2 thành lập nhằm mục tiêu sửa chữa thay thế Angular Js với những khái niệm bắt đầu nhằm đơn giản và dễ dàng hóa cùng về tối ưu mang lại quy trình cải cách và phát triển sử dụng framework này. Angular 2 đổi khác trọn vẹn so với angular js bởi bài toán cầm Controllers và $scope ( Angular js ) bằng components với directives . Components = directives + template , tạo cho view của áp dụng và up date các xúc tích và ngắn gọn bên trên view. Angular 2 hoàn toàn được viết bằng Typescript. Angular 2 nhanh khô hơn angular js ,cung ứng nhiều căn nguyên nhiều trình chú ý, cấu trúc cdoe được tổ chức đơn giản dễ dàng với dễ sử dụng rộng.

Angular 4 :

Ra đôi mắt trong tháng 3/2017 đấy là một phiên bạn dạng nâng cấp từ Angular 2 buộc phải phong cách xây dựng ko biến hóa những bên cạnh vấn đề giảm tđọc code được tạo thành trường đoản cú kia giảm kích thước tệp được đóng gói xuống 60%, đẩy nhanh quy trình cải tiến và phát triển vận dụng.

Angular 5 :

Đã được thi công vào ngày 1 tháng 11 năm 2017 với phương châm thay đổi về vận tốc cùng form size cho nên nó nkhô giòn hơn và nhỏ tuổi hơn angular 4. Các tính năng vượt trội so với angular 4:Sử dụng HTTPClient cố gắng do thực hiện HTTPhường. : bởi vì nó nhanh khô, bình yên với tác dụng hơn.Với phiên bạn dạng Angular 5 mặc định áp dụng RxJs 5.5Multiple export aliases : Một component hoàn toàn có thể được xuất bởi những bí danh (aliases) nhằm giảm sút quá trình dịch chuyển.Internationalized Pipes for Number, Date, và Currency: Các pipe new được reviews để tiêu chuẩn hóa xuất sắc rộng.Tối ưu hóa build production bằng bài toán thực hiện mức sử dụng build optimizer được tích phù hợp sẵn vào vào CLI. Công núm này buổi tối ưu tree shark và vứt bỏ code dư vượt.Cải thiện vận tốc biên dịch bởi bài toán sử dụng TypeScript transforms, lúc này lúc build vẫn thực hiện lệnh “ng serve –aot”. AOT đã cải thiện performace khi load page cùng nó được dùng để làm deploy ứng dụng lên production

Angular 6:

Cập nhật CLI, command line interface: thêm một số lệnh mới nhỏng ng-update để gửi trường đoản cú version trước lịch sự version hiện nay tại; ng-add nhằm thêm các tính năng của vận dụng để biến một vận dụng website tân tiến.Angular Element: Cho phxay những component của Angular được thực hiện bên dưới dạng component web, sau đó rất có thể được sử dụng trong ngẫu nhiên trang HTML nào một biện pháp thuận lợi.Multiple Validators: được cho phép những Validators được áp dụng trên form builder.Tree-shakeable providers: góp vứt bỏ mã code chết.Sử dụng RxJS 6 cùng với syntax biến hóa.

Angular 7 :

Được phát hành vào 18 tháng 10 năm 2018 cùng với hầu như biến đổi nlỗi :ScrollingModule : Để scroll load dữ liệu.Drag và Drop: Chúng ta rất có thể tiện lợi thêm thiên tài kéo và thả vào một mụcAngular 7.0 sẽ update RxJS 6.3

Angular 8 :

Ra đôi mắt 28 tháng 5 năm 2019 cùng với CLI workflow improvements, Dynamic imports for lazy routes ….

Angular 9 :

Ra đôi mắt vừa qua 6 tháng hai năm 2020,Angular 9 di chuyển tất cả những áp dụng để áp dụng trình biên dịch Ivy cùng thời hạn chạy theo khoác định. Angular đã làm được cập nhật nhằm chuyển động với TypeScript 3.6 với 3.7

*

 

3. Yêu cầu

Angular hưởng thụ đọc biết về JavaScript, HTML và CSS. Nó cũng cần kiến thức về OOP. Còn phát âm biết về AngularJS thì không yêu cầu. Quý Khách vẫn sử dụng TypeScript nhằm code và nếu như khách hàng tất cả kiến thức về C# hoặc Java thì cũng dễ dàng học tập hơn.

 

4. Tại sao họ nên lựa chọn Angular

 

4.1. Angular giúp nâng cấp năng suất của các thiết kế viên.

Xem thêm: Tại Sao Màn Hình Máy Tính Bị Tối Đen Và Cách Khắc Phục 100% Thành Công

Việc phát triển Web đang có bước biến đổi đáng kể trong vài năm qua. Với phiên bạn dạng ECMAScript (ES) 2015 – chúng ta quen thuộc cùng với cái thương hiệu ES6, với hầu như class tuyệt arrow function. Angular 2+ áp dụng hồ hết tính năng vượt trội này góp bài toán code cùng với Angular trở đề xuất ví dụ với dễ dàng học tập rộng không ít.Thêm vào kia, với câu hỏi ứng dụng Typescript – một ngôn từ – hay 1 bạn dạng upgrade quý giá của Javascript, Angular kết hợp với Typescript, họ gồm một hình thức tuyệt vời giúp xử lý các vấn đề tiêu giảm của JS nhỏng soát sổ mẫu mã dữ liệu, refactor code bình yên hơn,… trường đoản cú này cũng cung cấp tốt hơn đến câu hỏi Debug tương tự như góp những Dev đích thực hiểu rõ mã nguồn của mình hơn.

4.2. Cấu trúc cải tiến và phát triển cụ thể.Điều đặc biệt của một Frameworks so với lập trình viên chính là cấu tạo trở nên tân tiến ứng dụng của nó, với Angular đem đến một kiến trúc hết sức ví dụ, dựa trên cha nguyên tố chính: class, các dependency được cung ứng với quy mô MVVM (model-view-view/model).Angular thực hiện class vào ES6 với một loạt những nằm trong tính nhằm thi công cục bộ những cấu trúc chính yếu, mang sử bạn có nhu cầu chế tác một Angular component – Tạo một class cùng cung cấp các trực thuộc tính quan trọng. Hay bạn muốn tạo ra một Angular module – Hãy chế tác một class và tiếp tế đó những thuộc tính quan trọng. Về cơ bản vẫn là như vậy, Angular cung ứng một kết cấu ví dụ nhằm xuất bản từng tài năng cho ứng dụng của công ty.Các dependency mạnh mẽ được thực hiện trong áp dụng khi cần thiết, cùng khi đề nghị tích hợp bất cứ dependency nào, nhỏng HTTPhường. tốt Router, họ chỉ việc thêm nó vào phía bên trong constructor của class.Mô hình MVVM cũng góp Angular chiếm lợi thế vào thành lập vận dụng client-side, thường xuyên ta sẽ có được 3 điều cần quan tâm chính: sẽ là hình ảnh người dùng, mã nguồn tinh chỉnh và điều khiển giao diện cùng mô hình dữ liệu (data) đến đồ họa. Angular cùng với MVVM minh bạch hoàn toàn cụ thể các yếu tố bên trên dựa vào mô hình MVVM:

Phần hình ảnh (view) được tư tưởng trong một template bao gồm HTML dành riêng cho một component khăng khăng. Template hoàn toàn có thể là toàn cục Layout hoặc bất cứ mảnh ghnghiền làm sao vào Layout kia.Model được định nghĩa như là các thuộc tính của component class. Có thể gọi là tài liệu, phụ thuộc kia để phần View áp dụng để tiến hành.view/Model là class làm chủ cả view cũng giống như Model. Là phần code đã cách xử trí bài toán tróc nã xuất tài liệu, bên cạnh đó thực hiện các tác động của người tiêu dùng trên view.Với vấn đề vận dụng những điểm lành mạnh và tích cực của những thành phần trên, Angular khiến cho câu hỏi cách tân và phát triển ứng dụng trsống đề xuất tiện lợi và hiệu quả rộng.4.3. Extensive bindingRất nhiều ứng dụng Web làm việc cùng với tài liệu (data). App đã tróc nã xuất tài liệu từ bỏ Server cùng hiển thị tài liệu đó tới người tiêu dùng trên view, thực hiện template. Và những cửa hàng của người tiêu dùng sẽ tiến hành khiến dữ liệu đổi khác, được view ghi thừa nhận với bảo quản bên trên hệ thống. Data Binding trong Angular giúp đỡ bạn tiến hành tiến trình bên trên hết sức thuận tiện. Đơn thuần từ việc ràng buộc yếu tắc HTML trong template với những thuộc tính vào class với dữ liệu vẫn tự động hóa lộ diện trên màn hình. Với những liên tưởng của người dùng yên cầu đổi khác tài liệu, Angular thực hiện phương pháp two-way binding. Bất kì thay đổi dữ liệu tới từ view vẫn tự động update nằm trong tính “model” bên trong class.Thêm vào kia, Angular cũng cung cấp property binding – cho phép họ điều khiển và tinh chỉnh DOM bằng phương pháp ràng buộc nằm trong tính HTML với nằm trong tính của component class, data vẫn tự động hóa xuất hiện bên trong view. lấy ví dụ, bọn họ buộc ràng thuộc tính hidden đối với một thẻ img cùng với nằm trong tính hideImg bên trong class. khi trực thuộc tính hideImg nhấn giá chỉ trụ true, img đã tự động hóa hidden và ngược lại Lúc hideImg nhấn giá trị false, thẻ img vẫn tự động hiển thị cho tới người dùng.Cuối thuộc, Angular cung ứng sự kiện binding, tức là bạn có thể up load bất kể event nào trường đoản cú phía view, nhỏng HTML event. Về cơ phiên bản bọn họ sẽ gắt event với 1 method bên phía trong class. Mỗi khi sự kiện xuất hiện, method khớp ứng sẽ được xúc tiến.Extensive sầu binding giúp quy trình hiển thị tài liệu, điều khiển và tinh chỉnh DOM, tiến hành những sự kiện một bí quyết suôn sẻ tru cùng dễ ợt.

4.4. Hỗ trợ không hề thiếu kỹ năng điều hướng (routing)Đa số các ứng dụng Web không những có 1 view hay là 1 page tốt nhất, cơ mà đang hỗ trợ các view khác nhau tương xứng với với những công dụng chủ yếu. lấy một ví dụ như một trang web với những trang trình làng, trang văn bản, trang cụ thể, trang đăng nhập, đăng ký,… Chúng ta vẫn yêu cầu hiển thị đúng view vào đúng thời gian. Đó là mục đích của điều phối (routing). Và Angular hỗ trợ đầy đủ hào kiệt đến bài toán này, chúng ta có mang các đường truyền (route) cho từng page view của áp dụng. Và họ sẽ kích hoạt route dựa vào liên hệ của người dùng (user). Chúng ta có thể truyền thêm tài liệu vào các route, góp view hiển thị văn bản một bí quyết dynamic, rất có thể đảm bảo route nhằm người dùng chỉ rất có thể truy vấn sau thời điểm đang đăng nhập hoặc tất cả quyền truy vấn, rất có thể ngăn chặn vấn đề người tiêu dùng tức thì chớp nhoáng tách một trang Khi những thao tác làm việc còn dang dsống cho đến khi họ thực sự chứng thực việc rời đi hoặc bảo quản quy trình sử dụng,…Angular mặt khác cũng cung cấp child-route mang lại vấn đề điều hướng bên phía trong một route. Việc điều hướng giữa các view bên phía trong vận dụng Angular thực sự linh thiêng hoạt và trẻ trung và tràn đầy năng lượng.

4.5. Angular góp bớt buổi tối nhiều form size cùng tăng tối đa hiệu suất của vận dụng.Kích thước cùng hiệu năng có mối liên quan mật thiết Khi bọn họ thao tác trên gốc rễ Web. Một component nhỏ tuổi hơn sẽ giúp đỡ cải thiện năng suất khởi hễ – sút cả thời hạn tải về cũng tương tự thời gian cũng tương tự thời hạn compile trên trình để mắt. Giảm kích thước component với giúp tăng hiệu suất là một trong những ưu điểm cũng tương tự phương châm mà Angular mong muốn đem về cho những lập trình viên.Giảm size áp dụng rất có thể thực hiện bằng vô số cách thức. Đầu tiên bạn có thể bớt về tối nhiều kích cỡ của từng component tới tầm về tối tđọc có thể. Tiếp theo những component sẽ được bố trí mặt trongtrong Angular Module bằng một cách đề cho những team ngắn gọn xúc tích gồm liên quan mang đến nhau sẽ được download cùng nhau. Và bước máy tía, lazy loading phía bên trong những route đã chỉ downloaad rất nhiều module cần thiết đến vấn đề hiển thị câu chữ quan trọng tới người dùng, với sẽ không còn khi nào download rất nhiều ngôn từ ko quan trọng.Chúng ta bao gồm một trình biên dịch tên là AOT, trình biên chất dịch này đã chạy một lần vào thời gian build vận dụng. Trình duyệt tiếp nối vẫn download phiên bản chưa được biên dịch của áp dụng và render ứng dụng tới người tiêu dùng ngay nhanh chóng mà ko đề nghị biên dịch nó thứ nhất vào trình chăm sóc. Thêm nữa là đã koong cần tải về trình biên dịch Angular, giúp làm cho giảm đáng kể size (size) của ứng dụng cần thiết lập về.

4.6. Document với cộng đồng (community)Document mang đến Angular 2+ – angular.io – khôn xiết đầy đủ cùng cụ thể, bao quát giới thiệu cơ bản giúp đỡ bạn làm cho thân quen mau lẹ với Angular, trình làng cụ thể, từ bỏ cơ bạn dạng mang lại cải thiện những API của Angular, cũng giống như tất cả hẳn một Tutorial Basic được xây hình thành vày Angular team, cung ứng cho chính mình gấp rút thâu tóm những thuộc tính cơ bạn dạng của Framework.