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

时间:2021-04-12 13:00:43

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

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