Angular4-在线竞拍应用-项目结构分析

最新推荐文章于 2018-02-26 09:17:46 发布

eaglezsx

最新推荐文章于 2018-02-26 09:17:46 发布

阅读量733

点赞数

分类专栏： Angular4 文章标签： angular

本文链接：https://blog.csdn.net/zsx157326/article/details/78404909

版权

Angular4 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

用WebStorm打开auction项目

auction
- e2e：端到端的测试目录
- node_modules：下载的包
- src：应用源代码目录
- .angular-cli.json：angular的命令行工具的配置文件
- .editorconfig：给IDE用的配置文件
- .gitignore：给Git用的配置文件
- karma.conf.js：测试用的配置文件
- package.json：npm工具用的配置文件，里边有用的包的信息，具体下载哪些包，就是根据这个配置文件下的。
- pretractor.conf.js：测试用的配置文件
- README.md：对angular命令行工具的一些说明
- tsconfig.json：TypeScript编译器的配置
- tslint.json：对TypeScript代码质量检查的配置文件

src目录

src
- app
- assets:用来存静态资源，比如说图片
- environments：存不同环境的配置文件
- favicon.ico：Angular图标的图片
- index.html：整个应用的根HTML
- main.ts：整个应用的入口点，脚本执行的入口点
- polyfills.ts:用来导入一些必要的库来让Angular可以运行在一些老版本的浏览器中
- styles.css：放项目的一些全局的样式
- test.ts：测试用的
- tsconfig.app.json：TypeScript编译器的配置
- tsconfig.spec.json：TypeScript编译器的配置
- typings.d.ts

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
- app.component.css：
- app.component.html：模板
- app.component.spec.ts：
- app.component.ts：组件
- app.module.ts：模块

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声明的模块的主组件

eaglezsx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Angular4-在线竞拍应用-项目结构分析

用WebStorm打开auction项目auction e2e：端到端的测试目录node_modules：下载的包src：应用源代码目录.angular-cli.json：angular的命令行工具的配置文件.editorconfig：给IDE用的配置文件.gitignore：给Git用的配置文件karma.conf.js：测试用的配置文件package.json：npm工具用的配
复制链接

扫一扫

专栏目录