angular4.0学习笔记(01)-环境搭建(2017-06)

    这是结合官方文档进行的angular4.0版本的学习笔记,与最新官方文档使用一致。这是官方最新的更新,没有了angular1.x向angular2.0那么重大的变化。

先附上官方的中文文档,大家也可以根据此文档学习。例外社区里也有很多好的文章,大家可以看看。https://angular.cn/docs/ts/latest/

第一步 简单介绍

angular2.x开始已经与angularjs1有一个巨大的区别,angular2.x是不兼容angular1.x的,他是基于es6开发的,因此我们需要很多第三方的依赖,另附es6的介绍 https://segmentfault.com/a/1190000002904199

在开始学习之前,说说我学习了一个星期的感觉,学习angular4.0我们不再使用js代码写,而是使用ts这种新的语言写,但是我们不用刻意去学习,我们只需要在学习angular的过程中去学习ts的语法就可以了,当然如果想要更系统的学习typescript就另当别论了。

第二步 环境搭配

先介绍另一个文档,即菜鸟教程的angular2的教程文档,这一篇有详细介绍了从环境搭建到基本使用的过程,大家也可以结合这个进行学习http://www.runoob.com/angularjs2/angularjs2-tutorial.html

首先安装node.js,https://nodejs.org/en/download/,选择最新的版本下载即可。安装之后执行npm -v,查看是否安装成功,之后因为国内网络的问题使用淘宝提供的cnpm进行安装各种模块npm install -g cnpm --registry=http://registry.npm.taobao.org,这样之后就使用cnpm来代替npm。https://npm.taobao.org/具体也可看看这个文档。

接着安装Angular-Cli,俗称脚手架,使用这个可以快速搭建项目,比较方便。

使用cnpm install -g angular-cli命令进行安装。使用cnpm install -g typescript安装typescript环境依赖,可以执行ng -v看下版本。对于开发工具可以使用webstorm或者Idea,本人使用的是webstorm

第三步 创建本地开发环境生成和运行angular2项目

扫描二维码关注公众号,回复: 2229388 查看本文章

打开控制台,进入到创建项目的文件夹,执行以下命令。

ng new name(项目名称)(这时执行到一半可能不会动,按ctrl+c终止掉,然后执行cd name ,接着cnpm install进行安装模块)等待一段时间就可以

cd name

项目建立成功,这时你会文件发现好大,呵呵,我也母鸡

执行ng serve,浏览器输入http://localhost:4200,就可以看到程序了。

   另外 执行ng serve --prod --aot就可以生成压缩版的,如果需要生产环境的文件(即生成编译后的文件,我们熟悉的js与html,那么执行ng build)生成在根目录的dist文件夹中。至此,项目的搭建结束,下一步进行正式编程。

猜你喜欢

转载自blog.csdn.net/qq_32524473/article/details/73135925
今日推荐