Angular学习笔记(一)之Angular的启动和程序架构

一、启动

1、项目前准备

  • 确定安装了Node.js
  • 使用npm命令安装TypeScript.js $ npm install -g typescript
  • 安装angular-cli自动构建项目工具 $ npm install -g @angular/cli
  • 新建项目angular-world $ ng new angular-world

2、目录说明

  • 项目目录说明
    Angular学习笔记(一)之Angular的启动和程序架构_第1张图片

  • src文件夹目录说明
    Angular学习笔记(一)之Angular的启动和程序架构_第2张图片

  • app文件夹下目录说明
    Angular学习笔记(一)之Angular的启动和程序架构_第3张图片

3、Angular程序架构

  • Angular程序架构图
    Angular学习笔记(一)之Angular的启动和程序架构_第4张图片

  • Angular模块代码片
    Angular学习笔记(一)之Angular的启动和程序架构_第5张图片

  • Angular组件组成元素
    组件是Angular应用的地基

    Angular学习笔记(一)之Angular的启动和程序架构_第6张图片

    装饰器component定义了一个组件,其中的属性称为元数据,装饰AppComponent类成一个组件

    • selector:用于html标签调用
    • templateUrl : 组件内容
    • styleUrls : 样式

    @inputs():父组件传递数据给子组件

    providers:依赖注入

    生命周期钩子:组件从创建到销毁有多个钩子用来触发和执行业务逻辑

    @outputs():其他组件可能会感兴趣的事件,成组件间共享数据

  • 组件代码片

    Angular学习笔记(一)之Angular的启动和程序架构_第7张图片

你可能感兴趣的:(Angular学习系列)