Angular--WebStorm介绍

前言

在学习Angular的时候需要用到的工具是WebStorm，既然用到这个工具，那肯定需要对该工具要有一定的了解才好，所以这边博客主要介绍一下WebStorm的内容。

内容

如上图，WebStorm的界面是这样的：

e2e：

端到端的测试目录，包含基本的测试装，用来做智能测试

node_modules：

该文件夹中放置的都是第三方依赖包，自己写的代码不能放入该文件夹中

src：

引用源代码目录，我们所写的所有源代码应当放于该文件夹中

app：

包含我们应用的组件和模块，我们所写代码绝大部分写在该目录下

app.component.css：

app.component.html：

<h1>            
    {
   {
   title}}
</h1>

app.component.spec.ts：

app.component.ts：

组件，整个应用的基础

//在@angular/core中引入了一个叫Component的装饰器
import{Component}from'@angular/core'; 

//用该装饰器定义了一个组件以及组件的原数据，用装饰器来附加元数据，装饰器中的属性就叫元数据
//所有的组件需要用一个@Component进行注解，前面带“@”的即为装饰器
@Component({ 
    //css的选择器，表示该组件可以通过app-root这么个标签来调用
    selector:'app-root',  
    //组件的内容，指定“./app.component.html”为组件的模版，最终在index.html中<app-root>前面展示该页面内容
    templateUrl:'./app.component.html',   
    //指定“./app.component.css”为组件的css文件，可以在这个末班中编辑css样式然后附加到页面中去
    styleUrls:['./app.component.css']     
})

//用装饰器Component中的元数据附加到类AppComponent中
//AppComponent是一个标准的typescript类
export class AppComponent{
               
    title='app works!';
}

app.module.ts：