GLOSSARY

The difference between the right word and the almost right word is the difference between lightning and a lightning bug. - Mark Twain

Annotation

Annotation (cú pháp @) là một “decorator”, một tính năng của typescript để thêm metadata về class

Attribute Directive

Một danh mục Directive có thể lắng nghe và thay đổi hành vi của HTML elements, attributes, properties và components. Chúng thường được biểu diễn như các thuộc tính (attribute) HTML.

Ví dụ: ng-class

Binding

Trong các ứng dụng Angular hầu như luôn luôn đề cập tới Data Binding (liên kết dữ liệu) và hành vi liên kết một property đối tượng HTML với một property đối tượng dữ liệu. Có thể tham khảo môtt liên kết Dependency Injection giữa một "token" hoặc "key" và một dependency provider.

Bootstrap

Chúng ta khởi động một ứng dụng Angular bằng "bootstrapping" với phương thức bootstrap. Phương thức bootstrap xác định của một "root" Component cấp cao của ứng dụng và tùy chọn đăng ký nhà cung cấp dịch vụ với hệ thống Dependency Injection. Chúng ta có thể tải khởi động nhiều ứng dụng trong cùng một file index.html.

Component

Một Class chịu trách nhiệm về exposing data đến một View và xử lý hầu hết các hiển thị và sự tương tác người dùng của view. Component là một trong những khối xây dựng quan trọng nhất trong hệ thống Angular. Trong thực tế, một Angular Directive luôn đi cùng với một Template. Các nhà phát triển áp dụng @Component decorator đến component class, từ đó gắn vào class siêu dữ liệu (metadata) component cần thiết mà Angular cần để tạo ra một thực thể component và trả lại nó với template của nó như là một View. Những người quen thuộc với mô hình "MVC" và "MVVM" sẽ nhận ra những thành phần trong vai trò của "Controller" hoặc "View Model".

Data Binding

Các ứng dụng hiển thị các giá trị dữ liệu cho người dùng và phản ứng với các hành động của người dùng (nhấp chuột, chạm, nhấn phím...). Chúng ta có thể đẩy các giá trị dữ liệu ứng dụng vào HTML, kèm theo các lắng nghe sự kiện, kéo các giá trị đã thay đổi từ màn hình và cập nhật các giá trị dữ liệu đó... tất cả bằng tay.Hoặc chúng ta có thể khai báo mối liên hệ giữa một HTML widget và một nguồn dữ liệu ứng dụng...và để cho một framework liên kết dữ liệu xử lý các chi tiết. Data Binding là cách tiếp cận thứ hai. Angular có một framework liên kết dữ liệu phong phú với một loạt các thao tác liên kết dữ liệu và cú pháp hỗ trợ việc khai báo. Có nhiều hình thức liên kết: Interpolation, Property Binding, Event Binding, Attribute Binding, Class Binding,...

Decorator | Decoration

Một Decorator là một hàm thêm siêu dữ liệu (metadata) vào một Class, các thành viên của nó (properties, methods) và các tham số hàm. Decorator là một tính năng ngôn ngữ JavaScript, thực thi trong TypeScript và đề xuất cho ES2016 (AKA 2017). Chúng ta áp dụng một decorator bằng cách đặt nó phía trên hoặc phía trái của thứ mà nó “trang trí”.

Dưới đây là một ví dụ của một @Component decorator xác định một Class như một Angular Component và một @Input decorator áp dụng cho một property của component đó.

Dependency Injection

Dependency Injection là cả một design pattern và một cơ chế về việc tạo và cung cấp các bộ phận của một ứng dụng đến các bộ phận khác của một ứng dụng yêu cầu chúng.

Các nhà phát triển Angular muốn tự xây các ứng dụng bằng việc định nghĩa nhiều bộ phận đơn giản mà mỗi bộ phận làm tốt một việc nào đó và sau đó mắc nối chúng lại với nhau trong thời gian chạy.

Các bộ phận này thường dựa trên các bộ phận khác. Một bộ phận Angular Component có thể dựa vào một bộ phận service để có được dữ liệu hoặc thực hiện một phép tính. Khi một bộ phận "A" dựa trên bộ phận khác là "B", chúng ta nói rằng "A" phụ thuộc vào "B" và "B" là một sự phụ thuộc của "A".

Chúng ta có thể yêu cầu một "Hệ thống Dependency Injection" để tạo ra "A" cho chúng ta và xử lý tất cả các gói phụ thuộc. Nếu "A" cần "B" và "B" cần "C", hệ thống giải quyết rằng chuỗi các phụ thuộc và trả về một thực thể đầy đủ của "A". Angular cung cấp và dựa vào hệ thống Dependency Injection phức tạp riêng của mình để lắp ráp và chạy các ứng dụng bằng cách "inject" bộ phận ứng dụng vào các bộ phận ứng dụng khác ở đâu và khi nào cần.

Directive

Một Class chịu trách nhiệm về việc tạo, tái định hình và tương tác với các thành phần HTML trên bộ xét duyệt DOM. Các Directive là tính năng cơ bản nhất của Angular. Một Directive gần như luôn gắn liền với một phần tử hoặc một thuộc tính HTML.

Có ba loại directive trong Angular:

• Components
• Structural directives
• Attribute directives

Component thực sự là một directive với một template. Nó phổ biến nhất trong ba loại directive nói trên.

Structural directive thay đổi DOM layout bằng cách thêm vào hoặc loại bỏ các phần tử DOM. NgFor và NgIf là hai ví dụ quen thuộc.

Attribute directive thay đổi sự xuất hiện hay hành vi của một phần tử (element).

Ví dụ: Directive có sẵn NgStyle có thể thay đổi một số style phần tử cùng một lúc

ECMAScript

ECMAScript là đặc tả kỹ thuật chính thức ngôn ngữ JavaScript. Các phiên bản mới nhất của JavaScript là ECMAScript 2015 (AKA “ES2015” hoặc “ES6”) và nhiều nhà phát triển Angualr 2 sẽ viết ứng dụng của họ trong phiên bản này hoặc một phương ngữ giống như TypeScript.

ES6

Cách viết ngắn gọn của ECMAScript 2015

Injector

Một đối tượng trong hệ thống Angular Dependency Injection có thể tìm thấy có tên “dependency” trong bộ nhớ cache của nó hoặc tạo ra như một điều với một provider được đăng ký.

Input

Một directive property có thể là target của một Property Binding. Luồng các giá trị dữ liệu đi vào property này từ data source đã xác định trong biểu thức template bên phải dấu “=”.

Interpolation

Một hình thức của *Property Data Binding trong đó một biểu thức template được đặt trong cặp dấu ngoặc {} :

Lifecycle Hooks

Directives và Components có một vòng đời được quản lý bởi Angular vì nó tạo ra, cập nhật và huỷ chúng. Các nhà phát triển có thể khai thác vào những thời điểm then chốt trong vòng đời bằng cách thực hiện một hoặc nhiều giao diện “Vòng đời Hook” :

• OnChanges: được gọi khi các giá trị liên kết vào/ra thay đổi.
• OneInit: sau OnChanges đầu tiên
• DoCheck: Phát hiện thay đổi tuỳ chỉnh của developer
• AfterContenInit: sau khi nội dung component được khởi tạo
• AfterContentChecked: sau mỗi lần kiểm tra nội dung component.
• AfterViewInit: sau khi các khung nhìn của component được khởi tạo
• AfterViewChecked: sau mỗi kiểm tra các khung nhìn của component.
• OnDestroy: ngay trước khi directive bị huỷ.

Output

Output là một directive property có thể là target của một Event Binding. Luồng ra các sự kiện của property này được xác định trong biểu thức template bên phải dấu “=”

Pipe

Một Pipe là một hàm chuyển đổi các giá trị đầu vào (input) sang các giá trị đầu ra (output) hiển thị trong một khung nhìn (view). Chúng ta sử dụng @Pipe để kết hợp hàm pipe với một cái tên. Sau đó chúng ta có thể sử dụng cái tên này trong HTML của chúng ta để khai báo việc chuyển đổi các giá trị trên màn hình.

Dưới đây là một ví dụ sử dụng pipe currency xây dựng sẵng để hiển thị một giá trị số trong currency cục bộ:

Provider

Một Provider tạo ra một thực thể của một sự phụ thuộc cho hệ thống Dependency Injection. Nó liên kết với một token để dò tìm code – đôi khi được gọi là một “công thức” (recipe) – điều đó có thể tạo ra một giá trị phụ thuộc.

Ví dụ: new Provider(Foo, {useClass: Foo}) tạo một Provider có liên kết với Foo token đến một hàm tạo ra một thực thể mới của Class **Foo**. Có nhiều cách khác nhau để tạo các token và các recipe

Router

Hầu hết các ứng dụng bao gồm nhiều màn hình hoặc nhiều khung nhìn (view). Người dùng điều hướng giữa chúng bằng cách nhấn vào các liên kết và các nút và có nhưng hành động tương tự khiến ứng dụng thay đổi khung nhìn khác nhau . Các bộ định tuyến (router) trong Angular là một cơ chế đa dạng về cấu hình và quản lý cho toàn bộ quá trình chuyển hướng bao gồm cả việc tạo ra và huỷ các khung nhìn.

Structural Directive

Một danh mục Directive có thể thay đổi bố cục DOM bằng cách thêm/xoá/thao tác với các phần tử và con của chúng.

Ví dụ: ng-if - Directive điều kiện và ng-for - directive vòng lặp.

Template

Một Template là một đoạn mã HTML mà Angular sử dụng để trả lại một khung nhìn (View) với sự hỗ trợ và điều khiển liên tục từ một Directive (đặc biểu là một Component).

Template Expression

Template Expessioin là một biểu thức trong cú pháp giống JavaScript mà Angular ước tính trong một sự liên kết dữ liệu (data binding).

Transpile

Transpile là quá trình của sự chuyển đổi mã (code) được viết bằng một hình thức của JavaScript (ví dụ: TypeScript) sang một hình thức khác của JavaScript (ví dụ: ES5)

TypeScript

TypeScript là một bản mở rộng của JavaScript được Microsoft phát triển cung cấp khả năng lập trình với các type mạnh mẽ và chức năng hướng đối tượng, hỗ trợ các tính năng ngôn ngữ ECMAScript 2015 và nhiều tính năng mà có thể kể đến trong các phiên bản tương lai của JavaScript như Decorators.

TypeScript là ngôn ngữ được ưu tiên cho phát triển Angular2.

Xem thêm về TypeScript

View

Một khung nhìn (View) là một phần của màn hình hiển thị thông tin và phản ứng lại các hành động của người sử dụng như nhấp chuột, di chuyển chuột, nhấn phím. Angular trả lại một khung nhin dưới sự kiểm soát của một hoặc nhiều Directive, đặc biệt Component directive và cùng các Template của chúng. Component đóng một vai trò nổi bật mà chúng ta thường xuyên thấy nó rất tiện để đề cập một thành phần (component) như một khung nhìn (view). Những khung nhìn (Views) thì thỉnh thoảng cũng bao gồm những khung nhìn khác và bất kỳ khung nhìn nào cũng có thể được load và unload tự động khi người dùng điều hướng qua các ứng dụng, thường nằm dưới sự kiểm soát của một route.

Zone

Zones là một cơ chế cho việc đóng gói (encapsulating) và ngăn chặn hoạt động không đồng bộ của ứng dụng JavaScript. Bộ xét duyệt DOM và JavaScript có một số giới hạn các hoạt động không đồng bộ, các hoạt động như các sự kiện DOM (ví dụ : nhấp chuột, di chuyển chuột,...), promises[1] và XHR gọi đến các máy chủ từ xa. Zones chặn tất cả các hoạt động này và cung cấp một zone client, cơ hội để hành động trước và sau khi hoạt động không đồng bộ hoàn tất. Angular chạy ứng dụng của chúng ta trong zone nơi mà nó có thể đáp ứng với các sự kiện không đồng bộ bằng cách kiểm tra các dữ liệu thay đổi và cập nhật thông tin nó hiển thị thông qua liên kết dữ liệu (data binding).

Có thể tìm hiểu thêm về Zone tại đây

[1] - Promises là một thư viện dùng cho lập trình bất đồng bộ (asynchronous programming),Promises đã được ứng dụng rộng rãi trên nhiều thư viện Javascript)