角入门学习之环境和项目的搭建方法

这篇文章主要介绍了角入门学习之环境和项目的搭建方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

<强>一、角介绍

角是谷歌开发的一款开源的网络前端框架,诞生于2009年,由Misko等与尊敬听取人创建,后为谷歌所收购。是一款优秀的前端JS框架,已经被用于谷歌的多款产品当中。
根据项目数统计角(1。x, 2。6. x 4. x 5. x, x, 7。8. x, x, 9。x)是现在网上使用量最大的框架。

角基于打印稿和反应,vue相比角更适合中大型企业级项目。

相关教程推荐:《角教程》

关于角版本,角官方已经统一命名角1。x统称为角JS;角2. x及以上统称角;

目前2019年12月25日角最新版本angular9.x。根据官方介绍,角每过几个月就会更新一个版本.Angular2.x以后所有的角版本用法都是一样的,此教程同样适用于Angular7。x Angular8.x Angular9。x 以及未来的其它版本…。

学习Angular必备基础
必备基础：html 、css 、js、es6、ts

二、Angular环境搭建

1、安装前准备工作：

1.1、安装nodejs
安装angular的计算机上面必须安装最新的nodejs–注意安装nodejs稳定版本

1.2、选择一个 命令工具， npm, cnpm, yarn ,任选其一

设置淘宝源镜像 ，如果你用npm

npm config set registry https://registry.npm.taobao.org

如果你用cnpm ， 安装cnpm
npm可能安装失败建议先用npm安装一下cnpm用淘宝镜像安装
https://npm.taobao.org/
npm install -g cnpm --registry=https://registry.npm.taobao.org

或者 安装yarn ,注意，只要选 一个命令工具就行

yarn
Yarn自称是比npm快十倍的包管理工具，并且还有一些很赞的特性，应该是2017年前端的一个惊喜，根据我的亲身体验，真的是快到飞起，所以强烈建议各位小伙伴也用起来吧！使用方式很简单，用你的npm 安装它

npm install yarn -g

然后切换为淘宝源你才能感受到速度：

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

好了，真的很简单，它的命令与npm几乎一样：

初始化：yarn init
安装一个包：yarn add 包名
更新一个包：yarn upgrade 包名
删除一个包：yarn remove 包名
安装所有包：yarn或者yarn install

设置成功后，会有惊喜。

三、安装Angular CLI

3.1 背景介绍：

CLI是Command Line Interface的简写，是一种命令行接口，实现自动化开发流程，比如：ionic cli、vue cli等；它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。

3.2 安装Angular CLI

1. 全局安装typescript（可选）
   $ npm install -g typescript
   //新建项目的时候会自动安装typescript(非全局)所以这里也可以不用安装。

2. 全局安装Angular CLI

yarn global add @angular/cli 或者 npm install @angular/cli -g

• 如果要卸载，执行下面命令：
  yarn global remove @angular/cli

经过不算漫长的等待，你的Angular CLI就装好了。确认一下：

• 检验安装是否成功
  ng version 或者 ng v

四、新建Angular项目

4.1. 新建角项目:

ng新的app

如果要跳过npm我安装
ng新的app——skip-install

趁着它在下载,来看一下运行ng新之后角cli已经帮我们干了什么:

那么,这时候角cli帮你干了以下这么多事情: