Angular4-在线竞拍应用-项目结构分析
|
用WebStorm打开auction项目
src目录
index.html文件 <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Auction</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>Loading...</app-root>
</body>
</html>
记住这里边有一个app-root标签 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';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
app目录
app.component.html文件 <h1>
{{title}}
</h1>
app.component.ts文件 import { Component } from '@angular/core';
@Component({
selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
@Component是装饰器，用来告知框架如何处理一个TypeScript类。 @Component包括多个属性，这些属性叫做元数据。 模板用来展示数据：在index.html中有一个app-root标签（这就相当于一个占位符），当程序运行的时候index.html中app-root标签所在的位置会显示app.component.html中的内容 控制器就是一个被@Component装饰的TypeScript类 数据绑定：让模板的各个部分和控制器的各个部分相互作用的一个机制。 实际运行的时候会把类中title属性的值替换掉模板中{{title}}title的值。 输入属性：让组件可以接收外部的数据，可以让父组件可以传递数据给子组件。 提供器：是用来做依赖注入的 生命周期钩子：一个组件从创建到销毁的过程中有多个钩子可以被触发执行一些业务逻辑，比如可以在组件初始化的时候从后台读取一些数据然后给组件赋值。 app.module.ts import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],imports: [
BrowserModule,FormsModule,HttpModule
],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }
模块也是一个带着装饰器的TypeScript类 declarations声明了模块都有什么东西，里边只能声明组件，指令和管道。 imports声明了要让应用运转还需要什么东西，也就是AppModule依赖的其他模块。 BrowserModule是开发浏览器应用必须的模块 FormsModule是处理表单的模块 HttpModule是提供http服务的 引入了这些模块后，就可以在自己的模块中使用引入模块中的组件，指令，服务。 providers用来声明模块中提供了什么服务。 bootstrap声明的模块的主组件 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |