【Angular学习笔记系列】Angular CLI的安装和使用

Angular CLI的介绍


Angular CLI是Angular的构建工具

Angular CLI的安装


正常步骤:

  • 命令行输入npm install -g @angular/cli

国内步骤:

  • 命令行输入 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装淘宝npm镜像

  • npm的国内镜像cnpm安装好之后,命令行输入 cnpm install -g @angular/cli 完成angular cli的安装

Remark

  • 完成以上安装步骤之后,可以确认一下版本npm -vcnpm -vng -v. 另外Angular CLI的命令都是ng开头,查询angular cli的版本是输入命令行ng -v

  • 命令行大全可以通过输入ng help 查看,里面有ng命令行的解释和介绍

Hello Angular CLI


正常步骤

  • 命令行输入 ng new <project_name>e.g. ng new myapp 创建一个叫myapp的angular项目.

  • 命令行输入 cd myapp,进入myapp的路径.

  • 命令行输入ng serve 启动ng服务器.

    以上官方推荐步骤,但是由于国内网络的问题,可能导致下载速度过慢,所以国内开发者建议使用以下步骤节省开发时间。

国内步骤

  • 命令行输入ng new <project_name> --skip-installe.g.ng new myapp --skip-install 这样可以使得创建项目的时候跳过npm下载相关的依赖库

  • 命令行输入cd myapp 进入相应的项目目录下(myapp 要改成自己的项目名字)

  • 命令行输入cnpm install ,用淘宝的镜像cnpm安装相关的依赖库

  • 命令行输入ng serve 启动服务

Remark

  • ng serve启动服务器之后,端口为4200,在浏览器地址上输入localhost:4200便可以访问到我们刚刚创建的angular 项目渲染出来的东西了。
    访问成功

目录介绍


  • package.json
    里面写着Angular项目所引用到的一些类库

  • angular-cli.json
    配置了编译过程中使用的一些路径以及一些图标,样式和他们的一些依赖关系

  • e2e
    e2e是一个测试目录

  • node_modules
    是npm相关依赖库的存放位置

  • src
    项目目录路径

目录结果


学习网站


以上内容都是学习慕课网的angular cli的教学视频而来,在此向教程创作人表示感谢!
慕课网-Angular-cli基础

当然官方文档也是一个好出去,强烈推荐
Angular中文社区-快速上手Angular

猜你喜欢

转载自blog.csdn.net/snailmann/article/details/79617886