zoukankan      html  css  js  c++  java
  • 初探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/ 显示有这个图标则表示正常

      

  • 相关阅读:
    mysql导入导出sql文件
    linux 监控文件变化
    LeetCode:595.大的国家
    LeetCode:176.第二高的薪水
    LeetCode:182.查找重复的电子邮箱
    Excel学习笔记:行列转换
    通过数据分析题目实操窗口函数
    Oracle学习笔记:窗口函数
    Python学习笔记:利用爬虫自动保存图片
    电商数据分析基础指标体系(8类)
  • 原文地址:https://www.cnblogs.com/yeqifeng2288/p/10659654.html
Copyright © 2011-2022 走看看