Angular学习一--项目创建

Chan已失踪
185 阅读2分钟

  1. 快速开发项目

    1. 安装全局指令:npm install -g @angular/cli
    2. 创建项目: ng new my-app
    3. 完成之后进入项目: cd my-app
    4. 启动项目: ng serve --o

  2. 熟悉项目内部结构

    1. .editorconfig 代码编辑器的配置。参见 EditorConfig 。
    2. .gitignore 指定 Git 应忽略的不必追踪的文件。
    3. angular.json 为工作区中的所有项目指定 CLI 的默认配置，包括 CLI 要用到的构建、启动开发服务器和测试工具的配置项，比如 TSLint，Karma 和 Protractor。欲知详情，请参阅 Angular 工作空间配置 部分。
    4. package.json 配置工作空间中所有项目可用的 npm包依赖 。
    5. package-lock.json 提供 npm 客户端安装到 node_modules 的所有软件包的版本信息。
    6. tslint.json 工作空间中各个项目的默认 TSLint 配置。
    7. tsconfig.json 工作空间中各个项目的默认 TypeScript 配置
    8. browserslist 配置各种前端工具之间共享的目标浏览器和 Node.js 版本。
    9. tsconfig.app.json 应用专属的 TypeScript 配置，包括 TypeScript 和 Angular 模板编译器的选项。 10.tsconfig.spec.json 应用测试的 TypeScript 配置。

  3. SRC目录下结构:

    1. 'app/' 包含定义应用逻辑和数据的组件文件。
    2. 'assets/' 包含要在构建应用时应该按原样复制的图像和其它静态资源文件。
    3. 'environments/' 包含特定目标环境的 构建配置选项。默认情况下，有一个无名的标准开发环境和一个生产（“prod”）环境。你还可以定义其它的目标环境配置。
    4. 'main.ts' 应用的主要切入点。用 JIT 编译器编译应用，然后引导应用的根模块（AppModule）在浏览器中运行。你也可以在不改变任何代码的情况下改用 AOT 编译器， 只要在 CLI 的 build 和 serve 命令中加上 --aot 标志就可以了。
    5. 'polyfills.ts' 为浏览器支持提供了腻子（polyfill）脚本。
    6. 'test.ts'单元测试的主入口点，带有一些Angular特有的配置。你通常不需要编辑这个文件。

  4. SRC/APP 目录下结构

    1. app.component.html 定义与根组件 AppComponent 关联的 HTML 模板
    2. app.component.scss 为根组件 AppComponent 定义了基本的 CSS 样式表。
    3. app.component.spec.ts 为根组件 AppComponent 定义了一个单元测试。
    4. app.component.ts 为应用的根组件定义逻辑，名为 AppComponent 。当你向应用中添加组件和服务时，与这个根组件相关联的视图就会成为视图树的根。
    5. app.module.ts 定义了名为 AppModule 的根模块，它会告诉 Angular 如何组装应用。这里最初只声明一个 AppComponent。当你向应用中添加更多组件时，它们也必须在这里声明
avatar
文章
阅读
粉丝