Angular初探（1-5）

最新推荐文章于 2021-06-27 19:34:04 发布

原创最新推荐文章于 2021-06-27 19:34:04 发布 · 216 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Angular #在线竞拍程序onlineAuction

Angular 专栏收录该内容

5 篇文章

订阅专栏

本文深入解析Angular应用程序的启动过程，从配置文件到组件加载，详细阐述了如何从index.html和main.ts开始，逐步构建和呈现Angular应用。

Angular程序的起始

从配置文件说起

就像一个小baby的诞生，我们需要给小baby配置一个爸爸妈妈，他才能诞生是吧？既然我们需要一个Angular工程启动，同样需要一个配置文件来表示怎么开始。
机智的我早已经在前面告诉你哪个是工程的配置文件：
没错，就是他
接下来我来解释以下这个文件里的内容，我们只需要关注下面两行，注释的很清楚。

"options": {
            "outputPath": "dist/dist",
            "index": "src/index.html", //这个是应用起点的html界面，加载页面
            "main": "src/main.ts", //这个是应用起点要执行的脚本，执行脚本
            "polyfills": "src/polyfills.ts",
           ......
          },

上面的两行有没有似曾相识的感觉呢？没错，机智如你，一个带了脚本的html页面启动不也是这样吗？加载页面，执行脚本。

从启动页面和执行脚本文件走下去
（1）index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dist</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>

和普通的html文件没有什么区别吧？这时小明同学问，标签<app-root>我没见过啊！小明，别激动，我们稍后说。这个时候我们启动程序，还记得那个命令吗：npm run start 或者是：ng serve，然后呈现了下面的样子：
在这里插入图片描述
如果你的网速不是太好，起始最先呈现的是Loading…字样，然后才是上述界面。加载loading字样我能理解，因为loading就在index.html页面上写这的嘛！上面的界面是哪里跑出来的。
index.html页面我们已经分析完毕，接着我们看Angular执行的脚本，第二行"main": “src/main.ts”，看一看这个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)
  .catch(err => console.log(err));

第一行导入开发环境配置的包。
第二行导入Angular编译程序的模块。
第三行导入App模块
第四行导入开发环境模块
if判断，如果是生产环境（就是上线了）那么就关闭Angular开发者模式
最后一段代码，编译模块启动整个应用，从App模块开始，就是第三行的那个导入的模块，我们赶快去看看。
在这里插入图片描述

import { AppComponent } from './app.component'; //导入app组件

@NgModule({
  declarations: [
    AppComponent    //申明app组件
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]    //启动app组件
})
export class AppModule { }

我们从启动的app组件AppComponent组件看，现在点击去。

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'onlineAuction';
}

组件都包含了什么呢？看看@Component注解的内容：
selector选择器，在html中选择这个组件所要用的名称。是不是有点印象在哪里见到过，对，机智的你想起来是在index.html页面中见过这个选择器：
在这里插入图片描述
没错啦，组件就是在这里呈现，那么要呈现什么内容呢，我们走下去，templateUrl翻译过来是模版地址，呈现的就是这个叫app.component.html的html模板，打开看看吧，或许有什么意想不到的宝藏呢！

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

这…这不就是呈现给我们的界面嘛，踏破铁鞋无觅处啊，终于等到他，还好没放弃。
styleUrls翻译过来就是样式表地址，你这么聪明，肯定知道这个就是css嘛，对的。