Có gì mới trong Angular 4?

Feb 2, 2026
Cách
[số 8]

Vào tháng 3, đội Angular đã phát hành phiên bản 4, và với nó một số tính năng mới thú vị để khám phá. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn Cách tạo một ứng dụng Sử dụng một số tính năng mới này, cũng như thể hiện một số thay đổi, tăng cường hiệu suất mạnh mẽ, theo dõi các thay đổi.

Có gì mới?

Đội Angular đang gọi nó là một 'trang điểm vô hình', bởi vì hầu hết các thay đổi nằm trong nền chứ không phải với chức năng mã hóa cốt lõi. Một thay đổi quan trọng là việc chuyển sang biên dịch đầu thời gian như tiêu chuẩn, có khả năng cải thiện đáng kể hiệu suất khi được sử dụng chính xác. Tanscript 2.1+ cũng được hỗ trợ, cung cấp cho chúng tôi quyền truy cập vào tất cả các tính năng mới của ES2015.

Điều đó không có nghĩa là không có bất kỳ thay đổi đáng chú ý nào đối với những điều cơ bản - chẳng hạn, có một cú pháp ràng buộc mẫu mới hữu ích cho phép chúng tôi đơn giản hóa mã của chúng tôi bằng cách thêm một khác Tùy chọn cho ngif. và khả năng gán các biến cục bộ trong một ngfor. .

Tôi có nhớ 3.0 không?

Angular 4 là phiên bản lớn đầu tiên phát hành khung áp dụng phiên bản ngữ nghĩa. Vì vậy, đừng lo lắng, bạn đã không bỏ lỡ 3.0 - có hai bản cập nhật lớn và cả hai đều được chuyển thành phiên bản 4.0.

Lưu ý rằng Angular 1.x hiện được gọi là AngularJS và Angular 2+ chỉ được gọi đơn giản là góc cạnh. Hãy cảnh giác như một số hướng dẫn và thư viện của bên thứ ba có thể không cập nhật việc sử dụng các điều khoản này.

Nhận các tập tin hướng dẫn

Trong hướng dẫn này, chúng tôi sẽ làm việc với một ứng dụng cửa hàng hoa. Để tải xuống ứng dụng ví dụ, hãy truy cập Filesilo. , Chọn nội dung miễn phí và nội dung miễn phí bên cạnh hướng dẫn. LƯU Ý: Lần đầu tiên người dùng sẽ phải đăng ký để sử dụng filesilo. Khi bạn đã đăng nhập, bạn có thể tải xuống ứng dụng ví dụ đây .

Bắt đầu nào!

01. Bắt đầu với nút

Download and install Node.js by following the instructions in the wizard

Tải xuống và cài đặt Node.js bằng cách làm theo các hướng dẫn trong trình hướng dẫn

Hãy bắt đầu từ đầu, và sử dụng CLI góc để xây dựng một ứng dụng Hello World. Nếu bạn muốn cập nhật một ứng dụng hiện có, hãy bỏ qua bước 4. Nếu bạn chưa có, Tải xuống Node. , được đóng gói trước với NPM. Nếu bạn đã có nút, hãy kiểm tra ít nhất là Node 6.9.x và NPM 3.x.x từ dòng lệnh. 

 $ node -v
v6.10.2.
$ npm -v.
3.10.10

02. Thiết lập một dự án mới

Create a simple Hello World app in the Angular CLI

Tạo một ứng dụng Hello World đơn giản trong CLI Angular

Bây giờ chúng ta có một trình quản lý gói, chúng ta có thể sử dụng nó để cài đặt Angular và Angular CLI. Trong số những thứ khác, CLI cho phép bạn dễ dàng tạo ra các dự án và linh kiện mới. 

 $ npm Cài đặt -G @ Angular / CLI
$ ng Mới My-First-Angular-app # lệnh Angular CLI sử dụng 'ng'
$ ng Phục vụ -Open # Lệnh này sẽ bootstrap ứng dụng của bạn và khởi chạy nó trong trình duyệt

03. Kiểm tra phiên bản.

Nếu bạn không thấy một dự án góc trước, hãy dành thời gian để làm quen với cấu trúc tệp được tạo bởi CLI. Cho dự án mới của chúng tôi, của chúng tôi Gói.json. Nên liệt kê các gói Angular phiên bản 4.0.0. 

 "Phụ thuộc": {
"@ Angular / Common": "^ 4.0.0",
"@ Angular / Compiler": "^ 4.0.0",
"@ Angular / Core": "^ 4.0.0",
"@ Angular / Forms": "^ 4.0.0",
"@ Angular / http": "^ 4.0.0",
"@ Angular / platform-browser": "^ 4.0.0",
"@ Angular / platform-browser-dynamic": "^ 4.0.0",
"@ Angular / bộ định tuyến": "^ 4.0.0" [...]}

04. Nâng cấp lên Angular 4

Nếu bạn có một ứng dụng góc hiện có với các phiên bản 2.x được liệt kê, thực sự dễ dàng cập nhật lên phiên bản 4 trong hầu hết các trường hợp. Chúng tôi chỉ cần cài đặt và cập nhật các gói có liên quan từ dòng lệnh. Mac: 

 $ npm Cài đặt @ Angular / {Common, Compiler, Compiler-CLI, Core, Forms, HTTP, Browser-Browser, Platform Browser-Browser-Dynamic, Platform-Server, bộ định tuyến, hình ảnh động} @latest

Các cửa sổ: 

& gt; NPM Cài đặt @ Angular / Common @ mới nhất @ Angular / Compiler @ MỚI NHẤT @ Angular / Compiler-CLI @ mới nhất @ Angular / Core @ mới nhất @ Angular / Forms @ mới nhất @ Angular / http @ mới nhất @ allular / platform-browser @ mới nhất @ mới / Nền tảng-trình duyệt-động @ mới nhất @ Angular / platform-server @ mới nhất @ Angular / bộ định tuyến @ mới nhất @ Angular / hình động @ MỚI NHẤT @ mới nhất --Save

05. Tải xuống ứng dụng hướng dẫn

Từ giờ trở đi, chúng tôi sẽ làm việc với một ứng dụng ví dụ Angular 2 mà bạn có thể tải xuống từ Filesilo. (Để ghi chú đầy đủ về cách thực hiện việc này, hãy xem Giới thiệu ở trên). Lưu ý rằng ứng dụng này đã được tạo hoàn toàn cho mục đích minh họa. Khi bạn đã tải xuống ứng dụng TheFlower Shop vào thư mục gốc của mình, hãy cài đặt các phụ thuộc và khởi chạy trong trình duyệt. 

 $ Cài đặt NPM
$ ng phục vụ --open

06. Nâng cấp cửa hàng hoa lên 4.0

Our custom modal module needs renaming [click the icon to enlarge)

Mô-đun phương thức tùy chỉnh của chúng tôi cần đổi tên [Nhấp vào biểu tượng để phóng to)

Trong cửa hàng hoa thư mục, nâng cấp lên 4.0. Chúng tôi có một số Phụ thuộc ngang hàng chưa được đáp ứng lỗi sau khi nâng cấp.

07. Sửa phụ thuộc ngang hàng

Phụ thuộc ngang hàng là để quản lý các dự án có các gói dựa trên các phiên bản khác nhau của cùng một phụ thuộc. Bạn phải thêm những thứ này thủ công cho bạn Gói.json. tập tin. Các phụ thuộc ngang hàng mà chúng ta cần cho cửa hàng hoa bao gồm các phiên bản cũ hơn của @ Angular / {lõi, http} Cái gì rxjs. và khu vực.js. .

Xem lại các lỗi trong đầu ra thiết bị đầu cuối và thêm mỗi phụ thuộc còn thiếu vào Gói.json. . 

 "PeerDepressions": {
  "@ Angular / lõi": "& gt; = 2.0.0",
  "@ Angular / http": "& gt; = 2.0.0",
  "RXJS": "^ 5.0.0",
  "Vùng.js": "0,7,8"
  },

08. Xem ra thay đổi tên

Ứng dụng cửa hàng hoa của chúng tôi sử dụng một thành phần tùy chỉnh nguồn mở được gọi là NG2-MODAL. . Tuy nhiên, tác giả đã cập nhật quy ước đặt tên của họ tới Ngx-Modal. . Chúng ta cần sửa đổi tên phụ thuộc của chúng tôi và Ng-Module. nhập khẩu phù hợp. 

 Gói.json:
"Phụ thuộc": {
  [...]
  "Ngx-modal": "0,0,25",
     [...]
  },
ứng dụng / app.module.ts:
nhập {modalmodule} từ 'ngx-modal';

09. Kiểm tra phiên bản

Thành phần phương thức tùy chỉnh của chúng tôi cũng cần cập nhật lên phiên bản mới hơn, vì vậy hãy chắc chắn cập nhật nó với NPM. 

 $ NPM Cài đặt NGX-Modal @ mới nhất --Save

10. Kiểm tra công việc của bạn

Bây giờ chúng tôi đã vá các phụ thuộc của chúng tôi, đó là một ý tưởng tốt để xóa node_modules. và xây dựng lại từ chúng ta Gói.json. . Nếu tất cả diễn ra tốt đẹp, bạn nên có một bản dựng sạch! Nếu bạn không, một cái gì đó vẫn có thể bị thiếu trong các phiên bản phụ thuộc của bạn. Hãy nhìn lại. 

 $ rm -rf node_modules /
$ npm bộ nhớ cache sạch
$ npm cài đặt
$ ng phục vụ --open

Trang tiếp theo: Các bước 11-20

  • 1.
  • 2.

Trang hiện tại: Các bước 1-10.

Cách - Các bài báo phổ biến nhất

Hướng dẫn Adobe Fresco: Tạo một bức chân dung trong ứng dụng Vẽ tranh

Cách Feb 2, 2026

[số 8] (Tín dụng hình ảnh: Phil Galloway) Đối với hướng dẫn Adobe Fresco này, tôi sẽ tạo một..

Cách kiểm tra các trang web và ứng dụng phản ứng

Cách Feb 2, 2026

[số 8] (Tín dụng hình ảnh: Tương lai) Nếu bạn muốn biết làm thế nào để kiểm tra phản ứn..

6 Mẹo nhanh để cải thiện bản vẽ bút cọ

Cách Feb 2, 2026

[số 8] (Tín dụng hình ảnh: Artem Solop) Tôi luôn cố gắng phát triển phong cách cá nhân của mình..

Cách thêm hình ảnh động vào SVG bằng CSS

Cách Feb 2, 2026

[số 8] [Hình ảnh: Trình thiết kế web] Khi nói đến hoạt hình với SVG, một lần tắt lớn có th..

Cải thiện kỹ năng nghệ thuật của bạn trong Photoshop

Cách Feb 2, 2026

[số 8] Đối với hội thảo này, tôi muốn chỉ cho bạn một cách thực sự thú vị để phác họa các nhâ..

Xây dựng ứng dụng hoạt động ngoại tuyến

Cách Feb 2, 2026

[số 8] Trong một thời gian dài, chức năng ngoại tuyến, đồng bộ hóa nền và thông báo đẩy có các ứng..

Tạo một cảnh thành phố bận rộn trong Illustrator

Cách Feb 2, 2026

[số 8] Thành phố tốt nhất là một thành phố bận rộn, nhưng không khí bận rộn đó không phải là một..

Cách nhận thêm từ kết cấu kỹ thuật số

Cách Feb 2, 2026

[số 8] Làm việc kỹ thuật số giải phóng bạn để thực hiện càng nhiều sai lầm như bạn muốn, trong m�..

Thể loại