angular5之hello world

Posted 2021-04-26 晓舟报告

前言

本期开始给大家更新angular5的学习资料，希望大家喜欢，有什么问题或是建议可以留言，感谢您的支持。

为谁而写

您一看标题就能看出来，这里讲的是angular的基础，所以如果您已经掌握了angular\react\vue其中任意一门框架，可能这篇文章的内容过于简单，不适合您。

学习angular之前还是需要掌握一些前端技能的，如果您已经掌握了html、css和javascript，并且对ES2015+的新特性有所了解，而且了解npm，那就可以开始着手学习angular了。

一定有朋友会说要不要学习typescript，当然掌握了最好，如果没有系统的学习typescript，有ES2015的基础也是可以的。

本文的目的

很多朋友在入手框架的时候会遇到阻碍，可能是已经习惯了jQuery，看到各种新的概念一时不知所措、无从下手，这篇文章就是让这些无从下手的朋友找到入手点，让您轻松入手angular，为后续的学习打下良好的基础。

版本问题

angular1版本，现在普遍称作angularJS,和angular是两个框架，angular2~5是angular框架一直升级的版本，所以大家不管看到angular2还是angular345，都当成是angular框架就可以了。当前最新的版本是angular5.0,本文用的就是这个版本。

今天学习目标

今天的任务很简单，就是用angular开启一个有hello world标题的应用，进而走出我们学习angular的第一步。

1

下载npm淘宝镜像

npm从国外下载第三方依赖包的速度还是很慢的，这里推荐使用npm的淘宝镜像，执行下面的命令下载npm淘宝镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后我们就可以用cnpm命令下载第三方模块了。

2

下载angular/cli

然后我们要下载一个angular/cli的工具，我们在后续创建项目、创建组件、开启服务器等等功能都要用到这个工具（它封装了webpack，所以我们学习angular的好处就是：不必再去组合那些angular之外各种模块和工具了）。下载命令如下所示

cnpm install -g @angular/cli 

下载之后，我们在命令行工具中就有了ng命令。

3

新建项目

接下来我们用ng命令来创建一个项目，命令如下所示：

ng new myapp  

myapp是我自己定义的项目名称，您也可以修改成你自己喜欢的名字。

通过上面的命令，创建项目之后，项目会自动使用npm下载依赖模块，这个可是非常耗时的，所以推荐大家使用下面的命令创建项目

ng new myapp -si

加了这个-si参数之后，只会创建项目文件，不会下载依赖模块，然后我们就可以使用cnpm来下载依赖模块了。

cd myapp  //进入项目
cnpm install  //下载所有依赖包

4

目录结构

成功生成项目之后大家可以看到整个项目的目录结构

先不要纠结这些文件都是干嘛的，这是后续要掌握的内容，我们现在先将我们要展示的页面完成，打开src=>app=>app.component.html文件，删除里面的所有内容，然后修改成

<h1>hello world</h1>

完成页面后，就可以启动服务器了。

5

启动服务器

执行下面的命令：

ng serve

angular会在本地的4200端口开启服务器，然后我们访问http://localhost:4200/就可以看到我们的第一个angular应用了。

6

尾声

感谢您的关注，今天的内容就到这里，要写的还有很多，我会在后续陆续更新，希望大家多多支持。