Đặc trưng của AngularJS 2.0

Hi vọng với những gì tôi trình bày ở chương trước đã giúp các bạn có cái nhìn tổng quát về AngularJS 2.0 và để có một cái nhìn cụ thể hơn về những đặc trưng của AngularJS 2.0 thì chúng ta sẽ đi sâu vào từng đặc trưng của nó ở chương này và cùng nhau tìm hiểu Angular đã thay đổi Web như thế nào? angularchangingweb

A. Mobile First

Đây là một hướng phát triển khá là táo bạo của Angular Team khi họ hướng đến bài toàn thiết kế cho ứng dụng di dộng , giải quyết các vấn đề về thời gian tải, hiệu năng và các thách thức lớn trên nền tảng di dộng trước khi quay lại với máy tính và biến nó trở thành một bài toán đơn giản.

Hướng đến mobile , Angular Team thiết kế các thư viện và các routing đặc biệt cho mobile giúp lập trình viên có thể xây dựng các ứng dụng di dộng một cách “lean”-nghĩa là nhỏ gọn , tối ứng nên người sử dụng có lưu lượng băng thông thấp có thể sử dụng mà không cần chờ đợi. Các tính năng Mobile first gồm các first-class hỗ trợ cho sự kiện cử chỉ cảm ứng, điều chỉnh hiệu suất và sử dụng bộ nhớ thấp trên nền tảng Mobile mà vẫn cung cấp đầy đủ các thành phần cho việc thiết kế giao diện người dùng với hỗ trợ , đáp ứng tối đa thiết bị.

B. Future ready

Angular 2 được viết trong TypeScript - một superset của ECMAScript 6 (ES6) với việc bổ sung các tính năng bao gồm các type và annotation. TypeScript cho phép Angular được hưởng lợi từ các sản phẩm tốt nhất của JavaScript, trong khi duy trì clean (sạch sẽ) và easy-to-read(dễ đọc) mã nguồn.

ECMAScript 6 là gì ?

Bạn có biết Javascript, - ngôn ngữ lập trình web mà chúng ta vẫn sử dụng còn có một tên gọi khác là ECMAScript? ECMAScript hiện nay không phải là phiên bản đầu tiên. Dưới đây là các mốc thời gian của ECMAScript

es6

  • ECMAScript 1:(ES1) ra đời năm 1997
  • ECMAScript 2:(ES2) được giới thiệu năm 1998
  • ECMAScript 3:(ES3) được giới thiệu năm 1999
  • ECMAScript 4:(ES4) được giới thiệu năm 2000
      jQuery ra đời năm 2006
  NodeJS ra đời năm 2009
  • ECMAScript 5:(ES5) ra đời năm 2011
  • ECMAScript 6:(ES6) tháng 6 năm 2015

ES6 cung cấp một loạt các API rất hữu dụng với cấu trúc Array. Các xử lý cũng linh hoạt lên rất nhiều, trong đó nổi bật nhất phải kể đến Array Comprehension.

=> Đơn giản là ES6 là những cải tiến của ngôn ngữ JavaScript giúp chúng khoa học và ngắn gọn hơn, đưa chúng lên thành một ngôn ngữ lập trình chính thống chứ không còn là một ngôn ngữ hỗ trợ và tiêu biếu là sự phát triển của Node.js trong thời gian gần đây.

C. Phát triển linh hoạt

Sự lựa chọn của ngôn ngữ là tùy thuộc vào bạn. Ngoài việc cung cấp hỗ trợ đầy đủ cho ES6 và TypeScript, Angular 2 hoạt động tốt như nhau với ES5, Dart, CoffeeScript, và các ngôn ngữ khác để biên dịch JavaScript.

Angular 2 có thể hoạt động với nhiều ngôn ngữ

D. SPEED & PERFORMANCE

Thay đổi phát hiện nay giúp angular 2 nhanh hơn 5 lần, nhờ tunings cho công cụ JavaScript hiện đại. Nếu bạn sử dụng các cấu trúc dữ liệu mà hàm ý đảm bảo sự thay đổi (như immutables và observables), AngularJS 2 có thể sử dụng những bảo đảm để tăng tốc độ ứng dụng của bạn.

Angular JS ứng dụng được xây dựng xung quanh liên kết dữ liệu giữa DOM và đối tượng của JS . Tốc độ của Angular JS ứng được định hướng chủ yếu theo cơ chế phát hiện sự thay đổi cơ bản mà Angular Team sử dụng. Chúng tôi đã nói chuyện rất lâu về cách Angular Team hy vọng sẽ thực hiện điều này nhanh hơn bằng cách sử dụng Object.observe () khi nó trở nên có sẵn trong Chrome M35.

Object.observe () là một API cấp thấp cho phép bạn thêm một người biết lắng nghe để được thông báo khi một đối tượng JavaScript thay đổi trạng thái. nhanh hon 5 lan

E. Đơn giản và ý nghĩa

Hãy rõ ràng ý định của bạn bằng cách sử dụng tự nhiên với cú pháp easy-to-write. Giảm độ phức tạp cho nhóm của bạn: mới, cấu trúc phong phú các mẫu có thể được đọc và dễ hiểu trong nháy mắt.

F. COMPREHENSIVE ROUTING

Thiết kế tinh vi views: đường dẫn URL đồ các thành phần ứng dụng, và sử dụng các tính năng tiên tiến như các tuyến đường lồng nhau và anh chị em. Angular 2 hỗ trợ chuyển hướng card chồng, những chuyển động, và lười biếng tải cho người dùng di động. Nếu bạn đã sử dụng định tuyến từ một phiên bản trước của Angular, bạn có thể dễ dàng di chuyển đến góc 2 định tuyến.

Chúng tôi đang tham gia một cái nhìn thận trọng ở những trường hợp sử dụng biết và triển khai thực hiện các router khác trên nhiều mô hình ứng dụng vì vậy chúng tôi có thể cung cấp một router chưa mở rộng đơn giản mà nên phù hợp với tập rộng nhất của các ứng dụng.

Một vài trường hợp mà Angular Team đặc biệt quan tâm hỗ trợ bao gồm:

  • Định tuyến dựa trên trạng thái
  • Tích hợp với xác thực và ủy quyền
  • Tùy chọn bảo quản nhà nước của một số quan điểm. Đặc biệt cần thiết cho điện thoại di động!

routing

G. ANIMATIONS

Chạm trực tiếp vào cấp thấp hình ảnh động hỗ trợ trên môi trường di động và máy tính để bàn với easy-to-use sự kiện của Angular. Bạn có thể sử dụng CSS, JavaScript, và các Web Animations API để xử lý một cách thông minh cho thay đổi hình ảnh động để đáp ứng với sự kiện người dùng. Có kế hoạch lưu chuyển hoạt hình phức tạp bằng cách sắp xếp các hành vi của toàn bộ một trang web trên một timeline.

Người dùng đã quen với cảm ứng nhất định mô hình sử dụng biết. Ví dụ như di chuyển qua một danh sách bằng cách sử dụng ngón tay của mình, khoanh tròn qua các hình ảnh trong một băng chuyền, loại bỏ danh mục bằng cách swiping chúng đi. Tuy nhiên:

  • Triển khai hiện tại của băng chuyền, di chuyển vô hạn, ... không chung một phổ biến và bằng cách này có rất nhiều dự phòng và phương pháp tiếp cận khác nhau.
  • Triển khai hiện nay chủ yếu là không cung cấp một tùy chọn để sử dụng các sự kiện cuộn bản địa, như các trình duyệt cũ và cũng có một số các trình duyệt hiện tại không hỗ trợ họ tốt. Tuy nhiên, bằng cách này họ ngăn chặn hiệu suất tối ưu trên các thiết bị mới.

H. HIERARCHICAL DEPENDENCY INJECTION

Angular 2 mạnh mẽ, nhưng simple-to-use tiêm phụ thuộc, cho phép bạn duy trì các ứng dụng module mà không cần viết mã lặp lại và tẻ nhạt. Dependency injection giúp bạn viết bài kiểm tra bằng cách làm cho nó dễ dàng để tiêm kiểm tra 2 lần.

Dependency Injection vẫn là một khác biệt quan trọng giữa Angular JS và khung phía khách hàng khác trong việc loại bỏ nhiều ứng dụng của bạn đang nối dây và làm cho testability-by-mặc định một thực tế. Mặc dù chúng tôi đã rất thích những lợi ích trong việc xây dựng các ứng dụng của chúng tôi, chúng tôi không hài lòng với việc thực hiện. Chúng tôi có thể làm cho nó ít phức tạp và có khả năng nhiều hơn cùng một lúc.

Chúng ta sẽ thấy một DI ít phức tạp hơn bằng cách loại bỏ các giai đoạn cấu hình, đơn giản hóa bằng cách sử dụng cú pháp khai báo kiểu ES6 + chú thích thay vì bắt buộc. Chúng tôi sẽ tận hưởng khả năng lớn hơn bằng cách tích hợp với module DI tải qua ES6 Modules. Chúng tôi cũng sẽ thấy khả năng một cách lười biếng-tải phần của JS của chúng tôi thông qua kim phun con. di

I. HỖ TRỢ CHO CÁC THÀNH PHẦN WEB

Và với sự ra đời của ECMAScript 6:(ES6) Điều này có nghĩa là trình duyệt hỗ trợ cho những thứ như các mô-đun, các class, lambdas, generators, vv Các tính năng cơ bản chuyển đổi các kinh nghiệm lập trình JavaScript . Và thuật ngữ Web Components thường đề cập đến một bộ sưu tập của bốn thông số kỹ thuật W3C có liên quan:

  • Custom Elements - Cho phép mở rộng của HTML thông qua thẻ tùy chỉnh.
  • HTML Imports- Cho phép đóng gói các nguồn tài nguyên khác nhau (HTML, CSS, JS, vv).
  • Template Element - Cho phép sự include của inert HTML trong một tài liệu.
  • Shadow DOM - Cho phép đóng gói các DOM và CSS.

Bằng cách kết hợp bốn khả năng phát triển web có thể tạo ra các thành phần khai báo (Custom Elements) được đóng gói đầy đủ (Shadow DOM). Các thành phần này có thể mô tả quan điểm riêng của họ (Template Element) và có thể được dễ dàng đóng gói để phân phối cho các nhà phát triển khác (Imports HTML).

webcomponent Những thứ như scope,controller,modules hay dirctives đã không còn tồn tại trong Angular 2 mà đơn giản chỉ còn Components và Template syntax. Điều này làm trang web trở nên đơn giản và rõ ràng hơn nhiều . Một sự thay đổi lớn từ Angular 1.x sang Angular 2.

J. INTERNATIONALIZATION (I18N) & ACCESSIBILITY

Đạt đến tất cả người dùng của bạn. Sử dụng định dạng tin nhắn ICU quen thuộc trong cú pháp nội suy góc ({{}}), bao gồm cả pluralization và giới luật. Tự động hóa khai thác tin nhắn, giả nội địa hóa, và cập nhật bản dịch. Tạo các ứng dụng tĩnh cho mỗi miền địa phương. Thúc đẩy khả năng tiếp cận dễ dàng thông qua trình đọc màn hình và các thiết bị trợ giúp bằng cách tự động tạo ra các thuộc tính ARIA thích hợp