Loading...

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的启动和程序架构

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

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

3、Angular程序架构

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

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

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

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

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

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

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

    providers:依赖注入

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

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

  • 组件代码片

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

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

© 版权声明

相关文章