《Angular学习七》组件和模块

先来看下angular程序的执行顺序。文件目录参考

1. 程序启动，会先访问index.html。
2. 然后会访问<app-root></app-root>标签。
3. 程序会启动main.ts。
4. main.ts 会启动AppModule。
5. AppModule 会调用 AppComponent
6. AppComponent会将app.component.html的内容输出到app-root

app.component.ts 为组件

组件定义需要引入import { Component } from ‘@angular/core’;

有@Component({}) 修饰符的，就被标识为组件，代码如下

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

@Component({
  selector: 'app-root',               //模板输出到制定的标签
  templateUrl: './app.component.html',//模板的路径
  styleUrls: ['./app.component.scss'] //页面用到的样式
})
export class AppComponent {           //组件名称，类名称，只有@Component修饰的才叫组件

  title = 'app';
}

app.module.ts 为模块

模块的定义需要引入import { NgModule } from ‘@angular/core’;

有@NgModule({}）修饰的，就被标识为模块，代码如下

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent   //组件
  ],
  imports: [
    BrowserModule,//浏览器模块
    AppRoutingModule//路由模块
  ],
  providers: [],
  bootstrap: [AppComponent]//引用组件
})
export class AppModule { }