Nota: Para verificar a versão do seu Angular CLI digite: ng --version  

O comando : npm install -g @angular/cli   instala o Angular CLI.

(Você precisa ter o Node.js e Npm instalados.)

Na pasta src temos a pasta app onde estão os componentes da aplicação

O arquivo tsconfig.json é o arquivo de configuração TypeScript;

Um componente é um recurso utilizado para criar uma classe responsável por controlar e manter o estado de uma view.

O arquivo app.component.html é onde vamos exibir a nossa aplicação.

O arquivo app.module.ts contém a classe AppModule é responsável por expor para a aplicação algum código específico, que pode ser uma classe, uma função, ou mesmo uma constante.

Dentro da pasta aluno serão criados os arquivos:

• aluno.component.ss
• aluno.component.html
• aluno.component.ts

Além de criar estes arquivos o Angular CLI atualiza o arquivo app.module.ts com as referências aos componentes criados.

O arquivo aluno.ts é onde vamos definir a classe Aluno.

export class Aluno {
    alunoId: string;
    nome: string;
    email: string;
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';  
import { HttpHeaders } from '@angular/common/http';  
import { Observable } from 'rxjs';  
import { Aluno } from './aluno'; 

var httpOptions = {headers: new HttpHeaders({"Content-Type": "application/json"})};

@Injectable({
  providedIn: 'root'
})
export class AlunoService {

  url = 'https://localhost:44354/api/alunos';  

  constructor(private http: HttpClient) { }

  getAllAlunos(): Observable<Aluno[]> {  
    return this.http.get<Aluno[]>(this.url);  
  }  

  getAlunoById(alunoid: string): Observable<Aluno> {  
    const apiurl = `${this.url}/${alunoid}`;
    return this.http.get<Aluno>(apiurl);  
  } 

  createAluno(aluno: Aluno): Observable<Aluno> {  
    return this.http.post<Aluno>(this.url, aluno, httpOptions);  
  }  

  updateAluno(alunoid: string, aluno: Aluno): Observable<Aluno> {  
    const apiurl = `${this.url}/${alunoid}`;
    return this.http.put<Aluno>(apiurl,aluno, httpOptions);  
  }  

  deleteAlunoById(alunoid: string): Observable<number> {  
    const apiurl = `${this.url}/${alunoid}`;
    return this.http.delete<number>(apiurl, httpOptions);  
  }  
}

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AlunoComponent } from './aluno/aluno.component';
import { AlunoService } from './aluno.service';  

import { FormsModule, ReactiveFormsModule } from '@angular/forms';  

import { HttpClientModule, HttpClient } from '@angular/common/http';  
import {  
MatButtonModule, MatMenuModule, MatDatepickerModule,MatNativeDateModule , MatIconModule, 
MatCardModule, MatSidenavModule,MatFormFieldModule,  
MatInputModule, MatTooltipModule, MatToolbarModule  
} from '@angular/material';  

import { MatRadioModule } from '@angular/material/radio';  
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';  

@NgModule({
  declarations: [
    AppComponent,
    AlunoComponent
  ],
  imports: [
    BrowserModule,  
    FormsModule,  
    ReactiveFormsModule,  
    HttpClientModule,  
    BrowserAnimationsModule,  
    MatButtonModule,  
    MatMenuModule,  
    MatDatepickerModule,  
    MatNativeDateModule,  
    MatIconModule,  
    MatRadioModule,  
    MatCardModule,  
    MatSidenavModule,  
    MatFormFieldModule,  
    MatInputModule,  
    MatTooltipModule,  
    MatToolbarModule,  
    AppRoutingModule  
  ],
  providers: [HttpClientModule, AlunoService,MatDatepickerModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';  
import { Observable } from 'rxjs';  
import { AlunoService } from '../aluno.service';  
import { Aluno } from '../aluno';  

@Component({
  selector: 'app-aluno',
  templateUrl: './aluno.component.html',
  styleUrls: ['./aluno.component.css']
})
export class AlunoComponent implements OnInit {

  dataSaved = false;  
  alunoForm: any;  
  allAlunos: Observable<Aluno[]>;  
  alunoIdUpdate = null;  
  message = null;  

  constructor(private formbulider: FormBuilder, private alunoService:AlunoService) { }

  ngOnInit() {
    this.alunoForm = this.formbulider.group({  
      Nome: ['', [Validators.required]],  
      Email: ['', [Validators.required]],  
    });  
    this.loadAllAlunos();  
  }

  loadAllAlunos() {  
    this.allAlunos = this.alunoService.getAllAlunos();  
  } 

  onFormSubmit() {  
    this.dataSaved = false;  
    const aluno = this.alunoForm.value;  
    this.CreateAluno(aluno);  
    this.alunoForm.reset();  
  } 

  CreateAluno(aluno: Aluno) {  
    if (this.alunoIdUpdate == null) {  
      this.alunoService.createAluno(aluno).subscribe(  
        () => {  
          this.dataSaved = true;  
          this.message = 'Registro salvo com sucesso';  
          this.loadAllAlunos();  
          this.alunoIdUpdate = null;  
          this.alunoForm.reset();  
        }  
      );  
    } else {  
      aluno.alunoId = this.alunoIdUpdate;  
      this.alunoService.updateAluno(this.alunoIdUpdate,aluno).subscribe(() => {  
        this.dataSaved = true;  
        this.message = 'Registro atualizado com sucesso';  
        this.loadAllAlunos();  
        this.alunoIdUpdate = null;  
        this.alunoForm.reset();  
      });  
    }  
  }  

  loadAlunoToEdit(alunoid: string) {  
    this.alunoService.getAlunoById(alunoid).subscribe(aluno=> {  
      this.message = null;  
      this.dataSaved = false;  
      this.alunoIdUpdate = aluno.alunoId;  
      this.alunoForm.controls['Nome'].setValue(aluno.nome);  
      this.alunoForm.controls['Email'].setValue(aluno.email);  
    });    
  }  

  deleteAluno(alunoid: string) {  
    if (confirm("Deseja realmente deletar este aluno ?")) {   
      this.alunoService.deleteAlunoById(alunoid).subscribe(() => {  
        this.dataSaved = true;  
        this.message = 'Registro deletado com sucesso';  
        this.loadAllAlunos();  
        this.alunoIdUpdate = null;  
        this.alunoForm.reset();  
      });  
    }  
  }  

  resetForm() {  
    this.alunoForm.reset();  
    this.message = null;  
    this.dataSaved = false;  
  } 
}

th,td{
    text-align: center;
}
th{
    background-color:#422956;
    color: white;
}
.tbl1
{
    width: 400px;
}
.tbl2
{
    width: 400pxx;
}

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Alunos-Crud';
}

<p> 
<app-aluno></app-aluno> 
</p> 

Quer migrar para o VB .NET ?

• Veja mais sistemas completos para a plataforma .NET no Super DVD .NET , confira...

• Curso Básico VB .NET - Vídeo Aulas

Quer aprender C# ??

• Chegou o Super DVD C# com exclusivo material de suporte e vídeo aulas com curso básico sobre C#.

• Curso C# Basico - Video Aulas

Quer aprender os conceitos da Programação Orientada a objetos ?

• Curso Fundamentos da Programação Orientada a Objetos com VB .NET

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

•  Curso - Gerando Relatórios com o ReportViewer no VS 2013 - Vídeo Aulas