Các thay đổi trong phiên bản AngularJS 2.0

Bài đăng này đã không được cập nhật trong 8 năm

Giới thiệu</br> AngularJS đã trở thành một trong những mã nguồn phổ biến nhất trong thế giới phát triển ứng dụng web. Kể từ khi ra đời, nó đã chứng kiến sự tăng trưởng phi thường của cả cộng đồng các nhà phát triển cá nhân và doanh nghiệp.

Từ khởi đầu khiêm tốn, AngularJs đã vươn lên thành một Framework MVC cho việc xây dựng các ứng dụng đơn trang phức tạp. Nó đặt tầm quan trọng ngang nhau về thử nghiệm ứng dụng và ứng dụng văn bản, trong khi đơn giản hóa quá trình phát triển.

Phiên bản hiện tại của AngularJS là 1.3. Phiên bản này khá ổn định và nhanh, được sử dụng bởi Google để cấp nguồn cho một rất nhiều các ứng dụng của họ (ước tính rằng có hơn 1600 ứng dụng bên trong của Google chạy trên AngularJS 1.2 hoặc 1.3).

Angular 2.0 đã chính thức được công bố tại hội nghị tháng Mười năm 2014. Phiên bản này sẽ không phải là một bản cập nhật lớn phức tạp.

Các thay đổi của AngularJS 2.0</br>

AtScript
AtScript được đưa vào sử dụng trong Angular 2.0, AtScript được xử lí bởi trình biên dịch Traceur.Tuy nhiên bạn vẫn có thể sử dụng JavaScript / ES5 thay vì AtScript để viết các ứng dụng trong Angular 2.0

      import {Component} from 'angular';
      import {Server} from './server';

      @Component({selector: 'foo'})
      export class MyComponent {
        constructor(server:Server) {
           this.server = server;
        }
      }

Improved Dependency Injection (DI)
Dependency Injection trong Angular 2.0 được cải thiện khá nhiều, nó sẽ lưu lại các address của các issues,đồng thời thêm các chức năng bị thiếu như child injectors và lifetime/scope.
Child Injectors
A child injector kế thừa lại tất cả các services của cha mẹ của chính nó. Tùy theo từng yêu cầu mà các loại objects khác nhau có thể được gọi ra và tự động ghi đè lên các various scopes.
Dynamic Loading
Đây là feature được coi là bị thiếu trong phiên bản hiện tại của Angular. Nó được thay thể ở trong phiên bản Angular 2.0, cho phép các developers thêm mới các directives hoặc controllers
Directives
Trong Angular 2.0 có 3 loại directives:

Component Directives – directive này sẽ tạo ra các thành phần được tái sử dụng bằng cánh đóng gói các logic bên trong JavaScript, HTML hoặc CSS
Decorator Directives – các directives sẽ được dùng để trang trí các elements (ví dụ dùng cho các tooltip, hoặc ẩn hiện các elements thông qua các ng-show/ng-hide).

    @DecoratorDirective({
        selector:'[ng-show]',
        bind: { 'ngShow': 'ngShow' },
        observe: {'ngShow': 'ngShowChanged'}
    })
    export class NgShow {
        constructor(element:Element) {
            this.element = element;
        }

        ngShowChanged(newValue){
            if(newValue){
                this.element.style.display = 'block';
            }else{
                this.element.style.display = 'none';
            }
        }
    }

Template Directives – directive sẽ tái sử dụng lại các HTML template. instantce của template sẽ được chèn vào DOM để có thể kiểm soát đươc toàn bộ các directive

    @TemplateDirective({
        selector: '[ng-if]',
        bind: {'ngIf': 'ngIf'},
        observe: {'ngIf': 'ngIfChanged'}
    })
    export class NgIf {
        constructor(viewFactory:BoundViewFactory, viewPort:ViewPort) {
            this.viewFactory = viewFactory;
            this.viewPort = viewPort;
            this.view = null;
        }

        ngIfChanged(value) {
            if (!value && this.view) {
                this.view.remove();
                this.view = null;
            }

            if (value) {
                this.view = this.viewFactory.createView();
                this.view.appendTo(this.viewPort);
            }
        }
    }

Routing Solution
Bao gồm các chức năng cơ bản :

Simple JSON-based Route Config
Optional Convention over Configuration
Static, Parameterized and Splat Route Patterns
URL Resolver
Query String Support
Use Push State or Hashchange
Navigation Model (For Generating a Navigation UI)
Document Title Updates
404 Route Handling
Location Service
History Manipulation

Screen Activator Điều này sẽ cung cấp cho các nhà phát triển kiểm soát tốt hơn các vòng đời chuyển hướng, thông qua một tập hợp function can * callbacks:

canActivate – Cho phép / Ngăn điều hướng đến các controller mới.
activate – Trả lời chuyển hướng thành công với controller mới.
canDeactivate – Cho phép / Ngăn chặn chuyển hướng đi từ controller cũ.
deactivate – Trả lời chuyển hướng thành công với controller cũ.
Các callbacks sẽ trả về giá trị Boolean và Promise sẽ dùng các giá trị trả về để điều hướng theo yêu cầu cụ thể.

Logging
Angular 2.0 có 1 services riêng gọi là diary.js ,là 1 chức năng riêng phục vụ cho việc ghi log lại những thao tác của bạn.
Scope
$scope sẽ bị xóa bỏ ở trong phiên bản Angular 2.0 nhằm ủng hộ việc sử dụng ES6. THêm vào đó cấu trúc của Angular 2.0 bạn có thể thấy tương tự giống với ReactJS, nhằm múc đích để kết hợp lại 2 ngôn ngữ này cho các developer dễ dàng thao tác với chúng.

JavaScript HTML

Mục lục