Please enable JavaScript.

Coggle requires JavaScript to display documents.

ANGULAR 4 BASIC (:red_flag: Bài 1 Video (:red_flag: Bài 1 Video…

- - - - Kiểu dữ liệu
        var <biến>:<kiểu> = <giá trị>;
        
        number
        
        string
        
        boolean
        
        any
        VD: var a:any = { x:1, y:2 }
        
        array
        VD: var a:number[] = [1,2,3];
      - Gán biến
        
        var: gán toàn cục
        
        let: gán cục bộ bên trong {}
      - IF/ELSE: giống C#
      - WHILE/DO: giống C#
      - FOR: giống C#
        
        IN: trả về vị trí của phần tử
        for (var k in <array>) {<lệnh>}
        
        OF: trả về giá trị của phần tử
        for (var k of <array>) {lệnh>}
        
        FOREACH:
        <mảng>.forEach( i => {
        <lệnh với biến i> });
      - FUNCTION
        
        Không tham số:
        *function <name>() {<lệnh>}
        
        Có tham số:
        *function <name>(<tham số>)
        {<lệnh với tham số>}
      - HƯỚNG ĐỐI TƯỢNG
        (OOP) giống C#
        
        CLASS
        class HocSinh {các public/private properties}
        var hs1:HocSinh;
        hs1 sẽ có các thuộc tính của class HocSinh
        
        CONSTRUCTOR
        this.<biến> = <biến truyền vào>
        xử lý các hàm bên trong class
        sử dụng các giá trị truyền vào
        phải dùng constructor
        
        Link ví dụ CLASS, PROPERTY, CONSTRUCTOR: Click
        
        PROPERTY TYPE
        
        public: không cần ghi trước <biến>
        
        private: cần ghi trước <biến>
        
        INHERIT
        (thừa kế)
        
        class <class B> extends <class A> {}
        Class B thừa hưởng tất cả các thuộc tính của A
        
        Link ví dụ INHERIT: Click
    - - Cài NodeJS 8
        check: node -v
      - TypeScript
        check: tsc -v
      - NPM Lastest (tích hợp trong NodeJS)
        check: npm -v
      - IDE: Visual Studio Code
        free
        
        Plugin: Angular 4 and TypeScript/HTML VS Code Snippets
        
        Plugin: Angular Language Service
        
        Plugin: Angular v4 TypeScript Snippets
- - - - Angular 4
        Run cmd as Admin
        npm install -g @angular/cli
      - New PJ:
        cd <thư mục định chứa các PJ>
        ng new <tên PJ>
      - Serve/Start PJ
        cd <thư mục PJ> ng serve --open
    - - Tạo COM
        
        Thủ công
        (dành cho người mới
        thực hành trong 1-2 tuần)
        
        Các bước chính tạo thủ công
        chú ý: Viết Hoa chữ cái đầu tên COM
        
        Import CORE:
        import {Component} from "@angular/core";
        
        Khai báo COM:
        @Component({ })
        
        Cách cơ bản
        (xem cho hiểu)
        
        TEMPLATE: Học thêm HTML
        
        Ví dụ: Click
        
        STYLES: Học thêm CSS
        
        Tuy nhiên nên tách ra các file riêng
        không nên code trực tiếp trong COM
        
        SELECTOR
        
        Cách thông thường
        (dân chúng hay dùng)
        
        SELECTOR
        
        TEMPLATEURL: khai báo templateUrl: "<path>"
        
        STYLEURLS: khai báo styleUrls: ["<path>"]
        
        Export:
        `export class <Tên COM>Component { }
        
        Import vào AppComponent:
        tại *src/app/app.module.ts:
        import { <Tên COM export ở trên> } from '<đường dẫn tới file TS của COM>';
        Ví dụ: import { HSComponent } from './COMs/HS/HS.component';
        không cần thêm đuôi .ts
        
        Khai báo tại declarations:
        Thêm đằng sau AppComponent<dấu phẩy> <Tên COM đã import ở trên>
        
        New Folder chứa Các COMs
        (recommended)
        
        New Folder chứa COM cụ thể
        nằm trong Folder COMs
        
        New File TS (TypeScript)
        tên: <Tên COM>.component.ts
        nằm trong thư mục COM vừa tạo
        chú ý: Viết Hoa chữ cái đầu
        
        Tự động
        (dành cho ma cũ)
        
        Tự động: CLI
        (cmd)
        
        ng generate component <TênComponent>
        viết tắt: ng g c <TênComponent>
        
        New CMD, chuyển đường dẫn vào PJ
        cd <path>
      - Cấu trúc COM
        
        STYLES: CSS được dùng trong TEMPLATE
        
        SELECTOR: giống như 1 "custom tag" dùng cho HTML trong app.component.html
        
        TEMPLATE: sẽ xuất ra code HTML tương ứng với SELECTOR được gọi
        Tips: gõ code giữa 2 dấu huyền (`) có thể xuống dòng mà ko bị lỗi
      - Data Biding
        (Ràng buộc dữ liệu)
        (Tạo biến dưới export và gọi lên template)
        
        Cơ bản
        Xem ví dụ rõ ràng: Click
        
        Trên cơ bản
        
        Class
        
        Style
        
        Attribute
        
        Event