Contents:

Angularv4.初体验


1389 浏览 6 years

3 应用模块和组件 App Module & Component

版权声明: 转载请注明出处 http://www.codingsoho.com/

03 App Module & Component

查看 app.module.ts

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

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

初始导入了模块 AppComponent，这个模块是在app.component里面定义的

app.component.ts

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

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

如果将title改为"My Apps"，那么网页也会自动相应修改

它的内容是在templateUrl: './app.component.html'里使用的，用法跟django非常相似

  <h1>
    Welcome to {{ title }}!
  </h1>

我们也可以直接替换这个模板文件为html格式内容，注意两端的符号

@Component({
  selector: 'app-root',
  //templateUrl: './app.component.html',
  template: `{{title}} is cool`,
  styleUrls: ['./app.component.css']
})

网页直接显示为 My Apps is cool

如果把template的内容拷贝到'./app.component.html'，显示效果是一样的

Component的selector的名字和index.html里面要一致，例如，我们把上面的selector改为'srvup-up'，那么同样在index.html里面也要做相应修改