Angular7 - Thiết lập dự án

Trong chương này, chúng ta sẽ thảo luận về Thiết lập Dự án trong Angular 7.

Để bắt đầu thiết lập dự án, hãy đảm bảo rằng bạn đã cài đặt nodejs. You can check the version of node in the command line using the command, node –v, như hình dưới đây -

Nếu bạn không nhận được phiên bản, hãy cài đặt nodejs từ trang web chính thức của họ -https://nodejs.org/en/.

Sau khi bạn đã cài đặt nodejs, npm cũng sẽ được cài đặt với nó. Để kiểm tra phiên bản npm, hãy chạy npm -v trong dòng lệnh như hình dưới đây -

Vì vậy, chúng tôi có phiên bản nút 10 và phiên bản npm 6.4.1.

Để cài đặt Angular 7, hãy truy cập trang web, https://cli.angular.io để cài đặt Angular CLI.

Bạn sẽ thấy các lệnh sau trên trang web:

npm install -g @angular/cli //command to install angular 7
ng new my-dream-app // name of the project
cd my-dream-app
ng serve

Các lệnh trên giúp thiết lập dự án trong Angular 7.

Chúng tôi sẽ tạo một thư mục có tên là projectA7 và cài đặt angular/cli như hình dưới đây -

Sau khi cài đặt xong, hãy kiểm tra chi tiết của các gói đã cài đặt bằng cách sử dụng phiên bản lệnh như hình dưới đây -

Nó cung cấp phiên bản cho Angular CLI, phiên bản typecript và các gói khác có sẵn cho Angular 7.

Chúng ta đã hoàn tất việc cài đặt Angular 7, bây giờ chúng ta sẽ bắt đầu với việc thiết lập dự án.

Để tạo một dự án trong Angular 7, chúng ta sẽ sử dụng lệnh sau:

ng new projectname

Bạn có thể sử dụng tên dự án mà bạn chọn. Bây giờ chúng ta hãy chạy lệnh trên trong dòng lệnh.

Ở đây, chúng tôi sử dụng tên dự án là angle7-app . Khi bạn chạy lệnh, nó sẽ hỏi bạn về định tuyến như hình dưới đây:

Nhập y để thêm định tuyến vào thiết lập dự án của bạn.

Câu hỏi tiếp theo là về bảng định kiểu -

Các tùy chọn có sẵn là CSS, Sass, Less và Stylus. Trong ảnh chụp màn hình ở trên, mũi tên nằm trên CSS. Để thay đổi, bạn có thể sử dụng các phím mũi tên để chọn một phím cần thiết cho thiết lập dự án của mình. Hiện tại, chúng ta sẽ thảo luận về CSS để thiết lập dự án của chúng ta.

Dự án angle7-app được tạo thành công. Nó cài đặt tất cả các gói yêu cầu cần thiết để dự án của chúng tôi chạy trong Angular7. Bây giờ chúng ta hãy chuyển sang dự án đã tạo, nằm trong thư mụcangular7-app.

Thay đổi thư mục trong dòng lệnh bằng cách sử dụng dòng mã đã cho -

cd angular7-app

Chúng tôi sẽ sử dụng Visual Studio Code IDE để làm việc với Angular 7, bạn có thể sử dụng bất kỳ IDE nào, chẳng hạn như Atom, WebStorm, v.v.

Để tải xuống Mã Visual Studio, hãy truy cập https://code.visualstudio.com/ và nhấp vào Tải xuống cho Windows.

Nhấp vào Tải xuống cho Windows để cài đặt IDE và chạy thiết lập để bắt đầu sử dụng IDE.

Sau đây là Biên tập viên -

Chúng tôi chưa bắt đầu bất kỳ dự án nào trong đó. Bây giờ chúng ta hãy lấy dự án mà chúng ta đã tạo bằng cách sử dụng angle-cli.

Chúng tôi sẽ xem xét angular7-appdự án. Hãy để chúng tôi mởangular7-app và xem cấu trúc thư mục trông như thế nào.

Bây giờ chúng ta đã có cấu trúc tệp cho dự án của mình, chúng ta hãy biên dịch dự án của mình bằng lệnh sau:

ng serve

The ng serve command builds the application and starts the web server.

Bạn sẽ thấy bên dưới khi lệnh bắt đầu thực thi -

Máy chủ web khởi động trên cổng 4200. Nhập url, "http://localhost:4200/" trong trình duyệt và xem kết quả đầu ra. Sau khi dự án được biên dịch, bạn sẽ nhận được kết quả sau:

Khi bạn chạy url, http://localhost:4200/ trong trình duyệt, bạn sẽ được chuyển đến màn hình sau:

Bây giờ chúng ta hãy thực hiện một số thay đổi để hiển thị nội dung sau:

“Welcome to Angular 7!”

Chúng tôi đã thực hiện các thay đổi trong các tệp - app.component.html và app.component.ts. Chúng tôi sẽ thảo luận thêm về điều này trong các chương tiếp theo của chúng tôi.

Hãy để chúng tôi hoàn thành thiết lập dự án. Nếu bạn thấy chúng tôi đã sử dụng cổng 4200, đây là cổng mặc định mà angle – cli sử dụng trong khi biên dịch. Bạn có thể thay đổi cổng nếu muốn bằng lệnh sau:

ng serve --host 0.0.0.0 –port 4205

Thư mục angle7-app / có phần sau folder structure-

  • e2e/- thư mục thử nghiệm end to end. Chủ yếu e2e được sử dụng để kiểm tra tích hợp và giúp đảm bảo ứng dụng hoạt động tốt.

  • node_modules/- Gói npm được cài đặt là node_modules. Bạn có thể mở thư mục và xem các gói có sẵn.

  • src/ - Thư mục này là nơi chúng ta sẽ làm việc trên dự án bằng cách sử dụng Angular 7.Inside src / you sẽ ứng dụng / thư mục được tạo trong quá trình thiết lập dự án và chứa tất cả các tệp cần thiết cần thiết cho dự án.

Thư mục angle7-app / có phần sau file structure -

  • angular.json - Về cơ bản, nó chứa tên dự án, phiên bản của cli, v.v.

  • .editorconfig - Đây là tệp cấu hình cho trình soạn thảo.

  • .gitignore - Một tệp .gitignore nên được cam kết vào kho lưu trữ, để chia sẻ các quy tắc bỏ qua với bất kỳ người dùng nào khác sao chép kho lưu trữ.

  • package.json - Tệp package.json cho biết thư viện nào sẽ được cài đặt vào node_modules khi bạn chạy npm install.

Hiện tại, nếu bạn mở tệp package.json trong trình chỉnh sửa, bạn sẽ nhận được các mô-đun sau được thêm vào đó:

"@angular/animations": "~7.2.0", 
"@angular/common": "~7.2.0", 
"@angular/compiler": "~7.2.0", 
"@angular/core": "~7.2.0", 
"@angular/forms": "~7.2.0", 
"@angular/platform-browser": "~7.2.0", 
"@angular/platform-browser-dynamic": "~7.2.0", 
"@angular/router": "~7.2.0", 
"core-js": "^2.5.4", 
"rxjs": "~6.3.3", 
"tslib": "^1.9.0", 
"zone.js": "~0.8.26"

Trong trường hợp bạn cần thêm nhiều thư viện, bạn có thể thêm các thư viện đó tại đây và chạy lệnh npm install.

  • tsconfig.json - Điều này về cơ bản chứa các tùy chọn trình biên dịch cần thiết trong quá trình biên dịch.

  • tslint.json - Đây là tệp cấu hình với các quy tắc được xem xét trong khi biên dịch.

Các src/ thư mục là thư mục chính, bên trong có cấu trúc tệp khác.

ứng dụng

Nó chứa các tệp được mô tả bên dưới. Các tệp này được cài đặt bởi angle-cli theo mặc định.

app.module.ts

Nếu bạn mở tệp, bạn sẽ thấy rằng mã có tham chiếu đến các thư viện khác nhau, được nhập vào. Angular-cli đã sử dụng các thư viện mặc định này để nhập: angle / core, platform-browser.

Bản thân những cái tên giải thích việc sử dụng các thư viện. Chúng được nhập và lưu vào các biến như khai báo, nhập, trình cung cấp và bootstrap.

Chúng ta có thể nhìn thấy app-routing.modulecũng được thêm vào. Điều này là do chúng tôi đã chọn định tuyến khi bắt đầu cài đặt. Mô-đun được thêm bởi @ angle / cli.

Sau đây là cấu trúc của tệp:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

@NgModule được nhập từ @ angle / core và nó có đối tượng với các thuộc tính sau:

Declarations- Trong các khai báo, tham chiếu đến các thành phần được lưu trữ. Thành phần ứng dụng là thành phần mặc định được tạo bất cứ khi nào một dự án mới được bắt đầu. Chúng ta sẽ tìm hiểu về cách tạo các thành phần mới trong một phần khác.

Imports- Điều này sẽ có các mô-đun được nhập như hình trên. Hiện tại, BrowserModule là một phần của quá trình nhập được nhập từ @ angle / platform-browser. Ngoài ra còn có thêm mô-đun định tuyến AppRoutingModule.

Providers- Điều này sẽ có tham chiếu đến các dịch vụ được tạo. Dịch vụ sẽ được thảo luận trong một chương tiếp theo.

Bootstrap - Điều này có tham chiếu đến thành phần mặc định được tạo, tức là AppComponent.

app.component.css- Bạn có thể viết css của bạn ở đây. Ngay bây giờ, chúng ta đã thêm màu nền cho div như hình dưới đây.

Cấu trúc của tệp như sau:

.divdetails {
   background-color: #ccc; 
}

app.component.html

Mã html sẽ có sẵn trong tệp này.

Cấu trúc của tệp như sau:

<!--The content below is only a placeholder and can be replaced.--> 
<div style = "text-align:center">
   <h1>Welcome to {{ title }}!</h1> 
   <img width = "300" alt = "Angular Logo" 
   src = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZp
   ZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA
   2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBma
   WxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSA
   zMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2
   wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3I
   DQwLjl6IiAvPgogIDwvc3ZnPg=="7> 
</div> 

<h2>Here are some links to help you start:</h2> 
<ul> 
   <li> 
      <h2><a target = "_blank" rel = "noopener" 
         href = "https://angular.io/tutorial">Tour of Heroes</a>
      </h2>
   </li> 
   <li> 
      <h2><a target = "_blank" rel = "noopener" 
         href = https://angular.io/cli">CLI Documentation</>
      </h2> 
   </li> 
   <li> 
      <h2><a target = "_blank" rel = "noopener" 
         href = "https://blog.angular.io/">Angular blog</a>
      </h2> 
   </li> 
</ul> 
<router-outlet></router-outlet>

Đây là mã html mặc định hiện có sẵn khi tạo dự án.

app.component.spec.ts

Đây là các tệp được tạo tự động chứa các bài kiểm tra đơn vị cho thành phần nguồn.

app.component.ts

Lớp cho thành phần được định nghĩa ở đây. Bạn có thể xử lý cấu trúc html trong tệp .ts. Quá trình xử lý sẽ bao gồm các hoạt động như kết nối với cơ sở dữ liệu, tương tác với các thành phần khác, định tuyến, dịch vụ, v.v.

Cấu trúc của tệp như sau:

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',  
   templateUrl: './app.component.html', 
   styleUrls: ['./app.component.css'] 
})
export class AppComponent { 
   title = 'Angular 7';
}

app-routing.module.ts

Tệp này sẽ giải quyết việc định tuyến cần thiết cho dự án của bạn. Nó được kết nối với mô-đun chính, tức là app.module.ts.

Cấu trúc của tệp như sau:

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];
@NgModule({ 
   imports: [RouterModule.forRoot(routes)], 
   exports: [RouterModule] 
}) 
export class AppRoutingModule { }

Tài sản

Bạn có thể lưu hình ảnh, tệp js của mình vào thư mục này.

Môi trường

Thư mục này có thông tin chi tiết cho môi trường sản xuất hoặc nhà phát triển. Thư mục chứa hai tệp.

  • environment.prod.ts
  • environment.ts

Cả hai tệp đều có thông tin chi tiết về việc tệp cuối cùng nên được biên dịch trong môi trường sản xuất hay môi trường nhà phát triển.

Cấu trúc tệp bổ sung của thư mục angle7-app / bao gồm:

favicon.ico

Đây là một tệp thường được tìm thấy trong thư mục gốc của một trang web.

index.html

Đây là tệp được hiển thị trong trình duyệt.

<html lang = "en"> 
   <head>
      <meta charset = "utf-8"7gt;
      <title>Angular7App</title> 
      <base href = "/">
      <meta name = "viewport" content = "width=device-width, initial-scale=1"> 
      <link rel = "icon" type = "image/x-icon" href = "favicon.ico"> 
   </head> 
   <body> 
      <app-root></app-root> 
   </body> 
</html>

Cơ thể có <app-root></app-root>. Đây là bộ chọn được sử dụng trongapp.component.ts tệp và sẽ hiển thị các chi tiết từ app.component.html tập tin.

main.ts

main.ts là tệp từ nơi chúng tôi bắt đầu phát triển dự án của mình. Nó bắt đầu với việc nhập mô-đun cơ bản mà chúng ta cần. Ngay bây giờ nếu bạn thấy angle / core, angle / platform-browser-dynamic, app.module và môi trường được nhập theo mặc định trong quá trình cài đặt và thiết lập dự án angle-cli.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module'; 
import { environment } from './environments/environment';

if (environment.production) { 
   enableProdMode(); 
}
platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

PlatformBrowserDynamic (). BootstrapModule (AppModule) có tham chiếu mô-đun chính AppModule. Do đó, khi nó thực thi trong trình duyệt, tệp được gọi là index.html. Index.html tham chiếu nội bộ đến main.ts gọi mô-đun mẹ, tức là AppModule khi mã sau thực thi:

platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

Khi AppModule được gọi, nó sẽ gọi app.module.ts và gọi thêm AppComponent dựa trên bootstrap như sau:

bootstrap: [AppComponent]

Trong app.component.ts, có một bộ chọn: app-rootđược sử dụng trong tệp index.html. Điều này sẽ hiển thị nội dung có trongapp.component.html.

Thông tin sau sẽ được hiển thị trong trình duyệt -

polyfill.ts

Điều này chủ yếu được sử dụng để tương thích ngược.

styles.css

Đây là tệp kiểu cần thiết cho dự án.

test.ts

Tại đây, các trường hợp kiểm thử đơn vị để kiểm thử dự án sẽ được xử lý.

tsconfig.app.json

Điều này được sử dụng trong quá trình biên dịch, nó có các chi tiết cấu hình cần được sử dụng để chạy ứng dụng.

tsconfig.spec.json

Điều này giúp duy trì các chi tiết để thử nghiệm.

typings.d.ts

Nó được sử dụng để quản lý định nghĩa Typecript.

Cấu trúc tệp cuối cùng sẽ như sau:

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved