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

男娘i 2022-06-06 05:27 163阅读 0赞

用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的值。

![这里写图片描述][SouthEast]

**输入属性**：让组件可以接收外部的数据，可以让父组件可以传递数据给子组件。

**提供器**：是用来做依赖注入的

**生命周期钩子**：一个组件从创建到销毁的过程中有多个钩子可以被触发执行一些业务逻辑，比如可以在组件初始化的时候从后台读取一些数据然后给组件赋值。

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

[SouthEast]: /images/20220606/bcbfe38aca024748828e22580eb657bf.png