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