nguyendanhanhphuong
New member
### 3. Ứng dụng tìm kiếm người dùng GitHub: Tạo người dùng và thành phần người dùng
Trong hướng dẫn này, chúng tôi sẽ tạo các thành phần người dùng và người dùng cho ứng dụng tìm kiếm người dùng GitHub của chúng tôi.Chúng tôi sẽ sử dụng [angular cli] (https://cli.angular.io/) để tạo ra các thành phần.
#### 1. Tạo thành phần người dùng
Để tạo thành phần người dùng, hãy chạy lệnh sau:
`` `
ng tạo người dùng thành phần
`` `
Điều này sẽ tạo một thư mục mới có tên là `người dùng 'trong thư mục` src/app`.Thư mục sẽ chứa các tệp sau:
* `users.component.html`: Mẫu cho thành phần người dùng.
* `users.component.css`: Các kiểu cho thành phần người dùng.
* `users.component.ts`: Lớp TypeScript cho thành phần người dùng.
Mở tệp `users.component.html` và thêm mã sau:
`` `HTML
<ul>
<li *ngfor = "Hãy để người dùng người dùng $ | async">
<a href="/người dùng.html_url} =
</li>
</ul>
`` `
Mã này sẽ tạo ra một danh sách người dùng.Danh sách sẽ được điền với dữ liệu từ `người dùng $` có thể quan sát được.
Mở tệp `users.component.ts` và thêm mã sau:
`` `TypeScript
nhập {thành phần, oninit} từ '@angular/lõi';
Nhập {httpclient} từ '@angular/common/http';
@Thành phần({
Bộ chọn: 'Người dùng ứng dụng',
TemplateUrl: './users.component.html',
StyleUrls: ['./users.component.css']]
})
Xuất lớp UserComponent thực hiện oninit {
Người dùng $: có thể quan sát <any []>;
Constructor (private http: httpclient) {}
Ngoninit () {
this.users $ = this.http.get ('https://api.github.com/users')
.đường ống(
Bản đồ (res => res.data)
);
}
}
`` `
Mã này sẽ tạo ra một người dùng có thể quan sát được.Các quan sát có thể quan sát được sẽ được khởi tạo trong móc vòng đời `ngoninit`.Các quan sát có thể quan sát được sẽ được điền với dữ liệu từ điểm cuối `https: // api.github.com/người dùng.
#### 2. Tạo thành phần UserItem
Để tạo thành phần UserItem, hãy chạy lệnh sau:
`` `
ng tạo thành phần UserItem
`` `
Điều này sẽ tạo một thư mục mới có tên là `userItem` trong thư mục` src/app`.Thư mục sẽ chứa các tệp sau:
* `userItem.component.html`: Mẫu cho thành phần userItem.
* `userItem.component.css`: Các kiểu cho thành phần UserItem.
* `userItem.component.ts`: lớp TypeScript cho thành phần UserItem.
Mở tệp `useritem.component.html` và thêm mã sau:
`` `HTML
<a href="{ user.html_url} =>
<img src = "{{user.avatar_url}}" alt = "{{user.login}}">
</a>
`` `
Mã này sẽ hiển thị hình ảnh của người dùng và liên kết đến hồ sơ GitHub của họ.
Mở tệp `useritem.component.ts` và thêm mã sau:
`` `TypeScript
nhập {thành phần, oninit} từ '@angular/lõi';
@Thành phần({
bộ chọn: 'app-useritem',
TemplateUrl: './useritem.component.html',
StyleUrls: ['./useritem.component.css']]
})
Xuất lớp userItemComponent thực hiện oninit {
Người dùng: Bất kỳ;
người xây dựng() { }
Ngoninit () {}
}
`` `
Mã này sẽ tạo một thành phần hiển thị hình ảnh của người dùng và liên kết đến hồ sơ GitHub của họ.
#### 3. Sử dụng các thành phần người dùng và người dùng trong ứng dụng
Để sử dụng các thành phần người dùng và người dùng trong ứng dụng, hãy mở tệp `app.component.html` và thêm mã sau:
`` `HTML
<Phuss app-users> </app-users>
`` `
Mã này sẽ thêm thành phần người dùng vào ứng dụng.Thành phần người dùng sẽ hiển thị danh sách người dùng.
Để hiển thị thành phần UserItem, hãy thêm mã sau vào tệp `users.component.html`:
`` `HTML
<app-useritem *ngfor = "Hãy để người dùng người dùng $ |
`` `
Mã này sẽ thêm thành phần UserItem vào người dùng
=======================================
### 3. Github Users Search App: Create Users and Useritem Component
In this tutorial, we will create the Users and Useritem components for our Github Users Search App. We will use the [Angular CLI](https://cli.angular.io/) to generate the components.
#### 1. Create the Users Component
To create the Users component, run the following command:
```
ng generate component users
```
This will create a new folder called `users` in the `src/app` directory. The folder will contain the following files:
* `users.component.html`: The template for the Users component.
* `users.component.css`: The styles for the Users component.
* `users.component.ts`: The TypeScript class for the Users component.
Open the `users.component.html` file and add the following code:
```html
<ul>
<li *ngFor="let user of users$ | async">
<a href="{{ user.html_url }}">{{ user.login }}</a>
</li>
</ul>
```
This code will create a list of users. The list will be populated with the data from the `users$` observable.
Open the `users.component.ts` file and add the following code:
```typescript
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
users$: Observable<any[]>;
constructor(private http: HttpClient) { }
ngOnInit() {
this.users$ = this.http.get('https://api.github.com/users')
.pipe(
map(res => res.data)
);
}
}
```
This code will create an observable of users. The observable will be initialized in the `ngOnInit` lifecycle hook. The observable will be populated with the data from the `https://api.github.com/users` endpoint.
#### 2. Create the Useritem Component
To create the Useritem component, run the following command:
```
ng generate component useritem
```
This will create a new folder called `useritem` in the `src/app` directory. The folder will contain the following files:
* `useritem.component.html`: The template for the Useritem component.
* `useritem.component.css`: The styles for the Useritem component.
* `useritem.component.ts`: The TypeScript class for the Useritem component.
Open the `useritem.component.html` file and add the following code:
```html
<a href="{{ user.html_url }}">
<img src="{{ user.avatar_url }}" alt="{{ user.login }}">
</a>
```
This code will display an image of the user and a link to their GitHub profile.
Open the `useritem.component.ts` file and add the following code:
```typescript
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-useritem',
templateUrl: './useritem.component.html',
styleUrls: ['./useritem.component.css']
})
export class UseritemComponent implements OnInit {
user: any;
constructor() { }
ngOnInit() { }
}
```
This code will create a component that displays an image of the user and a link to their GitHub profile.
#### 3. Use the Users and Useritem Components in the App
To use the Users and Useritem components in the app, open the `app.component.html` file and add the following code:
```html
<app-users></app-users>
```
This code will add the Users component to the app. The Users component will display a list of users.
To display the Useritem component, add the following code to the `users.component.html` file:
```html
<app-useritem *ngFor="let user of users$ | async" [user]="user"></app-useritem>
```
This code will add the Useritem component to the Users
Trong hướng dẫn này, chúng tôi sẽ tạo các thành phần người dùng và người dùng cho ứng dụng tìm kiếm người dùng GitHub của chúng tôi.Chúng tôi sẽ sử dụng [angular cli] (https://cli.angular.io/) để tạo ra các thành phần.
#### 1. Tạo thành phần người dùng
Để tạo thành phần người dùng, hãy chạy lệnh sau:
`` `
ng tạo người dùng thành phần
`` `
Điều này sẽ tạo một thư mục mới có tên là `người dùng 'trong thư mục` src/app`.Thư mục sẽ chứa các tệp sau:
* `users.component.html`: Mẫu cho thành phần người dùng.
* `users.component.css`: Các kiểu cho thành phần người dùng.
* `users.component.ts`: Lớp TypeScript cho thành phần người dùng.
Mở tệp `users.component.html` và thêm mã sau:
`` `HTML
<ul>
<li *ngfor = "Hãy để người dùng người dùng $ | async">
<a href="/người dùng.html_url} =
</li>
</ul>
`` `
Mã này sẽ tạo ra một danh sách người dùng.Danh sách sẽ được điền với dữ liệu từ `người dùng $` có thể quan sát được.
Mở tệp `users.component.ts` và thêm mã sau:
`` `TypeScript
nhập {thành phần, oninit} từ '@angular/lõi';
Nhập {httpclient} từ '@angular/common/http';
@Thành phần({
Bộ chọn: 'Người dùng ứng dụng',
TemplateUrl: './users.component.html',
StyleUrls: ['./users.component.css']]
})
Xuất lớp UserComponent thực hiện oninit {
Người dùng $: có thể quan sát <any []>;
Constructor (private http: httpclient) {}
Ngoninit () {
this.users $ = this.http.get ('https://api.github.com/users')
.đường ống(
Bản đồ (res => res.data)
);
}
}
`` `
Mã này sẽ tạo ra một người dùng có thể quan sát được.Các quan sát có thể quan sát được sẽ được khởi tạo trong móc vòng đời `ngoninit`.Các quan sát có thể quan sát được sẽ được điền với dữ liệu từ điểm cuối `https: // api.github.com/người dùng.
#### 2. Tạo thành phần UserItem
Để tạo thành phần UserItem, hãy chạy lệnh sau:
`` `
ng tạo thành phần UserItem
`` `
Điều này sẽ tạo một thư mục mới có tên là `userItem` trong thư mục` src/app`.Thư mục sẽ chứa các tệp sau:
* `userItem.component.html`: Mẫu cho thành phần userItem.
* `userItem.component.css`: Các kiểu cho thành phần UserItem.
* `userItem.component.ts`: lớp TypeScript cho thành phần UserItem.
Mở tệp `useritem.component.html` và thêm mã sau:
`` `HTML
<a href="{ user.html_url} =>
<img src = "{{user.avatar_url}}" alt = "{{user.login}}">
</a>
`` `
Mã này sẽ hiển thị hình ảnh của người dùng và liên kết đến hồ sơ GitHub của họ.
Mở tệp `useritem.component.ts` và thêm mã sau:
`` `TypeScript
nhập {thành phần, oninit} từ '@angular/lõi';
@Thành phần({
bộ chọn: 'app-useritem',
TemplateUrl: './useritem.component.html',
StyleUrls: ['./useritem.component.css']]
})
Xuất lớp userItemComponent thực hiện oninit {
Người dùng: Bất kỳ;
người xây dựng() { }
Ngoninit () {}
}
`` `
Mã này sẽ tạo một thành phần hiển thị hình ảnh của người dùng và liên kết đến hồ sơ GitHub của họ.
#### 3. Sử dụng các thành phần người dùng và người dùng trong ứng dụng
Để sử dụng các thành phần người dùng và người dùng trong ứng dụng, hãy mở tệp `app.component.html` và thêm mã sau:
`` `HTML
<Phuss app-users> </app-users>
`` `
Mã này sẽ thêm thành phần người dùng vào ứng dụng.Thành phần người dùng sẽ hiển thị danh sách người dùng.
Để hiển thị thành phần UserItem, hãy thêm mã sau vào tệp `users.component.html`:
`` `HTML
<app-useritem *ngfor = "Hãy để người dùng người dùng $ |
`` `
Mã này sẽ thêm thành phần UserItem vào người dùng
=======================================
### 3. Github Users Search App: Create Users and Useritem Component
In this tutorial, we will create the Users and Useritem components for our Github Users Search App. We will use the [Angular CLI](https://cli.angular.io/) to generate the components.
#### 1. Create the Users Component
To create the Users component, run the following command:
```
ng generate component users
```
This will create a new folder called `users` in the `src/app` directory. The folder will contain the following files:
* `users.component.html`: The template for the Users component.
* `users.component.css`: The styles for the Users component.
* `users.component.ts`: The TypeScript class for the Users component.
Open the `users.component.html` file and add the following code:
```html
<ul>
<li *ngFor="let user of users$ | async">
<a href="{{ user.html_url }}">{{ user.login }}</a>
</li>
</ul>
```
This code will create a list of users. The list will be populated with the data from the `users$` observable.
Open the `users.component.ts` file and add the following code:
```typescript
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
users$: Observable<any[]>;
constructor(private http: HttpClient) { }
ngOnInit() {
this.users$ = this.http.get('https://api.github.com/users')
.pipe(
map(res => res.data)
);
}
}
```
This code will create an observable of users. The observable will be initialized in the `ngOnInit` lifecycle hook. The observable will be populated with the data from the `https://api.github.com/users` endpoint.
#### 2. Create the Useritem Component
To create the Useritem component, run the following command:
```
ng generate component useritem
```
This will create a new folder called `useritem` in the `src/app` directory. The folder will contain the following files:
* `useritem.component.html`: The template for the Useritem component.
* `useritem.component.css`: The styles for the Useritem component.
* `useritem.component.ts`: The TypeScript class for the Useritem component.
Open the `useritem.component.html` file and add the following code:
```html
<a href="{{ user.html_url }}">
<img src="{{ user.avatar_url }}" alt="{{ user.login }}">
</a>
```
This code will display an image of the user and a link to their GitHub profile.
Open the `useritem.component.ts` file and add the following code:
```typescript
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-useritem',
templateUrl: './useritem.component.html',
styleUrls: ['./useritem.component.css']
})
export class UseritemComponent implements OnInit {
user: any;
constructor() { }
ngOnInit() { }
}
```
This code will create a component that displays an image of the user and a link to their GitHub profile.
#### 3. Use the Users and Useritem Components in the App
To use the Users and Useritem components in the app, open the `app.component.html` file and add the following code:
```html
<app-users></app-users>
```
This code will add the Users component to the app. The Users component will display a list of users.
To display the Useritem component, add the following code to the `users.component.html` file:
```html
<app-useritem *ngFor="let user of users$ | async" [user]="user"></app-useritem>
```
This code will add the Useritem component to the Users
