Angular项目目录结构

angular结构

主要文件

image.png

src/app/app.module.ts

image.png

模块化组件化开发模式

创建组件命令

使用命令创建的组件会在文件app.module.ts中自动引入
ng g component components/news

引用组件

src/app/app.component.html内输入以下代码
<app-news></app-news>

数据绑定

定义属性
export class NewsComponent implements OnInit {
  title = '我是一个新闻组件';

  constructor() {
  }

  ngOnInit(): void {
  }

}
模板中引用
{{title}}