Angular Cli Là Gì?

Nếu bạn đã từng code ng2 thì bạn sẽ bối rối khi sắp xếp các file / module của mình, điều này sẽ gây ra rất nhiều khó khăn trong việc bảo trì / nâng cấp sau này, đó là lý do google phát hành một công cụ rất mạnh giúp nhà phát triển quản lý dự án tốt hơn. Đó là Angular Cli

angular-cli-1-a-crystalcentral-vn

Angular CLI là gì?

Angular CLI là công cụ được phát triển để chạy trên giao diện dòng lệnh (CLI) giúp tạo dự án, quản lý tệp dự án và thực hiện nhiều tác vụ khác nhau như kiểm thử (testing), đóng gói và triển khai dự án một cách nhanh chóng và hiệu quả.

Angular Cli giúp các nhà phát triển tạo ứng dụng nhanh hơn và dễ dàng hơn với các lệnh đơn giản, quan trọng cho việc bảo trì / nâng cấp dự án trong tương lai. Cli phiên bản hiện tại là 1.0.0, phát hành vào ngày 23 tháng 3 năm 2017, vẫn đang được các nhà phát triển cải thiện

Cài đặt Angular CLI

1. Cấu hình

AngularCli yêu cầu Node từ 6.9.0 trở lên đối với NPM 3.0 và cao hơn Để kiểm tra phiên bản 2 của anh chàng này, hãy chạy 2 lệnh sau: node -v cho NodeJs npm -v cho NPM Kiểm tra phiên bản 2 ở trên Sau đó, chúng ta cài đặt CLI command: npm install -g @ angle / cli Để kiểm tra xem quá trình cài đặt có thành công hay không, chúng tôi chạy lệnh: ng phiên bản. Chúng tôi nhận được kết quả sau

_ _ ____ _ ___

/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|

/ △ \ | ‘_ \ / _` | | | | |/ _` | ‘__| | | | | | |

/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |

/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|

|___/

@angular/cli: 1.0.0

node: 7.6.0

os: linux x64

Xem thêm: Phân tử là gì? Cấu trúc và Công thức phân tử

2. Tạo Project

Để tạo một dự án, chúng tôi chạy lệnh

tên dự án mới

ProjectName: phải bắt đầu bằng một chữ cái và chỉ có thể chứa các ký tự chữ và số hoặc /

Ở đây mình thường sử dụng thêm một option –style = scss, lệnh này sẽ đặt scss là style mặc định của ứng dụng. Bạn có thể viết mã trong tệp scss đã tạo và ứng dụng sẽ tự động tạo tệp css. Nếu bạn đã có một dự án và muốn chuyển sang một biểu định kiểu khác, bạn có thể chọn css hoặc sass tùy chỉnh. Sau khi chúng tôi chạy lệnh ng set defaults.styleExt scss một lúc, chúng tôi sẽ có như sau:

angular-cli-1-a2crystalcentral-vn

Hãy cùng tìm hiểu ý nghĩa của các tệp trong thư mục ứng dụng:

Ý nghĩa tệp

Files Ý nghĩa
app/app.component.{ts,html,css,spec.ts} Định nghĩa những AppComponent cùng với HTML template, CSS stylesheet và unit test. Nó sẽ là component root để phát triển ứng dụng của chúng ta sau này
app/app.module.ts Khai báo AppModule. Đây là root module, là nơi ta sẽ khai báo những component mà ta sẽ dùng trong ứng dụng
assets/ Folder mà bạn để ảnh hoặc bất cứ thứ gì để copy trong ứng dụng của bạn. VD : fonts, css, js…
environments/ Nghe tên là đã biết ý nghĩa của nó rồi phải không. Folder này dùng để khai báo những môi trường để phát triển VD : development, product…
index.html Khi client truy cập vào ứng dụng của bạn, thì tức là họ đang truy cập vào file này đấy. Phần lớn thời gian thì bạn sẽ không cần phải sửa file này. Angular CLI tự động thêm những file js, css khi mà ta ta build app ra bản product. Quá ngon phải không !!
main.ts The main entry point của ứng dụng. Kết hợp ứng dụng với JIT compiler và bootstraps the application’s root module (AppModule) để chạy trên browser
polyfills.ts Support cho những browser để có thể chạy được ứng dụng
styles.css File css của toàn ứng dụng
test.ts This is the main entry point for your unit tests
tsconfig.{app/spec}.json Cấu hình bộ biên dịch cho TypeScript và unit tests

3. Chạy thử

Sử dụng lệnh ng serve, CLI sẽ biên dịch tệp ts để xây dựng thành cổng mặc định 4200

Nếu bạn không thích cổng mặc định, bạn có thể chỉ định cổng bạn muốn cho CLI bằng cách sử dụng các tùy chọn sau: ng phục vụ –host 0.0.0.0 –port 4201

cố gắng truy cập localhost: 4200

angular-cli-1-a3-crystalcentral-vn

Điều thú vị là CLI tự động biên dịch và tải lại trình duyệt khi bạn thay đổi bất kỳ tệp nào trong ứng dụng.

4. Tạo các thành phần, chỉ thị, đường ống và dịch vụ

Bạn chỉ cần chạy ng create (hoặc đơn giản là ng g) để thử tạo một thành phần để xem nó có gì: ng g component contact

/var/www/html/demo-ng2$ ng g component contact

installing component

create src/app/contact/contact.component.scss

create src/app/contact/contact.component.html

create src/app/contact/contact.component.spec.ts

create src/app/contact/contact.component.ts

update src/app/app.module.ts

Tham khảo thêm: INC là gì? JSC là gì? INC và JSC Lạ và Quen

Bên cạnh các thành phần, CLI cũng cho phép chúng tôi tạo ra nhiều thứ khác:

:

Scaffold Usage
Component ng g component my-new-component
Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g service my-new-service
Class ng g class my-new-class
Guard ng g guard my-new-guard
Interface ng g interface my-new-interface
Enum ng g enum my-new-enum
Module ng g module my-module

5. Cài đặt thư viện của bên thứ ba

Trong quá trình phát triển ứng dụng, bạn có thể cần sử dụng thư viện js bên ngoài như: lodash, gạch dưới… Với php thông thường, chúng ta chỉ việc nạp các file js / css của thư viện đó vào đó. Nhưng sử dụng ng2 thì cần nhiều bước hơn để sử dụng. Tôi sẽ cố gắng cài đặt lodash: trước tiên hãy cài đặt lodash qua npm bằng lệnh: npm install lodash –save, sau đó cài đặt lại trình biên dịch cho TypeScript: npm install @ type / lodash – -save – nếu thư viện của bạn được viết trên nền tảng Typecript, Sau đó bỏ qua bước này) Bây giờ lodash đã được cài đặt, bạn chỉ cần nhập nó vào các thành phần bạn sử dụng

nhập * dưới dạng _ từ ‘lodash’;

6. Xây dựng ứng dụng

Sau một thời gian phát triển, đã đến lúc phát hành sản phẩm của bạn. Nhưng hãy nhìn lại dự án và bạn sẽ thấy tất cả các tệp ts. Bạn đang do dự. Làm thế nào để trình duyệt đọc được điều này? Cho đến nay, chỉ có trình duyệt đọc các tệp html / css / js, đừng lo lắng, vì CLI sẽ hỗ trợ nó cho đến khi ứng dụng được phát hành, tất nhiên, bạn không thể chỉ ném một loạt mã đầy tệp .ts vào máy chủ để chạy nó. Bạn cần biên dịch tệp .ts thành tệp .js bằng lệnh sau

ng build –enosystem = “prod”

Kết quả của lệnh trên là chúng ta sẽ nhận được một thư mục dist mới

angular-cli-1-a4-crystalcentral-vn

Đặt thư mục dist trên máy chủ của bạn và cảm nhận nó

Tham khảo: Trọng Tâm Của Tam Giác: Khái Niệm, Tính Chất Và Cách Xác Định Trọng Tâm Của Tam Giác

Trên đây là tất cả thông tin về Angular CLI, hi vọng bài viết hữu ích cho bạn.

Hãy thường xuyên truy cập website Crystal Central của chúng tôi để cập nhật nhiều thông tin hữu ích nhé!



source https://crystalcentral.vn/angular-cli/

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

Giới thiệu dự án đất nền Crystal Central Bàu Bàng Bình Dương

  Crystal Central được nhiều chuyên gia đánh giá là dự án có vị trí đắc địa, giàu tiềm năng phát triển thương mại tại thị trường Bàu Bàng hiện nay. Hãy cùng nhìn lại giá trị và tiềm năng của Crystal Central để có cái nhìn khách quan về dự án này. Dự án Crystal Central tọa lạc tại vị trí đắc địa cùng 2 mặt tiền Quốc lộ 13 và Quốc lộ 516. Tọa lạc ngay trung tâm hành chính Bàu Bàng, cửa ngõ khu công nghiệp đô thị Bàu Bàng, với một quy mô gần 3.200 ha.  Ngoài ra, từ vị trí Crystal Central còn tiếp cận nhiều tuyến giao thông lớn khác như Bàu Bàng - Mỹ Phước - Đại lộ Tân Vạn, Đường Hồ Chí Minh, ĐT750, ĐT749, ĐT745C, Vành đai 5, cao tốc Đức Hòa – Chơn Thành, đường tạo lực Bàu Bàng – Phú Giáo – Bắc Tân Uyên ... Các dự án này sẽ tạo thành hệ thống kết nối đồng bộ giữa các khu công nghiệp lớn của tỉnh với các khu kinh tế trọng điểm phía Nam trong tương lai là động lực thúc đẩy phát triển kinh tế – xã hội của Bàu Bàng, đồng thời gia tăng giá trị bất động sản cho dự án Crystal Central. Li...
Đọc thêm

Mẫu Nhà Cấp 4 Mái Thái 5x20m Đẹp Giá Rẻ Xây Dựng

Hình ảnh
Nhà cấp 4 mái thái 5x20m chi phí đầu tư thấp nhưng vẫn đảm bảo không gian sống đẹp, tiện nghi, đáp ứng mọi nhu cầu lớn nhất của các thành viên trong gia đình cùng sinh sống. Với chi phí xây dựng phù hợp và thiết kế theo phong cách hiện tại, mẫu nhà cấp 4 100m2 này được rất nhiều gia chủ lựa chọn để xây dựng trong năm 2022. Kích thước mẫu nhà cấp 4 mái thái 5x20m đẹp Vừa kịp chủ đề hôm nay, chúng tôi sẽ giới thiệu đến bạn đọc và nhiều gia đình dự định xây những ngôi nhà tương tự trong tương lai, và sẽ có nhiều mẫu thiết kế tham khảo nữa. Ngôi nhà 4 tầng rộng 100m2 này có nhiều kiểu dáng và phong cách khác nhau tùy theo kinh tế mà bạn có thể ước lượng ngôi nhà theo ý thích của mình. Mẫu thiết kế nhà cấp 4 có gác lửng 5x20m mái thái đơn giản. Hình ảnh nhà ống 5x20m 4 tầng mái thái ở Thái Bình Phối cảnh nhà 4 tầng mái thái 5 × 20 đáp ứng nhu cầu sử dụng của gia đình Mẫu nhà ống 4 tầng 5×20 đẹp mà nhiều gia đình Việt Nam có thể mua được 500 triệu đồng xây nhà cấp 4 mái thái 5×2...
Đọc thêm

Hơn 15 Mẫu Cầu Thang Đẹp 2019 Cho Không Gian Nhỏ

Hình ảnh
Cầu thang là một bộ phận rất quan trọng trong bất kỳ ngôi nhà nào vì chúng được ví như những chiếc “mạch” kết nối các bộ phận khác nhau của ngôi nhà, những sợi dây cáp giữ kết cấu với nhau từ trên xuống dưới. Tuy nhiên, không gian này thường bị bỏ qua hoặc sử dụng để lưu trữ. Nếu bạn đang sở hữu một chiếc cầu thang như thế này thì cần phải thay đổi ngay để không gian đẹp và thoáng hơn. Cùng tham khảo mẫu cầu thang đẹp 2019 dưới đây nhé. Nếu ngôi nhà của bạn không được rộng rãi, đừng lo lắng! Chúng tôi có một số ý tưởng và thiết kế thú vị để truyền cảm hứng cho bạn trong các mẫu cầu thang đẹp của chúng tôi dưới đây! Những mẫu cầu thang đẹp 2019 với những đường cong độc đáo Mẫu cầu thang đẹp này trông rất hiện đại với hiệu ứng ánh sáng tuyệt vời. Khoảng cách giữa các bậc nhỏ để đảm bảo an toàn cho người già và trẻ em. Quan trọng là, chiếc cầu thang cổ điển đẹp này có thể phù hợp với mọi không gian chật hẹp và là không gian tuyệt vời để chụp ảnh tự sướng. Những mẫu đẹp để kết hợp tr...
Đọc thêm