第一个组件

转载于 2018-01-18 16:48:33 发布 · 339 阅读

文章标签：

#angular 第一个组件

angular 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个使用Angular框架创建简单Web应用程序的过程。通过示例代码展示了如何定义组件、模板以及如何将它们整合在一起。从app.module.ts到app.component.ts，再到demo01.component.ts，逐步解析了Angular项目的结构。

demo01/demo01.component.ts

import {Component} from '@angular/core'

@Component({
    selector:'demo01',
    template:`<h1>this is our first component</h1>`,
})

export class Demo01Component{

}

app.component.ts

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

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
             <demo01></demo01>
  `,
})
export class AppComponent  { name = 'New Year'; }

app.module.ts

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

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

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