Writing Your First Angular Web Application

创建新的工程

ng new --ng4 angular-hello-world

index.html

  
  
  

  
  


  Loading...

知识点：

这个属于html的知识点，忘记了，看下：

ng4的标签，这个标签是我们代码渲染的地方，在我们的应用代码加载之前，Loading...会显示出来，用webstorm的好处是，这个标签可以直接联想到对应的Component类

  Loading...

启动工程：

在工程的根目录下，运行ng serve,会启动默认端口4200监听，或者直接ng serve --port 9001指定对应的端口监听

显示效果如下：

图1

解释下：

这里显示的是index.html的内容，而index.html显示的是app-root的标签，这个标签呢，对应的是app这个component，每个component都有对应的css 模板Html和component类。

图2

看代码：

app.component

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

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

app.component.html

  {{title}}

解释：

selector: 标签名字
templateUrl: 模板,
styleUrls: css样式

创建新的component

 ng generate component hello-world