import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
//includes the new-cmp component we created
@NgModule({
declarations: [
AppComponent,
NewCmpComponent
//here it is added in declarations and will behave as a child component
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
//for bootstrap the AppComponent the main app component is given.
})
export class AppModule { }
new-cmp.component.ts⽂件⽣成如下-，
import { Component, OnInit } from '@angular/core'; //here angular/core is imported.
@Component({
//this is a declarator which starts with @sign.
//The component word marked in bold needs to be the same.
selector: 'app-new-cmp', //selector to be used inside .html file.
templateUrl: './new-cmp.component.html',
//reference to the html file created in the new component.
styleUrls: ['./new-cmp.component.css'] //reference to the style file.
})
export class NewCmpComponent implements OnInit {
constructor() { }
ngOnInit() { }
}
如果您看到上⾯的new-cmp.component.ts⽂件，它将创建⼀个名为NewCmpComponent的新类，该类将实现OnInit，其中包含⼀个构造函
数和⼀个名为ngOnInit()的⽅法。执⾏该类时，默认情况下会调⽤ngOnInit。
当我们在"http://localhost:4200/"浏览器中点击url时，它⾸先执⾏index.html⽂件，如下所⽰-
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular7App</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
上⾯是普通的html⽂件，我们看不到浏览器中打印的任何内容。我们将在正⽂部分中查看标签。
这是Angular默认创建的根标签。该标签在main.ts⽂件中具有引⽤。
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
吾⽣也有涯,⽽知⽆涯-⽆涯教程
我的内容管理
展开
