本教程不对Angular,React,Vue做对比。

    搭建angular基本环境：nodejs(version 8.x or 10.x)，npm(npm会在安装 Node.js 时默认安装)。

    在终端/控制台窗口中运行 node -v 命令检查node版本

    在终端/控制台窗口中运行 npm -v 命令检查是否安装了npm 

    1. PS E:\YUTAO> node -v
    2. v8.11.4
    3. PS E:\YUTAO> npm -v
    4. 5.6.0

    现在开始正式搭建angular项目的环境：

    安装 Angular CLI，终端/控制台窗口，并输入

    1. npm install -g @angular/cli

    在终端/控制台窗口输入ng -v检查版本信息

    1. PS E:\YUTAO> ng -v
    3.      _                      _                 ____ _     ___
    4.     / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
    5.    / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
    6.   / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
    7.  /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
    8.                 |___/
    11. Angular CLI: 6.1.0
    12. Node: 8.11.4
    13. OS: win32 x64
    14. Angular:
    15. ...
    17. Package                      Version
    18. ------------------------------------------------------
    19. @angular-devkit/architect    0.7.0
    20. @angular-devkit/core         0.7.0
    21. @angular-devkit/schematics   0.7.0
    22. @schematics/angular          0.7.0
    23. @schematics/update           0.7.0
    24. rxjs                         6.3.3
    25. typescript                   2.7.2

    用angular cli命令初始化一个项目，在终端/控制台窗口输入

    1.  ng new first-app

    启动项目，在终端/控制台窗口依次输入

    1. cd first-app
    2. ng serve --open

    ng serve 命令会自动开启开发服务器
    —open选项会自动打开浏览器，并访问 http://localhost:4200/。angular cli默认监听4200端口，如果想监听其他端口，可以更改启动命令为

    1. ng serve --open  --port 4201

    或者更改配置文件监听其他端口，后面再讲。

    看下自动打开的页面

    环境搭建 - 图1

    现在尝试对项目增删改

    用你最趁手的IDE（强烈推荐vscode）打开项目,然后打开‘ ./src/app/app.component.ts’，把 title = ‘first-app’; 修改成 title = ‘YT-first-app’;
    再打开‘ ./src/app/app.component.html’，把ul内容全部注释。
    再打开‘ ./src/app/app.component.css ’，添加一些样式进去。如下：

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'app-root',
    5.   templateUrl: './app.component.html',
    6.   styleUrls: ['./app.component.css']
    7. })
    8. export class AppComponent {
    9.   title = 'first-app';
    10. }
    1. <!--The content below is only a placeholder and can be replaced.-->
    2. <div style="text-align:center">
    3.   <h1>
    4.     Welcome to {{ title }}!
    5.   </h1>
    6.   <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
    7. </div>
    8. <h2>Here are some links to help you start: </h2>
    9. <!-- <ul>
    10.   <li>
    11.     <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
    12.   </li>
    13.   <li>
    14.     <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
    15.   </li>
    16.   <li>
    17.     <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
    18.   </li>
    19. </ul> -->
    1. h1 {
    2.     color: red
    3. }

    再看浏览器

    环境搭建 - 图2

    下一章对每个文件及一些重要文件中的代码做详细介绍