Angular4开发简易blog系统（一）搭建开发环境

使用Angular4开发blog，主要是把Angular4的基础知识和特性呈现出来，只有自己动手编写、实践才能发现和掌握Angular4的技术点。

随着Angular4的版本的稳定和google承若对Angular4的持续技术支持（主要是框架不会再发生变化，不像AngularJS1一样，从AngularJS1升级到Angular4是断崖式的升级），童鞋们渴望立马就掌握Angular4，利用Angular4在项目中开发，最好的学习资源首先是英文官方文档Angular，作为英文不太好的，当然首先中文官方文档Angular。

---

重重之中就是Angular4是使用TypeScript作为开发语言的，TypeScript作为JavaScript的超集，具有es5以来的最新特性，符合最新的ECMAScript标准，作为TypeScript的技术支持者是微软公司。

开发IDE利用微软的vscode，童鞋们可以到官网下载。当然童鞋们也可以使用其他的IDE，萝卜白菜各有所爱。

tip：童鞋们不要以为我是给微软打广告，作为开发者，自己喜欢就好。

---

blog主要是利用Angular4作为技术开发，首先来搭建项目。利用Angular CLI构建项目，Angular CLI是一个命令行界面工具，它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。

检测node是否安装。我安装的是v6.10.3，npm版本：3.10.10

可以执行node命令，检测版本。

node --version

node执行结果：

可以执行npm命令，检测版本。

npm --version

npm执行结果：

首先安装Angular CLI。

npm install-g@angular/cli

通过一些命令创建项目。

ng new Angular4-Blog

命令执行后结果如图

进入项目

cd Angular4-Blog

看下通过Angular CLI生成的文件主要是用来干什么用的。

文件结构

运行项目

ng serve

ng serve命令会启动开发服务器，监听文件变化，并在修改这些文件时重新构建此应用。

使用--open（或-o）参数可以自动打开浏览器并访问http://localhost:4200/。

现在项目就可以启动了，以Angular4为技术开发blog的项目已经搭建完毕。下一步就是如何使用Angular4让blog展示在我们面前了。

（未完待续，敬请期待）