简单说明:angular是模块化的,因此所有功能功能都属于组件
一.目录结构
e2e 端到端的测试目录 用来做自动测试的
node_modules 安装地依赖存放目录,package.json里安装地包将会存放在这里。
src 应用程序地代存放位置,我们的代码主要存放的位置
--app.component.html 根组件
--app.component.scss(可能是css less具体看你在安装创建项目的时候,选的是哪种样式)。
--app.component.ts
--app.component.spec.ts
--以上四个文件属于 根组件
--app.module.ts 根模块,用于配置模块,组装angular应用
assets静态资源文件
environments 环境配置文件
browserslist 浏览器兼容列表
favicon.ico 浏览器标签的显示图标
index.html 主页文件,浏览器访问的就是这个文件
karma.conf.js 端对端测试文件
main.ts 整个项目的入口,相当于main函数吧
polyfills.ts 主要用来导入一些必要的库,首先预加载的文件
styles.scss 公共样式库
test.ts 测试的入口文件
tsconfig.app.json typescript配置文件
tsconfig.app.spec.json typescript的配置文件
tslint.json ts的配置文件,似乎是启动任务监视js生成的
以上是angular的基本目录配置,一般在src/app里面应该建立一个components的文件夹,用于存放组件目录
二、初始化项目
1.环境准备
1.安装nodejs
2.安装vscode
3.安装angular cli
1.查看版本 ng v
2.控制台输入 npm install -g @angular/cli
2.新建项目
ng new 项目名称
会默认安装依赖。也可以停止,进入angular项目目录,运行 npm install 自行安装
进入到新建的目录,然后运行项目测试
gn serve --open
当浏览器打开http://localhost:4200/ 显示有这个图标则表示正常