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、目录说明

• 项目目录说明
  

• src文件夹目录说明
  

• app文件夹下目录说明
  

3、Angular程序架构

• Angular程序架构图
  

• Angular模块代码片
  

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

  

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

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

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

  providers:依赖注入

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

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

• 组件代码片