本章主要内容
1.介绍Angular相关内容
2.开发环境的搭建
3.创建第一个Angular项目
4.运行Angular项目
一、介绍Angular相关内容
1.Angular的发展
2.TypeScript
TypeScript是一种由微软开发的自由和开源的编程语言。
TypeScript是JavaScript的强类型版本,它可以在编译时去掉类型和特有的语法生成纯粹的JavaScript,由于最终在浏览器运行的仍然是JavaScript,所以TypeScript并不依赖于浏览器的支持,也并不会带来兼容性问题。
2016年9月底发布的Angular2框架,这个框架本身是由TypeScript编写的。
3.Angular能做什么
(1)APP和微信上的单页面应用;
(2)借助Ionic、React Native开发跨平台的原生APP;
(3)可以开发桌面应用,创建能在桌面环境(Mac、Windows、Linux)下安装的应用。
二、开发环境搭建
Angular开发环境需要安装三种软件:
(1)Node.js
Node就是JavaScript语言在服务器端的运行环境(类似于Java的JVM),可以用来构建Web服务应用、操作文件、操作网络。
(2)AngularCLI
创建Angular项目的脚手架
(3)WebStorm
1.下载并安装Node.js
打开Node.js的官方网站:https://nodejs.org/en/。网站会根据你的操作系统弹出一些相应的Node.js版本,可以任意选择一个版本(建议选择Current)。
图1选择Node.js的版本
下载完后会得到一个.msi格式的文件(如node-v8.7.0-x64.msi),双击它就可安装了,如图2所示,然后直接根据提示安装即可。
图2 Node.js安装界面
测试软件安装后的效果:
在“命令提示符”界面中,输入命令:npm -v
可以输出所安装的Node.js的版本,如图3所示。
图3测试Node.js的安装版本
2.安装AngularCLI
在“命令提示符”界面中输入命令:npminstall -g @angular/cli
此时,系统会自动下载并安装AngularCLI
图4安装Angular CLI
测试软件:
在“命令提示符”界面中输入命令:ng -v
会显示出Angular CLI的版本如图5所示。
图5测试Angular CLI版本
如果安装不成功,也可以使用国内的镜像网站:https://npm.taobao.org/
3.下载并安装WebStorm
进入官方网站https://www.jetbrains.com/webstorm/,如图6所示。点击网站右上角的“Download”按钮。进入下载界面,然后根据你的操作系统选择相应的软件版本。下载完成后,会得到一个.exe文件(如WebStorm-2017.2.5.exe)。直接双击安装即可(如图7~图9所示)。
图6 WebStorm官方网站
图7安装目标位置选择
图8安装选项设置
图9完成安装界面
4.激活WebStorm
当第一次启动WebStorm时会提示激活WebStorm对话框,如图10所示,也可以跳过此步,可以获得30天的试用期。当然也可以打开集成开发环境界面后使用以下步骤实现激活。
(1)打开webstorm软件后,单击菜单栏中的“help”。
(2)单击之后,会有列出Help的下拉菜单,选择其中的“register”(注册)选项。
(3)同样弹出如图10所示的对话框,并有提示免费体验的剩余天数,其中有三种激活方法:即购买软件之后的账户、激活码和特许站点。
图10激活WebStorm
三、创建第一个Angular项目
在“命令提示符”界面中输入命令:ng new项目名称
会在当前路径下创建一个指定项目名称的Angular项目
例如图11所示:ngnew newsreport
就是在d:\angular_web目录下创建了一个名称为“newsreport”的项目,然后可以使用WebStorm打开相应的项目,如图12所示。
图11命令行创建Angular项目
图12 WebStorm打开项目窗口
四、Angular项目的启动
1.添加npm的脚本命令:单击Run→EditConfigurations…弹出图13所示Run/Debug Configurations对话框。
2.点击图13所示左侧“+”,在弹出的菜单中选择npm,在图13右侧相应的位置处输入npm脚本命令名,即在Name后面输入;在Script后面选择要运行的脚本(这儿选择的要运行的脚本都是在package.json中定义的),即start。
图13 Run/Debug Configurations对话框
3.启动项目:Run→Runnewsreport,最终运行的应用程序可以使用http://localhost:4200地址在浏览器中打开。
领取专属 10元无门槛券
私享最新 技术干货