怀着一颗对Angular充满探索欲的心，我开始尝试我的第一个Angular应用。
以前一直在做C#客户端上的开发，有时会自己写一些RESTful API放到公司的服务器上做数据访问，但偶尔会涉及到Web前端。接下来，我会学习一下Angular，来扩充一下自己的知识面，作为学习笔记，如果有错误，还请大家指正。
在网上搜索了资料以后，我发现存在AngularJS和Angular，作为小白，我的第一反应就是AngularJS与Angular有什么区别，他们之间的关系是什么？一番搜索过后，发现AngularJS是Angular1.x版本，从Angular2.x之后就改成的Angular，同时增加了全新的命令行工具angular cli。具体区别，可以在百度或Google上搜索，会列出许多文章。了解过后，内心一顿OS过后，还是选择学习最新版本的Angular。
先从安装说起，官网有详细的安装说明，参见Angular QuickStart，我们这里还是简单说一下：
1. 首先安装Node.js和npm，参见nodejs 官方下载，根据自己的操作系统选择对应的安装包，建议下载LTS版本（我在macOS上下载了最新的版本，后续安装Angualr一直报错，后来把把Node.js卸载了，改回到LTS版本才安装成功）
2. 安装完成后，如果是windows系统，检查一下node.js的安装路径是否已经在环境变量中
3. 检查Node.js和npm是否安装成功，在命令行中输入node -v和npm -v，这两条命令的意思是查看Node.js的版本和npm的版本，按照官方的说法，Node.js的版本要在8.x或以上，npm的版本要在5.x或以上，同时，这两条命令也可以同时检查Node.js和npm是否正确安装和配置
检查node.js和npm是否正确安装4. 接下来我们就可以开始我们的安装了，我们需要安装angular cli，在命令行中输入 npm install -g @angular/cli，接下来可能需要花费几分钟时间，耐心等待安装完成，安装完成之后，在命令行中输入 ng -v 来确认angular cli安装成功
查看angular cli版本
至此，angular cli安装成功，我们接下来做的很多事情都要依靠angular cli来做
第一件事情就是我们需要创建一个全新的Angular应用，我们首先在命令行中cd到我们的工作目录，然后输入如下命令 ng new my-app，my-app是我们应用的名称，这条命令的意思就是创建一个全新的Angular应用，angular cli会帮助我们创建好目录结构，初始的文件，我们随后只要通过angular cli去添加组件，模块和服务等就可以了，这些我们在后面的文章中会一边学，一边讲到。
接下来，我们想要运行这个应用，那我们首先在命令行中cd到我们的应用目录下，然后输入ng serve --open来启动服务，同时打开浏览器来查看我们的应用，--open的意思就是启动服务的同时打开浏览器的意思。
通过前面简单的几步，我们的Angular应用就运行起来了，然而“工欲善其事，必先利其器”，我们还要选择一个好的IDE去编辑我们的Angular代码，对于IDE，个人都有个人的偏好，只要能帮助我们愉悦得完成开发工作的都是好的IDE，我因为一直在做C#的开发，所以我抱着试一试的心态，用Visual Studio 2017 Community打开了my-app的工程目录，然后我发现visual studio 2017对angular支持的还是很好的，自动提示都有，所以我建议如果大家还在对选择哪个IDE还有疑虑的话，可以尝试使用visual studio，或者轻量级的visual studio code。当然这只是一个建议，大家还是选择用自己最熟悉的IDE最佳。
这篇文章只是将最浅显的安装和编辑器做了一个介绍，大家可以按照官方的Quick start敲一些代码试一下。后面，我也会一边学习，一边写一些笔记来感受Angular带给我们的便利。
网友评论