首页 > 其他 > 详细

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

时间:2021-05-23 09:24:12      阅读:28      评论:0      收藏:0      [点我收藏+]

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 简单的数据绑定

数据绑定的方式分类:

  • 属性绑定

  • 数据绑定

  • 事件绑定

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

原文:https://www.cnblogs.com/lovlyGir/p/14800129.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!