Angular Fundamentals

Angular Fundamentals

1. Installation

2. Component

  1. Create a new file under the folder src/app, name it courses.component.
    import { Component } from "@angular/core";
    
    @Component({
        selector: 'courses',
        template: '<h2>My Course</h2>'
    })
    export class courses{
    
    }

    “Selector” indicates that how user going to use this tag in CSS

    “template” is the basic HTML for this component, it can also be an external file.

  2. Now we need to register this component into a module, right now, we only have one module app.module.ts.
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    
    import { AppComponent } from './app.component';
    
    @NgModule({
      declarations: [
        AppComponent,
        course// add it here
      ],
      imports: [
        BrowserModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

     

  3. Open app.component.html, delete everything in that and change to following code
    <h1>hello world</h1>
    <courses></courses>

    You should see courses at the next line of hello world.

  4. Generate Component by Angular-CLI

    The process above is tedious and easy to make mistakes. So by using Angular-CLI, we can finish all the procedure within one command;

    ng g c test

    “g” stands for generating, and c stands for components. After hit the enter, the component is there.

3. Templates

Just like Django, flask and all other frameworks, we need data binding to make our web interactive with the TS code behind. Let s change the content of course. Component.ts to the following code

import { Component } from "@angular/core";

@Component({
    selector: 'courses',
    template: '{{ getTitle() }}'
})
export class coursesComponent{
    title = 'list of courses';

    getTitle() {
        return this.title;
    }

}

{{}} is called interpolation, you can access the field and method in your TS code by writing code inside {{}};

Derivitives

import { Component } from "@angular/core";

@Component({
    selector: 'courses',
    template: `
    <h1>courses</h1>
    <ul>
        <li *ngFor = "let course of courses">
            {{ course }}
        </li>
    </ul>

    `
})
export class coursesComponent{
    title = 'list of courses';

    courses = ['course1', 'course2', 'course3'];

    getTitle() {
        return this.title;
    }

}

First, we change the “” in the template to “ which makes us can write multiple lines of code inside it; And we create an Array in courseComponent. using “*ngFor” derivatives, we can iterate through the courses Array. keyword “let” announce a new variable “course”, and course is in the Array of course.

3. Services

Usually, we do not hardcode the course list inside our code as we done above, instead we request the data from the server by a HTTP request. However, we do not want to over consume HTTP Service , so we use Services in angular to reduce the time we consume HTTP service.

Let s create a new File called courses.service.ts 

export class courseService{
    getCourses(){
        return ['course1', 'course2', 'course3'];
    }

}

dependency injection 

import { Component } from "@angular/core";
import { courseService } from "./courses.service";

@Component({
    selector: 'courses',
    template: `
    <h1>courses</h1>
    <ul>
        <li *ngFor = "let course of courses">
            {{ course }}
        </li>
    </ul>

    `
})
export class coursesComponent{
    title = 'list of courses';
    courses;

    constructor(service: courseService){
       this.courses = service.getCourses();
    }

    getTitle() {
        return this.title;
    }

}

And register our service at module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { coursesComponent } from './courses.component';
import { TestComponent } from './test/test.component';
import { courseService } from './courses.service';

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

Generate service with Angular CLI

ng g s email

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *