NộI Dung
- 01. Chạy kiểm tra phiên bản
- 02. Cài đặt Angular
- 03. Tạo khung dự án
- 04. Khai thác chênh lệch tải
- 05. ... và xem kết quả
- 06. Sinh ra một nhân viên web
- 07. Khám phá mã
- 08. Dựng giàn giáo
- 09. Đừng lo lắng về việc thiếu nhà xây dựng
- 10. Thực hiện một lần chạy biên dịch nhỏ
- 11. ... và tìm đầu ra
- 12. Đi làm
- 13. Khám phá Ivy
- 14. Thử xử lý ng đã sửa đổi
- 15. Tận hưởng quá trình di chuyển được cải thiện
- 16. Khám phá kiểm soát không gian làm việc
- 17. Đẩy nhanh quá trình
- 18. Tránh đường chết
- 19. Nhìn vào nhật ký thay đổi
Angular 8 là phiên bản mới nhất của Google’s Angular - một trong những khung JavaScript tốt nhất hiện nay. Trong bài viết này, chúng tôi sẽ giới thiệu cho các bạn những điều đặc biệt về Angular 8 và hướng dẫn bạn cách bắt đầu. Đầu tiên, hãy nhìn lại ngắn gọn những gì đã xảy ra với khuôn khổ cho đến nay.
Sự ra đời của Angular đã dẫn đến sự thay đổi mô hình trong phát triển web: trong khi hầu hết các thư viện tự giới hạn việc cung cấp hỗ trợ cho các nhà phát triển với tác động kiến trúc tương đối hạn chế, nhóm nhà phát triển của Angular đã đi theo hướng khác. Sản phẩm của họ buộc bạn phải sử dụng một kiến trúc cụ thể, với độ lệch từ khó đến vô nghĩa về mặt thương mại. Trên thực tế, hầu hết mã Angular chạy qua một chuỗi công cụ chuyển đổi tương đối phức tạp trước khi nó truy cập vào trình duyệt.
Do sự thành công to lớn của Angular, cả bên trong và bên ngoài Google Inc, sự phát triển - nói chung là đã ổn định. Điều này có nghĩa là rất ít thay đổi mã phá vỡ, trong khi các bản nâng cấp nửa năm tập trung vào việc điều chỉnh khuôn khổ với những thay đổi trong bối cảnh duyệt web.
Trong trường hợp của Angular 8, chẳng hạn, một trình biên dịch JavaScript mới được triển khai (mặc dù vẫn còn ở dạng thử nghiệm). Nó tối ưu hóa mã tương thích được tạo để nhỏ hơn và nhanh hơn đáng kể với chi phí của các trình duyệt cũ hơn. Hơn nữa, hỗ trợ Web Worker được tích hợp để tăng khả năng xử lý của Angular. Tóm lại, có rất nhiều thứ để xem - vì vậy chúng ta hãy đi sâu vào.
Nếu bạn muốn thiết kế một trang web mà không cần mã, hãy thử một trong những trình tạo trang web dễ dàng này. Và để làm cho mọi thứ hoạt động trơn tru hơn, hãy sử dụng dịch vụ lưu trữ web của bạn.
01. Chạy kiểm tra phiên bản
Chuỗi công cụ của Angular nằm trong môi trường NodeJS. Theo văn bản này, Node.js 10.9 trở lên là cần thiết - nếu bạn thấy mình đang sử dụng phiên bản cũ hơn, hãy truy cập trang web Node.js và nhận bản nâng cấp. Đoạn mã dưới đây hiển thị trạng thái phiên bản trên máy này.
tamhan @ TAMHAN18: ~ $ node -v v12.4.0 tamhan @ TAMHAN18: ~ $ npm -v 6.9.0
02. Cài đặt Angular
Chuỗi công cụ của Angular nằm trong một tiện ích dòng lệnh có tên ng. Nó có thể được cài đặt thông qua NPM nổi tiếng.
tamhan @ TAMHAN18: ~ $ sudo npm install -g @ angle / cli tamhan @ TAMHAN18: ~ $ ng phiên bản
Hãy cẩn thận trả lời câu hỏi được hiển thị trong hình ảnh bên dưới.
Lấy thông tin phiên bản ra khỏi công cụ là khá khó khăn - không chỉ là cú pháp duy nhất, mà đầu ra cũng dài dòng (xem hình ảnh bên dưới).
03. Tạo khung dự án
ng tạo giàn giáo Angular cho chúng tôi. Trong các bước sau, chúng tôi muốn thêm định tuyến và sử dụng Sass để chuyển dịch CSS. Nếu triển khai không thành công vì lý do nào đó, hãy làm trống thư mục làm việc và khởi động lại ng với quyền siêu người dùng.
tamhan @ TAMHAN18: ~ $ mkdir angularspace tamhan @ TAMHAN18: ~ $ cd angularspace / tamhan @ TAMHAN18: ~ / angularspace $ ng công việc mới
04. Khai thác chênh lệch tải
Phiên bản mới của Angular tối ưu hóa mã tương thích ngược để giảm tác động - một tệp có tên danh sách trình duyệt cho phép bạn quyết định trình duyệt nào sẽ được hỗ trợ. Mở danh sách trình duyệt và xóa từ không phải trước IE 9 đến IE11.
. . . > 0,5% 2 phiên bản cuối cùng Firefox ESR không chết IE 9-11 # Để hỗ trợ IE 9-11, hãy xóa 'not'.
05. ... và xem kết quả
Đặt hàng biên dịch dự án, thay đổi vào thư mục phân phối và xóa các tệp bản đồ không cần thiết.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng build tamhan @ TAMHAN18: ~ / angularspace / workertest / dist / workertest $ ls
Gọi cây để xem kết quả - ng tạo nhiều phiên bản của các tệp mã khác nhau (xem hình ảnh bên dưới).
06. Sinh ra một nhân viên web
Web worker cho phép JavaScript đi vào biên giới cuối cùng của các ứng dụng gốc: xử lý song song hàng loạt các tác vụ. Với Angular 8, một nhân viên web có thể được tạo ngay từ sự thoải mái của ng tiện ích dòng lệnh.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng create web-worker myworker CREATE tsconfig.worker.json (212 byte) CREATE src / app / myworker.worker.ts (157 byte) CẬP NHẬT tsconfig.app.json (236 byte ) CẬP NHẬT angle.json (3640 byte)
07. Khám phá mã
ngĐầu ra của nó thoạt nhìn có vẻ đáng sợ. Mở tệp src / app / myworker.worker.ts trong một trình soạn thảo mã được lựa chọn sẽ tiết lộ mã mà bạn nên biết rõ từ WebWorker sự chỉ rõ. Về nguyên tắc, worker nhận các thông điệp và xử lý chúng khi cần thiết.
/// reference lib = "webworker" /> addEventListener (’message’, ({data}) => {const response = `worker response to $ {data}`; postMessage (response);});
08. Dựng giàn giáo
Ứng dụng Angular bao gồm các thành phần. Việc loại bỏ nhân viên web của chúng tôi được thực hiện tốt nhất bên trong AppComponent, được mở rộng để bao gồm một người nghe cho OnInit biến cố. Hiện tại, nó sẽ chỉ phát ra thông tin trạng thái.
nhập {Thành phần, OnInit} từ '@ angle / core'; Lớp xuất @Component ({...}) AppComponent triển khai OnInit {title = ’workertest’; ngOnInit () {console.log ("AppComponent: OnInit ()"); }}
09. Đừng lo lắng về việc thiếu nhà xây dựng
Các nhà phát triển TypeScript có kinh nghiệm tự hỏi tại sao mã của chúng tôi không sử dụng hàm tạo do ngôn ngữ lập trình cung cấp. Lý do cho điều đó là ngOnInit là một sự kiện vòng đời được kích hoạt bất cứ khi nào một sự kiện khởi tạo diễn ra - điều này không cần phải tương quan với lời gọi lớp.
10. Thực hiện một lần chạy biên dịch nhỏ
Tại thời điểm này, chương trình đã sẵn sàng để chạy. Chúng tôi sẽ thực thi nó từ máy chủ bên trong của ng, có thể được gọi thông qua lệnh phục vụ. Một khía cạnh gọn gàng của cách tiếp cận này là chương trình phát hiện các thay đổi và biên dịch lại dự án một cách nhanh chóng.
tamhan @ TAMHAN18: ~ / angularspace / workertest $ sudo ng phục vụ
Hãy nhìn vào hình để thấy điều này hoạt động trong hình ảnh bên dưới.
11. ... và tìm đầu ra
ng phục vụ putput nhập địa chỉ của máy chủ web cục bộ của nó, thường là http: // localhost: 4200 /. Mở trang web và mở các công cụ dành cho nhà phát triển để xem đầu ra trạng thái. Hãy ghi nhớ rằng console.log xuất dữ liệu ra bảng điều khiển của trình duyệt và để nguyên bảng điều khiển của phiên bản NodeJS.
12. Đi làm
Tại thời điểm này, chúng tôi tạo một phiên bản của worker và cung cấp cho nó một thông báo. Kết quả của nó sau đó được hiển thị trong bảng điều khiển của trình duyệt.
if (typeof Worker! == ’undefined’) {// Tạo mới const worker = new Worker (’./ myworker.worker’, {type: ’module’}); worker.onmessage = ({data}) => {console.log (’trang có thông báo: $ {data }’); } worker.postMessage ('xin chào'); } else {console.log ("Không có nhân viên hỗ trợ"); }
13. Khám phá Ivy
Các phiên bản tương lai của Angular sẽ sử dụng trình biên dịch nâng cao hơn, dẫn đến các chế độ xem thậm chí còn nhỏ hơn. Trong khi sản phẩm chưa được hoàn thiện, một bộ xương hỗ trợ cây thường xuân có thể được tạo ra thông qua dự án ivy mới - enable-ivy. Ngoài ra, hãy thay đổi cài đặt trình biên dịch như được hiển thị trong đoạn mã.
"angleCompilerOptions": {"enableIvy": true}
Một lời cảnh báo: Cây thường xuân giúp giảm kích thước đáng kinh ngạc, nhưng nó không miễn phí. Sản phẩm vẫn chưa ổn định, vì vậy không nên sử dụng sản phẩm trong môi trường sản xuất.
14. Thử xử lý ng đã sửa đổi
Angular's ng công cụ dòng lệnh đã sử dụng các tập lệnh con trong nội bộ một thời gian. Angular 8 nâng cao ưu điểm mà bây giờ bạn cũng có thể sử dụng cơ sở này để chạy các tác vụ của riêng bạn khi ứng dụng của bạn được lắp ráp và biên dịch.
"kiến trúc sư": {"build": {"builder": "@ angle-devkit / build-angle: browser",
Một ứng dụng gọn gàng của ng script liên quan đến việc tải trực tiếp các ứng dụng lên các dịch vụ đám mây. Kho lưu trữ Git cung cấp một tập lệnh hữu ích để tải tác phẩm của bạn lên tài khoản Firebase.
15. Tận hưởng quá trình di chuyển được cải thiện
Các nhà phát triển di chuyển khỏi Angular 1.x, còn được gọi là AngularJS, đã gặp phải nhiều vấn đề trong việc đưa trình điều hướng hoạt động ngay trong các ứng dụng 'kết hợp'. Dịch vụ Vị trí Hợp nhất mới nhằm mục đích làm cho quá trình này diễn ra suôn sẻ hơn.
16. Khám phá kiểm soát không gian làm việc
Các dự án lớn được hưởng lợi từ khả năng thay đổi cấu trúc không gian làm việc một cách linh hoạt. Điều này được thực hiện thông qua API không gian làm việc mới được giới thiệu trong Angular 8.0 - đoạn mã đi kèm với bước này cung cấp tổng quan nhanh về hành vi.
hàm async express () {const host = workspaces. createWorkspaceHost (NodeJsSyncHost mới ()); const workspace = không gian làm việc đang chờ. readWorkspace (’path / to / workspace / directory /’, host); const project = workspace.projects. get ('ứng dụng của tôi'); const buildTarget = project.targets. get (’dựng’); buildTarget.options.optimization = true; await workspaces.writeWorkspace (không gian làm việc, máy chủ); }
17. Đẩy nhanh quá trình
Việc xây dựng các cơ sở mã JavaScript lớn trở nên tẻ nhạt. Các phiên bản tương lai của AngularJS sẽ sử dụng hệ thống xây dựng Bazel của Google để đẩy nhanh quá trình - đáng tiếc là tại thời điểm viết bài, hệ thống này chưa sẵn sàng cho khung giờ vàng.
18. Tránh đường chết
Mặc dù Google cực kỳ cẩn thận để không phá vỡ mã, một số tính năng chỉ cần được gỡ bỏ vì chúng không còn cần thiết nữa. Kiểm tra danh sách khấu hao này để tìm hiểu thêm về các tính năng nên tránh.
19. Nhìn vào nhật ký thay đổi
Như mọi khi, một bài báo không bao giờ có thể thực thi công lý cho toàn bộ bản phát hành. May mắn thay, nhật ký thay đổi này cung cấp danh sách chi tiết về tất cả các thay đổi - đề phòng trường hợp bạn cảm thấy muốn kiểm tra nhịp đập của một tính năng đặc biệt thân thiết với bạn.
Có rất nhiều tệp đã sẵn sàng để tải lên trang web của bạn? Sao lưu chúng trong bộ nhớ đám mây đáng tin cậy nhất.
Bài viết này ban đầu được xuất bản trên tạp chí thiết kế web sáng tạo Nhà thiết kế web.
