第一章 Angular概述

本章主要内容

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地址在浏览器中打开。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180704G0WNJ100?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券