步骤一:安装开发环境
在开始学习angular之前,我们要先设置好开发环境。
一般现在的的开发环境基本上都是nodejs,
因为基本上都有使用了nodejs的npm管理和安装依赖包。
如果你的电脑上已经安装过nodejs,那你可以现在命里行中输入node -v 和 npm -v查看他们的版本。
angular 要求node 6.9.x 和 npm 3.x.x 以上的版本。
如果你电脑上的版本低于要求,那么可以到官网重新下载nodejs,覆盖安装就好了。
安装的方法有很多种,参照nodejs官网:https://nodejs.org/download
步骤二:安装TypeScript
安装完nodejs接着就可以安装TypeScript了。
运行命令:$ npm install -g typescript
TypeScript 作为JavaScript的超集,
TS无论可读性、可维护性、上手的容易程度、写代码的速度,都非常明显地优于JS。
可能未开始之前,你会觉得,刚学了一个JavaScript,现在又要学一个TypeScript。
但其实只要你动手敲几行代码,你就会发现,其实TypeScript比JavaScript要容易的多。
步骤三:安装Angular CLI
Angular CLI是一个命令行界面工具,它可以创建项目、添加文件以及执行一大堆开发任务,比如测试、打包和发布。
Angular CLI是一个功能很强大的开发工具,你甚至可以用它来创建组建,使得整个项目的代码风格保持一致。
安装Angular CLI只要运行命令:$ npm install -g @angular/cli
步骤四:安装VS Code
这里我们选择的开发工具是VS Code。
可能你已经有了自己用的很习惯的开发工具,
比如我自己之前一直使用的是webstorm。
但是现在还是下载了VS Code。
因为VS Code可以直接Debug Angular应用(下一节课中讲解)了。
还可以增加插件,用来检测代码规范。
直接官网下载安装即可。https://code.visualstudio.com/
安装完成,如下图。
步骤五:安装Angular TypeScript Snippets for VS Code
这个插件用于在VS Code中添加了angular的代码片段。
效果如下:
在你要新建任何东西之前,你可以先查阅一下,已有片段。
常见的有
更多详情可查看:https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2
安装过程:
点击侧边栏的扩展按钮。
搜索并安装angular v4 typescript snippets
步骤六:新建示例项目
打开命令行窗口,运行下列命令(注意当前文件目录,在哪运行就在那新建项目)
(为了防止项目找不着了,我们先cd到d盘。如果你能搞清楚当前目录,可忽略这一步。)
$ ng new oniplan-ng
ng new 是angular的新建项目的cli,后面跟着的是项目的名字,你可以取一个你自己喜欢的名字。
执行命令还是挺快的,但是到 Installing packages for tooling via npm.
这行之后,会比较慢,因为要安装很多npm的依赖。
总的来说安装时间比较久,耐心等候就好。
步骤七:启动开发服务
进入项目目录,并启动开发服务。
cd oniplan-ng
ng serve –open
ng serve命令会启动开发服务器,监听文件变化,并在修改这些文件时重新构建此应用。
使用–open(或-o)参数可以自动打开浏览器并访问http://localhost:4200/。
详细的cli说明可以查阅https://cli.angular.io/
(有用到的基本上后面的教程中都会讲解)
如果你看到这个界面,那说明,你的环境搭建和新建项目已经完成了。
这节课的内容就到这里结束了。
感谢您的阅读。
我是莽夫,希望你开心。