angular 2 la gi

By Admin 09/11/2023 0

I. Angular 2 là gì ?

  • Angular 2 là một framework UI nhằm xây cất phần mềm trang web bên trên desktop và mobile.
  • Nó được xây cất dựa vào Javascript. Chúng tớ rất có thể người sử dụng nó nhằm xây cất 1 phần mềm client side thú vị người sử dụng HTML, CSS và Javascript.
  • Angular 2 với thật nhiều nâng cấp đối với Angular 1 nhằm đơn giản học tập và cải cách và phát triển những phần mềm quy tế bào công ty.
  • Với angular 2 thì tất cả chúng ta đơn giản xây cất được một phần mềm rất có thể đơn giản không ngừng mở rộng, gia hạn, kiểm nghiệm và chuẩn chỉnh hóa phần mềm của tôi.

II. Các chức năng nhập angular 2

Dưới đấy là những chức năng nổi trội nhập angular 2

  • Two-way data binding Đây là một trong mỗi chức năng tuyệt với nhất nhập angular 2. Dữ liệu được binding một cơ hội tự động hóa và nhanh gọn, những thay cho thay đổi nhập view sẽ tiến hành tự động hóa update nhập trong những component class.
  • Powerful routing support Angular 2 tương hỗ uy lực những routing trải qua cơ hội vận chuyển trang ko đồng nhất bên trên nằm trong 1 trang được chấp nhận tất cả chúng ta tạo nên 1 single page application.
  • Expressive HTML Angular 2 được chấp nhận tất cả chúng ta người sử dụng những cấu tạo thiết kế như câu mệnh lệnh if, vòng lặp for, .. nhằm render và trấn áp những trang HTML.
  • Modular by design Angular 2 được design theo phía modul hóa nhằm tổ chức triển khai và quản lý và vận hành code một cách đảm bảo chất lượng rộng lớn.
  • Built in back kết thúc support Angular 2 được xây cất nhằm tương hỗ việc tiếp xúc với back-end servers và thực thi đua ngẫu nhiên business logic hoặc lấy tài liệu.
  • Active community Angular 2 được tương hỗ vì thế google và có một xã hội phần đông sẵn sàng tương hỗ và trả lời bất kể thắc mắc này của người tiêu dùng.

III. Sự khác lạ ở trung tâm angular 1 và angular 2

1. Hỗ trợ ES6

Angular 2 trọn vẹn được viết lách vì thế Typescript. Điều tê liệt đồng nghĩa tương quan là nó tương hỗ mang đến ES6 Modules, class frameworks, ..

Bạn đang xem: angular 2 la gi

2. Components là một controller mới

Trong angular 1 tất cả chúng ta với controllers còn nhập angular 2 thì controller được thay cho thế vì thế components. Controller và view nhập angular 1 được khái niệm như sau.

//View
<body ng-controller=’appController’>
    <h1>vm.message<h1>
</body>
//Controller
angular.module(‘app’).controller(‘appController’,appcontroller) {
    message=’Hello Angular2’;
}

Còn nhập angular 2 thì tất cả chúng ta dùng component.

import { Component } from '@angular/core';
 
@Component({
    selector: 'app',
    template: '<h1>{{message}} </h1>'
})
export class AppComponent  { 
    message: string=’Hello Angular2’;
}

Trong angular 2, 1 component thay mặt mang đến một trong những phần tử UI. Chúng tớ rất có thể có rất nhiều component trong một single trang web page. Các component là song lập cùng nhau và quản lý và vận hành 1 vùng của trang. Component rất có thể với component con cái và component phụ thân.

3. Directives

Angular 1 với thật nhiều directives. Và một vài ba directives được dùng tối đa là ng-repeat và ng-if.

<ul>
    <li ng-repeat =customer in vm.customers>
       {{customer.name}}
    </li>
</ul>
 
<div ng-if=”vm.isVIP”>
    <h3> VIP Customer </h3>
</div>

Trong angular 2 cũng có thể có directives tuy vậy với 1 cú pháp không giống. Nó có một vệt * trước thương hiệu của directives.

<ul>
    <li *ngFor =#customer of customers>
        {{customer.name}}
    </li>
</ul>
 
<div *ngIf=”vm.isVIP”>
    <h3> VIP Customer </h3>
</div>

Trong angular 2 ng-style, ng-src , ng-href đang được mất tích và bọn chúng được thay cho thế vì thế property binding. Việc tạo ra 1 custom directives là khôn cùng giản dị và đơn giản nhập angular 2

Xem thêm: fender modern player telecaster short scale

@Directive({
    selector: '[MyDirective]'
})
class MyDirective {
}

4. Data Bindings

4.1 Interpolation

//Angular 1
<h3> {{vm.customer.Name}}</h3> 
 
//Angular 2
<h3> {{customer.Name}}</h3>

4.2 One way Binding

//Angular 1
<h3> ng-bind=vm.customer.name></h3>
 
//Angular 2
<h3 [innerText]=”customer.name” ></h3>

Trong angular 2, tất cả chúng ta rất có thể bind cho tới bất kể tính chất này của thành phần html

4.3 Event Binding

//Angular 1
<button ng-click=”vm.save()”>Save<button> 
 
//Angular 2
<button (click)=”save()”>Save<button>

Trong angular 1 người sử dụng directive ngClick nhằm bind 1 sự khiếu nại còn nhập angular 2 directive ngClick và đã được vô hiệu hóa và tất cả chúng ta rất có thể bind thẳng cho tới DOM events.

4.4 Two- way binding

//Angular 1
<input ng-model=”vm.customer.name”> 
 
//Angular 2
<input [(ng-model)]=”customer.name”>

5. Filters được thay tên trở thành Pipes

Trong angular 1, tất cả chúng ta người sử dụng Filters như sau

<td>{{vn.customer.name | uppercase}}</td>

Còn nhập angular 2 tất cả chúng ta cũng người sử dụng 1 cú pháp tương tự động tuy nhiên thương hiệu bọn chúng là pipes

<td>{{customer.name | uppercase}}</td>

6. Platform specific Bootstrap

Trong angular 1 thì tất cả chúng ta người sử dụng directive ng-app nhập HTML

Xem thêm: vivo mới nhất

<body ng-app=’app’>

Còn nhập angular 2 thì nó sẽ bị phức tạp rộng lớn 1 chút 😄

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {AppModule } from './app.module';
 
platformBrowserDynamic().bootstrapModule(AppModule);

7. Services

Trong angular 1 với Services, Factories , Providers, Constants và values và tất cả chúng ta injected nhập vào controller nhằm rất có thể người sử dụng, còn nhập angular 2 toàn bộ tất cả bên trên đều được gộp nhập Service.Class

Hy vọng qua quýt nội dung bài viết này sẽ hỗ trợ chúng ta có một tầm nhìn tổng quan liêu về angular 2. Thankyou Link tìm hiểu thêm : angular2