Please enable JavaScript.

Coggle requires JavaScript to display documents.

Angular (Tour of Heroes (Add in-app navigation with routing…

- - - - ng new app_name
    - - cd angular-tour-of-heroes
        ng serve --open
    - - AppComponent distributed over three files:
        
        app.component.ts— the component class code, written in TypeScript
        
        app.component.html— the component template, written in HTML
        
        app.component.css— the component's private CSS styles
  - - - ng generate component heroes
      - creates a new folder, src/app/heroes/,
      - generates the three files of the HeroesComponent along with a test file (html, style, ts)
      - The ngOnInit() is a lifecycle hook. Angular calls ngOnInit() shortly after creating a component. It's a good place to put initialization logic.
        
        LIfe hook
      - Always export the component class so you can import it elsewhere ... like in the AppModule.
    - - dùng binding {{ }}
    - - tạo class obj
    - - dùng pipe để format |
      - | uppercase : in hoa
  - - - <input> belongs to FormsModule
  - - - *ngFor
        
        repeater directive
        
        Don't forget the asterisk (*) in front of ngFor. It's a critical part of the syntax.
    - - clicks a hero in the master list, the component should display the selected hero's details at the bottom of the page
      - *ngIf to conditionally include or exclude a block of HTML
      - toggle a CSS style class with a class binding.
        
        [class.some-css]="điều kiện"
  - - - The command also adds the HeroDetailComponent as a declaration in the NgModule decorator of the src/app/app.module.ts file.
      - Input() property
        
        external HeroesComponent will bind by property binding
        
        <app-hero-detail [thuộc tính]="giá trị"></app-hero-detail>
  - - - Create the HeroService
        
        ng generate service hero
        
        Injectable() services
      - Provide the HeroService
        
        A provider is something that can create or deliver a service
        
        To make sure that the HeroService can provide this service, register it with the injector
        
        By default, the Angular CLI command ng generate service registers a provider with the root injector
        
        providedIn: 'root'
    - - giả quyết sự đồng bộ/ ko đồng bộ của data
      - Angular HttpClient.get() return Observable
      - Observable is one of the key classes in the RxJS library.
      - In the HTTP tutorial, you'll call HttpClient.get<Hero[]>() which also returns an Observable<Hero[]> that emits a single value, an array of heroes from the body of the HTTP response.
      - Subscribe in HeroesComponent
        
        Observable.subscribe() is the critical difference.
        
        The subscribe() method passes the emitted array to the callback, which sets the component's heroes property
  - - - dùng CIL ng generate module app-routing --flat --module=app nếu chưa có AppRoutingModule
        
        --flat puts the file in src/app instead of its own folder.
        
        --module=app tells the CLI to register it in the imports array of the AppModule.
      - AppRoutingModule imports RouterModule and Routes so the app can have routing functionality
    - - Routes tell the Router which view to display when a user clicks a link or pastes a URL into the browser address bar.
      - A typical Angular Route has two properties
        
        path: a string that matches the URL in the browser address bar.
        
        component: the component that the router should create when navigating to this route.
    - - The method is called forRoot() because you configure the router at the application's root level. The forRoot() method supplies the service providers and directives needed for routing, and performs the initial navigation based on the current browser URL.
    - - The <router-outlet> tells the router where to display routed views. (dựa vào path, component tương ứng)
    - - A routerLink attribute is the string that the router matches to the path ( khai báo trong app.routng)
    - - { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
    - - ActivatedRoute
        
        holds information about the route to this instance of the HeroDetailComponent
      - Location
        
        an Angular service for interacting with the browser
  - - - HttpClient is Angular's mechanism for communicating with a remote server over HTTP.
      - 2 STEP available HttpClient:
        
        add it to the root AppModule by importing
        
        import { HttpClientModule } from '@angular/common/http';
        
        add HttpClient to the imports array
    - - Important: the In-memory Web API module has nothing to do with HTTP in Angular.
    - - Định nguiax url call API: :base/:collectionName
      - Get heroes with HttpClient
      - HttpClient methods return one value
        
        All HttpClient methods return an RxJS Observable of something.
        
        An observable from HttpClient always emits a single value and then completes, never to emit again.
      - HttpClient.get() returns response data
      - Error handling
      - Tap into the Observable
        
        RxJS tap() operator, which looks at the observable values, does something with those values, and passes them along
        
        The tap() call back doesn't touch the values themselves.
- - - - combines HTML with Angular markup that can modify HTML elements before they are displayed.
    - - provide program logic to what gets displayed
      - classify
        
        structural directive
        
        *ngFor is an iterative; it tells Angular to stamp out one <li> per hero in the heroes list.
        
        *ngIf is a conditional; it includes the HeroDetail component only if a selected hero exists.
        
        attribute directive
        
        giống thuộc tính HTML
    - - connects your application data and the DOM
      - classify
        
        Event binding ( ) lets your app respond to user input in the target environment by updating your application data.
        
        Property binding [ ] lets you interpolate values that are computed from your application data into the HTML.
        
        interpolation {{ }}
        
        Two-way data binding (used mainly in template-driven forms) combines property and event binding in a single notation [(ngModel)]
    - - product-alerts.component.ts
        
        Selector: tên đc đặt để gọi component. Prefix: app-(tên component)
        
        Template/ templateUrl: đây là giao diện Component
        
        Style / styleUrl: css cho Component.
      - product-alerts.component.html
      - product-alerts.component.css
    - - Angular pipes let you declare display-value transformations in your template HTML
      - To specify a value transformation in an HTML template, use the pipe operator (|).
      - {{interpolated_value | pipe_name}}
      - to transform data before it is displayed
      - Pipes are a good way to format strings, currency amounts, dates and other display data. Angular ships with several built-in pipes and you can create your own.
    - - Component is a decorator function that specifies the Angular metadata for the component.
  - - - An NgModule is defined by a class decorated with NgModule()
      - properties
        
        declarations
        
        Khai báo các componet, directtive, pile của module này
        
        import s
        
        Nạp các Module khác mà module này cần
        
        providers
        
        Các services mà các Component khác có thể sử dụng
        
        bootstrap
        
        Định nghĩa root component của module
        
        Only the root NgModule should set the bootstrap property