angular学习1-项目的安装和目录介绍

1. angular项目介绍

angular是google开发的开源的web前端框架

angular是基于typescript的。与vue和react相比，angular更适合中大型企业级项目。

一个angular程序架构：

• 组件： 一个angular项目的基本构件块（组件之间可以相互调用）

• 服务：用于封装可重用的业务逻辑（服务之间也可以相互调用）

• 指令：允许你向html元素添加自定义行为

• 模块：将具有处理同一功能的部分组成一个angular单元。

 

2. angular安装和项目创建

angular全局安装

npm install -g @angular/cl

 

3. 项目目录分析、创建组件和简单的数据绑定

3.1 项目目录介绍补充： 请看[first-angular]介绍

 

3.2 创建组件

组件是一个angular项目中最基本的部分。一个angular项目只要需要一个组件和一个模块

一个组件的基本组成：

 

• 装饰器：@Component():存放组件的一些原数据。这些原数据可以将组件类转成angular组件

•  

• 模板： 写页面结构

• 控制器：模板中用到的数据和大部分逻辑都是放在这里的。既在类型中声明属性和方法

 

创建组件的命令：

# 会在app文件夹下面生成以下目录结构
ng g component [子文件夹名/文件名]

组件创建成功后会在app/app.module.ts下同步生成组件的导入。在组件目录下的配置文件里可以查看组件名称，以后在别的组件引入组件就是用这个名称。

 

3.3 简单的数据绑定

数据绑定的方式分类：

• 属性绑定

• 数据绑定

• 事件绑定