Angular目录结构分析
标注星号的必须要知道,其他的了解一下就可以了。
app.moudule.ts详解
/* 这个文件是Angular根模块,会告诉Angular如何组装应用 */
// BrowserMoudule,浏览器解析模块
import { BrowserModule } from '@angular/platform-browser';
// Angular核心模块
import { NgModule } from '@angular/core';
// 根组件
import { AppComponent } from './app.component';
/* @NgModule装饰器,@NgModule接受一个元数据对象,告诉Angular如何编译和启动应用 */
@NgModule({
declarations: [ // 配置当前项目运行的组件
AppComponent
],
imports: [ // 配置当前模块运行进行依赖的其他模块
BrowserModule
],
providers: [], // 配置项目所需要的服务
bootstrap: [AppComponent] // 指定应用的主视图(称为根组件)通过引导根AppModule来启动引用,这里一般写的是根组件
})
// 跟模块不需要导出任何东西,因为其他组件不需要导入根模块
export class AppModule { }
Angular创建组件
使用命令创建组件。
ng g component components/news
在根目录下敲入上述代码,表示创建一个文件夹conponents,并在其中添加组件news。
组件使用
此时我们就可以使用我们刚才创建的news组件。
绑定数据
新创建一个header组件。
绑定数据title,并使用: