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嘛,对的。
好了,对于Angular我们终于有了个大致的了解了,离我们用各种姿势使用它还差的远呢,但不要急,因为,急也没用!(笑哭…)慢慢来,华山论剑,终我无敌。小憩一下,下一节,在线竞拍程序开始!