使用Angular-cli搭建Angular2开发环境

一直在学Angular2,百忙之中抽点时间来写个简单的教程。

2016年是前端飞速发展的一年,前端越来越形成了(web component)组件化的编程模式;以前Jquery通吃一切的田园时代一去不复返,如果你想了解前端最近究竟有什么变化,不妨去看看这篇文章:在2016年学习javascript是一种什么样的体验?

在学习之前,你可能需要先粗略了解几个东西!

1.nodejs

2.npm 包管理

以下的东西就当你是知道了这些概念了

1.首先,到nodejs 官网下载nodejs并安装

使用Angular-cli搭建Angular2开发环境_第1张图片

2.添加淘宝的npm镜像(由于国内访问国外网站的速度实在是太慢了),由于我们只有要用到的一些东西,我们采用以下的添加镜像方法

(windows 用户使用cmd,输入以下命令,新手请去看看npm使用教程吧)

npm config set registryhttps://registry.npm.taobao.org

值得说明一下的是不要直接使用淘宝的npm官方镜像安装模式,这样我们只能使用cnpm命令,而Angular-cli创建新项目的时候是直接使用的npm,

会导致访问速度奇慢,直接使用上面的这个命令就行了

3.使用npm 安装Angular-cli

Angular-cli是angular团队针对Angular2提供的脚手架,用于环境搭建,运行等;具体参考Angular-cli GitHub

在命令行中输入

npm install -g angular-cli

2017-04-28修改 npm install -g @angular/cli

node 版本要求  ^6.9.*

npm 版本要求 ^3.*.*

之后我们就可以在全局使用ng命令了

4.使用Angular-cli搭建开发环境

首先到你的工作目录下建立Angular工程目录

然后然后用命令行进入该目录,输入

ng new projectName

然后脚手架会帮我们搭建初始环境,由于初始化的时候Angualr-cli会去初始化node-modules依赖,所以会比较慢;如果没有切换淘宝镜像,那不是一般的慢

使用Angular-cli搭建Angular2开发环境_第2张图片

最终安装好了是这样的

使用Angular-cli搭建Angular2开发环境_第3张图片

5.  运行Angular

这个时候整个Angular2已经搭建好了,命令行进入进入刚才的工程目录,输入

ng serve

Angular-cli会编译整个项目,只有打开localhost:4200 (可以切换其他端口,具体参考Angular-cli的使用)就可以看到效果了

使用Angular-cli搭建Angular2开发环境_第4张图片

关于工程目录结构是下面这个样子的

使用Angular-cli搭建Angular2开发环境_第5张图片

结束语:Angular2可以使用javascript,typescript,dart来编写;个人推荐使用typescript来编写。TypeScript最近也发布了2.1版本,我们可以使用可爱的Async/await来编写我们的项目了。Angular2有专门的中文官方网站Angular.cn,上面有对所有的概念的详细的解释,并且有一个完整小项目的教程,很有帮助;还有,我推荐大家使用我写的模式来搭建自己的Angular项目,一方面Angualr-cli是官方出的脚手架(虽然还是beta版),另一方面,你如果自己独立去使用Webpack或者SystemJs又增加了学习难度,项目出错你都不知道是代码错了还是打包的问题!

代码编辑器推荐两个:vs code和sublime;

有些人学习前端不知道该学哪个框架,就我而言,目前值得学习和广为大众接受的是Vue.js,angular,reactjs;我受不了React语法,pass;vue有着简单的结构,容易上手且速度很快,但是Angular更像是一个工业级别的产品,工程化程度更高,而且有着web app 开发神器IONIC,是一个非常不错的选择!

以后的文章会开始介绍Angular2的语法等

更新ing。。。

你可能感兴趣的:(使用Angular-cli搭建Angular2开发环境)