初探angluar_01 目录结构分析及初始化项目

简单说明: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/ 显示有这个图标则表示正常