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():其他组件可能会感兴趣的事件，成组件间共享数据

• 组件代码片

  

本文来源 互联网收集，文章内容系作者个人观点，不代表 本站 对观点赞同或支持。如需转载，请注明文章来源,如您发现有涉嫌抄袭侵权的内容，请联系本站核实处理。