zoukankan      html  css  js  c++  java
  • Angular-cli新建项目目录结构详解

    Angular-cli新建项目目录结构详解

    在上一篇博客中我们已经通过Angular CLI命令行工具创建出来一个全新的Angular项目,要想写项目,首先我们要先搞清楚项目的目录结构是怎样的,每个文件又有什么意义,文件中的代码又起到什么作用。

    首先看一下整体的目录结构: 
    这里写图片描述

    可以看到,命令行工具自动生成了很多文件和目录,我们来说说这些目录是干什么的

    首层目录

    node_modules        第三方依赖包存放目录
    e2e                 端到端的测试目录  用来做自动测试的
    src                 应用源代码目录  
    .angular-cli.json   Angular命令行工具的配置文件。后期可能会去修改它,引一些其他的第三方的包  比如jquery等
    karma.conf.js       karma是单元测试的执行器,karma.conf.js是karma的配置文件
    package.json        这是一个标准的npm工具的配置文件,这个文件里面列出了该应用程序所使用的第三方依赖包。实际上我们在新建项目的时候,等了半天就是在下载第三方依赖包。下载完成后会放在node_modules这个目录中,后期我们可能会修改这个文件。
    protractor.conf.js  也是一个做自动化测试的配置文件
    README.md           说明文件
    tslint.json         是tslint的配置文件,用来定义TypeScript代码质量检查的规则,不用管它
    
    src目录:
    app目录               包含应用的组件和模块,我们要写的代码都在这个目录
    assets目录            资源目录,存储静态资源的  比如图片
    environments目录      环境配置。Angular是支持多环境开发的,我们可以在不同的环境下(开发环境,测试环境,生产环境)共用一套代码,主要用来配置环境的
    index.html          整个应用的根html,程序启动就是访问这个页面
    main.ts             整个项目的入口点,Angular通过这个文件来启动项目
    polyfills.ts        主要是用来导入一些必要库,为了让Angular能正常运行在老版本下
    styles.css          主要是放一些全局的样式
    tsconfig.app.json   TypeScript编译器的配置,添加第三方依赖的时候会修改这个文件
    tsconfig.spec.json  不用管
    test.ts             也是自动化测试用的
    typings.d.ts        不用管
    app目录(重点) 

    app目录是我们要编写的代码目录。我们写的代码都是放在这个目录。 
    一个Angular程序至少需要一个模块和一个组件。在我们新建项目的时候命令行已经默认生成出来了。 
    这里写图片描述

    参考链接:http://blog.csdn.net/yuzhiqiang_1993/article/details/71191873

  • 相关阅读:
    footer点击添加active class
    css背景图与html插入img的区别
    js实现游戏转盘抽奖
    gulp压缩css和js
    前后端分离中,gulp实现头尾等公共页面的复用 前言
    js 输入框只能输入 1-7 的数字
    java 环境变量配置
    两日期相减得到天数
    jQuery如何追加tr到table中 添加到头或者尾
    json 添加 和删除两种方法
  • 原文地址:https://www.cnblogs.com/s313139232/p/7920800.html
Copyright © 2011-2022 走看看