Angular6快速入门与项目创建-CSDN博客

本文链接：https://blog.csdn.net/wang_yaqin/article/details/86590930

这篇博客介绍了如何从零开始学习Angular6，包括检查Node.js环境、安装Angular CLI、创建新项目、在浏览器中预览项目以及了解项目目录结构。接着讲解了如何修改项目，如更改组件标题、添加全局样式以及实现双向数据绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装环境

1.1检查看自己是否有node.js

以管理员身份打开命令窗口，输入npm -v ,官网上是要求8以上版本的

1.2输入命令npm install -g @angular/cli命令

进行一些资源的下载

1.3创建一个新的项目

下面这样就是直接创建在window/system32目录里面，可以选择自定义目录，进入该目录再输入 ng new 项目名

1.4在浏览器中打开这个项目

进入项目: cd 项目名

在浏览器打开: ng serve --open

接下来它会默认一个浏览器打开，网址是：localhost:4200

1.5项目目录
打开项目可以看到其目录如下：

app.component.ts-用typescript编写的组件类代码。

app.component.html-组件模板，用html编写。

app.component.css-组件的私有CSS样式。

2.修改项目

用编辑器打开新建的项目，编辑器我用的是vscode,项目是angular上的项目

修改标题

保存刷新页面可以看到

修改标题内容

刷新页面：

添加全局样式

刷新页面，为了让区别比较明显，上面h2，h3的颜色该为了比较鲜艳的绿色

双向绑定

给英雄列表添加样式：

/* HeroesComponent's private CSS styles */
.selected {
  background-color: #CFD8DC !important;
  color: white;
}
.heroes {
  margin: 0 0 2em 0;
  list-style-type: none;
  padding: 0;
  width: 15em;
}
.heroes li {
  cursor: pointer;
  position: relative;
  left: 0;
  background-color: #EEE;
  margin: .5em;
  padding: .3em 0;
  height: 1.6em;
  border-radius: 4px;
}
.heroes li.selected:hover {
  background-color: #BBD8DC !important;
  color: white;
}
.heroes li:hover {
  color: #607D8B;
  background-color: #DDD;
  left: .1em;
}
.heroes .text {
  position: relative;
  top: -3px;
}
.heroes .badge {
  display: inline-block;
  font-size: small;
  color: white;
  padding: 0.8em 0.7em 0 0.7em;
  background-color: #607D8B;
  line-height: 1em;
  position: relative;
  left: -1px;
  top: -4px;
  height: 1.8em;
  margin-right: .8em;
  border-radius: 4px 0 0 4px;
}

不会做排版，是真的丑