[ng2 - practice] - Github search profile (P1)

Mình cũng đã giới thiệu về ng2 qua 2 bài ng-form và ng-cli. Nhưng học phải đi đôi với hành phải không nào? Hôm nay mình sẽ cùng các bạn build 1 app nhỏ để áp dụng những cái mình học được nhé.

Mình chỉ tự tìm tòi & đọc doc trên trang chủ, chưa có nhiều kinh nghiệm thực tế. Nên chắc chắn sẽ có những thiếu sót, mình rất hoan nghênh/mong muốn nhận được những góp ý của các bạn

Tất nhiên rồi, đầu tiên phải tạo project chứ nhỉ. Chạy ng new github-search nhé

CSS Preprocessor mặc định sẽ là css. Nếu bạn thích xài scss/sass thì có thể set lại bằng command : ng set defaults.styleExt scss

Ng2 được build dựa trên các component nên ta cũng phải tạo ra các component trong pj của mình thôi App của mình là search profile trên github nên ta sẽ phải tạo ra 1 form để search ng g component form-seach sẽ giúp mình tạo ra 1 component thật đơn giản

Lưu ý, phần html/css mình sẽ chỉ post những đoạn code chính, bạn có thể vào link github của mình ở dưới bài viết để xem bản full không che nhé

Tạo giao diện cái nhỉ, vào file app/form-search/form-search.component.html vừa được tạo nhé

<input class="form-control" name="username" placeholder="Enter A Github Username..." autocomplete="off" type="text">

Tạo model để chứa thông tin user chứ nhỉ

// file app/mode/github-user.ts
export class gitHubUser {
    constructor (
        public user: any, public repos: any,
        public username: any, public items: any,
    ) {    }
}

Tạo service để search chứ nhỉ. Mình chỉ post code để đó & không nói gì nhé (