Angular CLI快速搭建工程

如何使用Angular CLI快速搭建项目?

1.先决条件(Prerequisites)

Node.js

Angular需要Node.js的8.x或者10.x的版本(node -v查看版本)

npm包管理器

Angular、Angular CLI 和 Angular 应用都依赖于某些库所提供的特性和功能,它们就是 npm 包,在安装 Node.js 时就已经默认安装了npm包。

2.安装Angular CLI

使用npm install -g @angular/cli全局安装Angular CLI

3.创建工作区和初始化应用

运行CLI命令ng new,并提供一个名字my-app如下:ng new my-app

ng new 会提示你要把哪些特性包含在初始的应用项目中。请按回车键接受默认值。文件生成的目录如下:

Angular CLI快速搭建工程

my-app是ng new时候的名称,也是项目的目录

node_modules是项目所依赖的包

e2e一个端到端测试项目(e2e目录下面)

其余生成的是相关的配置文件

src目录下面是组件类,模板之类的,业务相关。

4.启动工程

ng serve --open

Angular CLI快速搭建工程

5.编写第一个Angular组件

初始应用的一部分,Angular CLI为我们创建第一个Angular组件。他就是根组件,叫app-root.

Angular CLI快速搭建工程

模块中导入类组件,并对外暴露模块。

Angular CLI快速搭建工程

这些都写好之后我们要在首次打开的页面(index.html)中使用该组件

Angular CLI快速搭建工程

在面main.ts中导入模块

Angular CLI快速搭建工程

或者是直接在index.html中可以找到根组件。