Angular2.0快速上手(开发准备一)

开发angular是一件愉快的事情,虽然总会有人诟病,但那又如何。你玩的开心就行了,就像小婴儿抓到一张也能玩的很嗨。又何必去计较太多。

一、安装Node.js,编码半辈子

1、不要问我Node.js是什么,其次我也不想讲。毕竟这集它不是主角,Angular才是带着主角光环出场的家伙。首先下载Node.js的安装资源https://nodejs.org/en/,输入链接会打开如下页面:

Angular2.0快速上手(开发准备一)_第1张图片
根据自己的电脑选择下载

个人用的是win10的64位系统,所以就直接使用Windows(64)的资源。

2、下载资源,客官可以使用V6版本的,也可以使用V7版本,你开心就好!

Angular2.0快速上手(开发准备一)_第2张图片
演示使用V7版本

3、双击资源准备安装Node.js;

Angular2.0快速上手(开发准备一)_第3张图片
点击Next

4、选择同意安装,并点击下一步;


Angular2.0快速上手(开发准备一)_第4张图片

5、选择安装路径,默认安装C盘,这里演示调整为E盘;


Angular2.0快速上手(开发准备一)_第5张图片
可根据实际情况调整

6、选择安装组件,默认即可,直接点击下一步;

Angular2.0快速上手(开发准备一)_第6张图片

7、点击安装;

Angular2.0快速上手(开发准备一)_第7张图片

8、默默等待;

Angular2.0快速上手(开发准备一)_第8张图片

9、安装完毕,可以浪了。


Angular2.0快速上手(开发准备一)_第9张图片
完成安装

二、检查佩剑,出门闯江湖

1、检查Node.js是否安装成功,打开命令行工具输入node -v,出现版本信息则说明安装成功;

Angular2.0快速上手(开发准备一)_第10张图片

2、通过npm install -g typescript安装ts;

Angular2.0快速上手(开发准备一)_第11张图片
安装ts

3、安装angular/cli工具;

注意:由于angular-cli已经改名成了angular/cli,所以安装的时候请使用以下命令:npm install -g @angular/cli。如果安装有问题可以使用cnpm,在命令行中执行如下的命令:
npm install -g cnpm --registry=https://registry.npm.taobao.org,尔后继续安装cli脚手架工具,cnpm install -g @angular/cli

4、检查angular/cli安装情况;

输入ng --version,出现如下信息说明安装正确。

Angular2.0快速上手(开发准备一)_第12张图片

三、折腾半天,才迈出一步

年轻人总想搞点大新闻,但是各种环境的搭建又总会去花去大部分的时间。真坑!下面我们将一起创建angular2的项目,并运行项目。

1、创建hello-world项目

在命令行工具中输入ng new hello-world,然后喝杯咖啡慢慢等待;

Angular2.0快速上手(开发准备一)_第13张图片
创建第一个项目

2、运行项目,大功告成

在命令行输入ng serve指令,启动项目;

Angular2.0快速上手(开发准备一)_第14张图片

3、查看效果

打开浏览器,输入http://localhost:4200/,至此我们已经完成了入门篇。

Angular2.0快速上手(开发准备一)_第15张图片

** PS:**
Node.js是什么?
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。
Node.js 的包管理器 npm,是全球最大的开源库生态系统。

你可能感兴趣的:(Angular2.0快速上手(开发准备一))