Angular2新手教程系列：Hello World

当今天下，分久必合，合久必分......作为一名前端，你应该懂我的意思。

如果不懂，也没关系，我不会啰嗦Vue和React，咱们只专注于今天的主角——Angular。这是一篇写给萌新的文章，无关人员请跳到感兴趣章节进行阅读。

有人问为啥Angular后面戴个2，关于AngularJS1.x的陈年旧账我们就不翻了。

 

好，直奔主题。

 

第一步：安装NodeJS

 

打开浏览器，输入网址https://nodejs.org/en/download/下载安装即可。来个图：

 

 

选择Windows Installer。运行下载文件，一路无脑next下一步就完了，碰上要打勾的无脑√就好。

 

为了检测你做好了以上步骤，在windows开始键旁边的输入框里输入cmd，或者右击开始键，选择运行，然后在弹出的黑框里输入node -v,出现版本号，说明万事大吉。

 

根据经验，这一步很少会有小伙伴出现问题。如果你不幸中招，记得联系我。

 

第二步：安装Angular CLI

 

其实在第一步里，我们除了安装了nodeJS之外，还装了npm。新手可能会蒙：这是啥，这又是啥......

 

我想说的是，以上两个都是工具，跟你的电脑上windows系统是一毛一样的。你电脑访问个网页，只要知道浏览器怎么用就好，不用把厚厚的一本《操作系统》啃完。

 

所以，放下暂时的疑惑，我们才能走的更远。（这种方式的偷懒也是没谁了）

 

还是之前的黑框（控制台），输入npm install -g @angular/cli（暖心提示：注意中间的空格，建议复制粘贴）

 

中间会让你输入（y/N），选y。

 

结果会是这样：

 

 

然后可以像之前一样，输入ng -v验证版本。

 

第三步：构建项目

 

这一步之前出了问题记得通过后台或留言联系我，没啥别的意思，我就想看看得笨成什么样才能出问题......

 

我假设你到这里都是岁月静好。

 

执行下面的一句之前，建议你先往下多阅读几行，注意标橘黄的地方:

 

ng new hello-world

 

会让你选择：第一个填y，第二个选Less。

 

然后静静等待。这会是一个漫长的过程。你可以使用一些捷径，比如在百度中输入关键字：npm淘宝镜像，你会发现事情变得简单很多。

 

相信机智如你，在安装完淘宝镜像之后，已经成功构建了项目。

这里还是会卡住一批小伙伴的，比如装到一半各种红色的error接踵而至，其实不用怕，你要知道，你遇到的坑，都是很多前辈趟过的，只要把错误信息原封不动的放到百度搜索框里，就能知道该怎么做。有些朋友问为什么是百度？

 

你要是能用谷歌搜索，当我前面的话没说......

 

第四步：Hello World 嗨起来

 

经过上一步的洗礼，相信你已经是一个与暴风雨搏斗并且胜利返航的勇士了，准备品尝属于你的胜利果实吧！

 

在控制台愉快的输入下面一行：

 

ng serve

 

然后你会踩到几乎所有新手都会中招的雷：

 

 

不用慌，这很正常。这句话的意思是，你必须在angular工程文件夹里才能使用ng serve命令。于是，我们输入这句：

 

cd hello-world

 

细心的小伙伴已经发现，hello-world正是我们项目的名字。

 

此时再运行ng serve，稍等片刻，你就会品尝到胜利的果实：

 

 

成功了！！！完结撒花~~~

 

萌新可能会问发生了什么。好，我们来看看最终结果。

 

请你在浏览器的地址栏输入：

 

localhost:4200

 

在敲下回车的瞬间，请注意此时此刻挂在你嘴角的微笑。因为你会看到：

 

 

OK，Hello World！欢迎来到Angular的世界！

 

下一篇中，我们将一起探索——组件。

 

欢迎关注我的公众号，获取更多精彩内容