(二)angular2的环境配置

末蓝、 2021-09-14 03:36 284阅读 0赞

# angular2的环境配置 #

angular2是和angularJS是完全不同的两个版本。可以说两者没有任何联系的存在，这也就意味着在使用angular2的时候相当于了解一门全新的语言，angular2是基于TypeScript开发的。所以要想熟练的使用angular2，需要先学习angular的基础知识。  
环境配置是进行配开发的第一步。  
[angular中文官网链接][angular]

*  **安装angular**
 *  **angular工程的简介**

--------------------

## 安装angular过程 ##

### 1. 安装node.js ###

从node.js的官网上下载最新版本的node，确保下载新版本的node以确保对angular的完全支持
    制台窗口中运行命令 node -v 和 npm -v， 来验证一下你正在运行 node 6.9.x 和 npm 3.x.x 以上的版本。 更老的版本可能会出现错误，更新的版本则没问题。

### 2. 安装angular-cli ###

Angular CLI是一个命令行界面工具，它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。（本质上就是一个在控制台界面的开发工具）

*  在命令行窗口—>npm install -g @angular/cli  
    安装全局的angular-cli

### 3.创建工程 ###

在自己想要创建工程的文件目录下shift+鼠标右键--->在此处打开命令行窗口。

*  ng new app-Name  
    创建新项目需要花费很多时间，大多数时候都是在安装那些npm包。  
    ![这里写图片描述][SouthEast]
 *  ng serve –open  
    ng serve是启动服务器 –open（或-o）参数可以自动打开浏览器并访问[http://localhost:4200/][http_localhost_4200]

## 开发工具介绍 ##

在cmd窗口也可进行angular的基本开发，但是我称那些那样做的人，你们是多想装逼啊。  
推荐两个经常用的开发工具。

1.  vs code  
    vs code是免费开源的开发软件，启动快，属于轻量级的开发工具。（但是我发现在vs code的控制窗口启动serve是，vs code的cpu占用率比较高）  
    
    
    1.  将在cmd创建的项目导入到vs code中  
        文件—>打开文件夹—>选择工程  
        文件目录：  
        ![这里写图片描述][SouthEast 1]
2.  webstorm  
    webstorm是前端宗师级的开发工具，是我见过最实用的开发工具。唯一的缺点是收费的，好像也有不收费的版本，当然支持angular的版本也已经有破解版本了，支持正版。
    
    1.  创建项目  
        ![这里写图片描述][SouthEast 2]
    2.  项目文件夹  
        ![这里写图片描述][SouthEast 3]

## 项目文件夹概览 ##

### 1.根目录 ###

src/文件夹是项目的根文件夹之一。 其它文件是用来帮助你构建、测试、维护、文档化和发布应用的。它们放在根目录下，和src/平级。  
![这里写图片描述][SouthEast 4]  
根目录介绍  
![这里写图片描述][SouthEast 5]

### 2.src文件夹 ###

你的应用代码位于src文件夹中。 所有的Angular组件、模板、样式、图片以及你的应用所需的任何东西都在那里。 这个文件夹之外的文件都是为构建应用提供支持用的。  
![这里写图片描述][SouthEast 6]  
文件介绍  
![这里写图片描述][SouthEast 7]

[angular]: https://www.angular.cn/
[SouthEast]: /images/20210726/ee2d8d46c22d478d90806093d28ef83e.png
[http_localhost_4200]: http://localhost:4200/
[SouthEast 1]: /images/20210726/4ff24591bc4b4386afa66df5939bfc40.png
[SouthEast 2]: /images/20210726/f2dd688cbd7042efa2ff64d8c7dde528.png
[SouthEast 3]: /images/20210726/f1908e4df14049e5800a30dce6b88142.png
[SouthEast 4]: /images/20210726/c77dd46e461c4b768de36ab5429c13e0.png
[SouthEast 5]: /images/20210726/59669d1909ca4db8beb5578d9f6c9882.png
[SouthEast 6]: /images/20210726/99bfdccdf1154a2e99a67d5a84c63a11.png
[SouthEast 7]: /images/20210726/834ba8b93a6e4901a0a6f90d56fd8949.png