Hãy để tôi mở đầu bằng cách nói, tôi cho rằng bạn và tất cả những người sẽ đọc nó đã thoải mái với Angular 1 ( bây giờ được gọi là AngularJS , trái ngược với Angular cho các phiên bản mới hơn). Điều đó đang được nói, chúng ta hãy đi vào một số bổ sung và sự khác biệt chính trong Angular 2+.
- Họ thêm một góc
cli.
Bạn có thể bắt đầu một dự án mới bằng cách chạy ng new [app name]. Bạn có thể phục vụ dự án của mình bằng cách chạy ng serve
tìm hiểu thêm tại đây: https://github.com/angular/angular-cli
- Mã góc của bạn được viết bằng ES6 Typecript và nó biên dịch khi chạy thành Javascript trong trình duyệt.
Để hiểu rõ hơn về điều này, tôi khuyên bạn nên kiểm tra một số danh sách tài nguyên tôi có ở cuối câu trả lời của mình.
- Kết cấu dự án
Trong cấu trúc cơ bản, bạn sẽ có một app/tsthư mục nơi bạn sẽ thực hiện hầu hết công việc của mình và app/jsbạn sẽ tìm thấy trongapp/js tệp thư mục có .js.mapphần mở rộng. Chúng "ánh xạ" các tệp ".ts" của bạn sang trình duyệt của bạn để gỡ lỗi vì trình duyệt của bạn không thể đọc bản thảo gốc.
Cập nhật : Đã hết bản beta. Cấu trúc dự án đã thay đổi một chút, trong hầu hết các trường hợp và nếu bạn đang sử dụng cli góc, bạn sẽ làm việc trong
src/app/thư mục. Trong một dự án khởi đầu, bạn sẽ có những điều sau đây.
app.component.css
app.component.html
app.component.spec.ts
app.component.ts
app.module.ts
index.ts
app.component.css : Tệp CSS bạn nên sử dụng cụ thể chocomponent.html
app.component.html : Một khung nhìn (biến được khai báo trong app.component.js)
app.component.spec.ts : được sử dụng để thử nghiệmapp.component.ts
app.component.ts : Mã của bạn liên kết vớiapp.component.html
app.module.ts : Đây là thứ khởi đầu ứng dụng của bạn và nơi bạn xác định tất cả các plugin, thành phần, dịch vụ, v.v ... Điều này tương đương với app.jstrong Angular 1
index.ts được sử dụng để xác định hoặc xuất các tệp dự án
Thông tin bổ sung:
Pro tip: bạn có thể chạy ng generate [option] [name]để tạo các dịch vụ, thành phần, đường ống mới, v.v.
Ngoài ra tsconfig.jsontệp rất quan trọng vì nó xác định quy tắc biên dịch TS cho dự án của bạn.
Nếu bạn đang nghĩ tôi phải học một ngôn ngữ hoàn toàn mới? ... Uh ... kinda, TypeScript là một siêu bộ JavaScript. Đừng sợ hãi; nó ở đó để làm cho sự phát triển của bạn dễ dàng hơn. Tôi cảm thấy như mình đã nắm bắt được nó chỉ sau vài giờ chơi với nó, và đã có tất cả sau 3 ngày.
- Bạn liên kết với HTML của mình tương tự như cách bạn sẽ làm nếu trong chỉ thị Angular 1. Vì vậy, biến như
$scopevà $rootScopeđã được phản đối.
Điều này bạn có thể đã được ngụ ý. Angular 2 vẫn là một MV *, nhưng bạn sẽ sử dụng ' các thành phần ' như một cách để liên kết mã với các mẫu của bạn, ví dụ, thực hiện như sau
import { Component } from '@angular/core';
@Component({
selector:'my-app',
template: '<h1> Hello World! </h1>'
})
export class AppComponent {}
Ở đây nghĩ về importtuyên bố như tiêm phụ thuộc của bạn trong bộ điều khiển v1. Bạn sử dụng importđể nhập các gói của mình, nơi import {Component}nói rằng bạn sẽ thực hiệncomponent bạn muốn liên kết vớiHTML .
Chú ý @Componenttrang trí bạn có một selectorvà template. Dưới đây nghĩ về selectornhư của bạn $scopemà bạn sử dụng như bạn sử dụng v1 directivesnơi tên của selectorlà những gì bạn sử dụng để bám vào HTML của bạn như vậy
<my-app> </my-app>
Trong trường hợp <my-app>là tên của thẻ tùy chỉnh của bạn, bạn sẽ sử dụng mà sẽ hoạt động như một giữ chỗ cho những gì đang khai báo trong mẫu của bạn. ví dụ) <h1> Hello World! </h1>. Trong khi điều này sẽ trông giống như sau trong v1:
HTML
<h1>{{hello}}</h1>
Mã não
$scope.hello = "Hello World!"
Ngoài ra, bạn có thể thêm một cái gì đó giữa các thẻ này để tạo một thông báo tải, như thế này:
<my-app> Loading... </my-app>
Sau đó, nó sẽ hiển thị " Đang tải ... " dưới dạng thông báo đang tải.
Lưu ý rằng những gì được khai báo templatelà đường dẫn hoặc HTML thô bạn sẽ sử dụng trong thẻ HTMLcủa mình selector.
Việc triển khai Angular 1 đầy đủ hơn sẽ giống như thế này:
HTML
<h1 ng-controller="myCtrl">{{hello}}</h1>
Trong v1, nó sẽ trông giống như
Mã não
angular.module('controller', [])
.controller('myCtrl', function( $scope) {
$scope.hello = "Hello World!"
})
Đây là những gì tôi thực sự thích về v2. Tôi thấy chỉ thị là một đường cong học tập dốc đối với tôi trong v1 và ngay cả khi tôi nhận ra chúng, tôi thường có CSSkết xuất không như tôi dự định. Tôi thấy đây là cách đơn giản hơn.
V2 cho phép khả năng mở rộng dễ dàng hơn cho ứng dụng của bạn vì bạn có thể chia nhỏ ứng dụng của mình dễ dàng hơn so với trong v1. Tôi thích cách tiếp cận này vì bạn có thể có tất cả các phần làm việc của mình trong một tệp thay vì có một số trong v1 góc.
Điều gì về việc chuyển đổi dự án của bạn từ v1 sang v2?
Từ những gì tôi đã nghe từ nhóm phát triển nếu bạn muốn cập nhật dự án v1 của mình lên v2, bạn sẽ trải qua và xóa các đốm màu không dùng nữa và thay thế $scopes của bạn bằng selectors. Tôi thấy video này hữu ích. Đó là với một số nhóm Ionic đang làm việc sát cánh với nhóm góc cạnh vì v2 tập trung mạnh mẽ hơn vào điện thoại di động https://youtu.be/OZg4M_nWuIk Hy vọng điều này sẽ giúp ích.
CẬP NHẬT: Tôi đã cập nhật bằng cách thêm các ví dụ khi triển khai chính thức của Angular 2 đã xuất hiện.
CẬP NHẬT 2: Đây dường như vẫn là một câu hỏi phổ biến vì vậy tôi chỉ nghĩ rằng tôi có một số tài nguyên tôi thấy rất hữu ích khi tôi bắt đầu làm việc với góc 2.
Tài nguyên hữu ích:
Để biết thêm về ES6, tôi khuyên bạn nên xem The New Boston's Hướng dẫn về tính năng mới ECMAScript 6 / ES6 của Boston mới - Danh sách phát YouTube
Để viết các hàm Bản in và xem cách chúng biên dịch sang Javascript, hãy kiểm tra Ngôn ngữ bản in
Để xem chức năng phân tích chức năng của tương đương Angular 1 trong Angular 2, hãy xem Angular.io - Cookbook -A1 A2 Tham khảo nhanh