二、项目结构

app.module.ts //根模块
@NgModule({
  // 注册组件
  declarations: [
    AppComponent,
    HeaderComponent
  ],
  imports: [ //注册引入的模块
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

html：写页面结构的地方：

//.component.ts类似于.js
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';//引入模块
@Component({
  selector: 'app-content',//组件名称
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css'] //组件html和css文件引入
})
export class ContentComponent implements OnInit {
  public programs:any;//声明此动态变量
  constructor(public http:HttpClient) { }
  ngOnInit() { //发送http请求写在此生命周期里。
    var url:string = "http://192.168.14.15:5000/dj/program?rid=336355127";
    this.http.get(url).subscribe(res=>{
      console.log(res);
      this.programs=res["programs"]
    })
  }
}