Angular学习笔记(一)
本文为原创文章,转载请标明出处
目录
- 架构
- 模块
- 组件
- 模板
- 元数据
- 数据绑定
- 指令
- 服务
- 依赖注入
- 模板与数据绑定
1. 架构
模块
Angular 应用是模块化的,并且 Angular 有自己的模块系统,它被称为 Angular 模块 或 NgModules。
Angular 模块都是一个带有 @NgModule
装饰器的类。
NgModule
是一个装饰器函数,它接收一个用来描述模块属性的元数据对象。其中最重要的属性是:
declarations
- 声明本模块中拥有的视图类。Angular 有三种视图类:组件、指令和管道。exports
- declarations 的子集,可用于其它模块的组件模板。imports
- 本模块声明的组件模板需要的类所在的其它模块。providers
- 服务的创建者,并加入到全局服务列表中,可用于应用任何部分。bootstrap
- 指定应用的主视图(称为根组件),它是所有其它视图的宿主。只有根模块才能设置bootstrap
属性。
组件
组件负责控制视图,通过一些由属性和方法组成的 API 与视图交互。
模板
模板以 HTML 形式存在,告诉 Angular 如何渲染组件。
元数据
元数据告诉 Angular 如何处理一个类。
@Component
装饰器能接受一个配置对象, Angular 会基于这些信息创建和展示组件及其视图。
@Component
里面的元数据会告诉 Angular 从哪里获取你为组件指定的主要的构建块。
@Component
的配置项包括:
selector
- CSS 选择器,它告诉 Angular 在父级 HTML 中查找标签,创建并插入该组件。templateUrl
- 组件 HTML 模板的模块相对地址。providers
- 组件所需服务的依赖注入提供商数组。
数据绑定
Angular 支持数据绑定,一种让模板的各部分与组件的各部分相互合作的机制。 往模板 HTML 中添加绑定标记,来告诉 Angular 如何把二者联系起来。
指令
Angular 模板是动态的。当 Angular 渲染它们时,它会根据指令提供的操作对 DOM 进行转换。
服务
服务是一个广义范畴,包括:值、函数,或应用所需的特性。
依赖注入
大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需的服务。
2. 模板与数据绑定
绑定的类型可以根据数据流的方向分成三类: 从数据源到视图、从视图到数据源以及双向的从视图到数据源再到视图。
数据方向 | 语法 | 绑定类型 |
---|---|---|
单向 从数据源到视图目标 |
{{ expression }} [target]="expression" bind-target="expression" |
表达式 Property Attribute 类 样式 |
单向 从视图目标到数据源 |
(target)="statement" on-target="statement" |
事件 |
双向 | [(target)]="expression" bindon-target="expression" |
双向 |
数据绑定的目标是 DOM 中的某些东西。 这个目标可能是(元素 | 组件 | 指令的)property、(元素 | 组件 | 指令的)事件,或(极少数情况下) attribute 名。 下面是的汇总表:
绑定类型 | 目标 | 范例 |
---|---|---|
Property | 元素的 property 组件的 property 指令的 property |
|
事件 | 元素的事件 组件的事件 指令的事件 |
Save click me
|
双向 | 事件与 property | |
Attribute | attribute | help |
CSS 类 | class property |
Special
|
样式 | style property |
内置属性型指令
- NgClass - 添加或移除一组CSS类
- NgStyle - 添加或移除一组CSS样式
- NgModel - 双向绑定到HTML表单元素
内置结构型指令
- NgIf - 根据条件把一个元素添加到DOM中或从DOM移除
- NgSwitch - 一组指令,用于切换一组视图
- NgFor - 对列表中的每个条目重复套用同一个模板
如有不当之处,请予指正,谢谢~
Angular学习笔记(一)的更多相关文章
- angular学习笔记(三十一)-$location(2)
之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...
- angular学习笔记(三十一)-$location(1)
本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
- angular学习笔记(三十)-指令(7)-compile和link(2)
继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...
- angular学习笔记(三十)-指令(7)-compile和link(1)
这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...
- angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...
- angular学习笔记(三十)-指令(5)-link
这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...
- angular学习笔记(三十)-指令(2)-restrice,replace,template
本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...
- angular学习笔记(三十)-指令(1)-概述
之前在 angular学习笔记(十九)-指令修改dom 里面已经简单的提到了angular中的指令,现在来详细的介绍 '指令' 一.指令的创建: dirAppModule.directive('dir ...
- angular 学习笔记
每天进步一点点,学习笔记 笔记来自 angular权威指南 如果想要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加 novalidate 标记. 而按钮标签则完全忽略 hr e f 属性,并不 ...
随机推荐
- 《Java从入门到放弃》JavaSE入门篇:面向对象语法二(入门版)
想了半天,发现单独的封装和多态没什么好讲的,我们就简单说说Java里面对应的语法吧. 相关内容如下: 一.访问修饰符 二.getter/setter方法 三.构造方法 四.super和this 五.s ...
- jQuery对象和DOM对象和字符串之间的转化
jQuery对象和DOM对象和字符串之间的转化 字符串---------->jQuery对象 $(HTML字符串): $('<div>我是祖国的一朵小花</div>') ...
- chrome开发工具指南(一)
注意:如果你是一个网页开发者同时想要获得最新版本的开发工具,那么你应该使用谷歌浏览器(金丝雀)Canary 版. Chrome 开发者工具 打开Chrome 开发者工具 选择浏览器位于浏览器窗口右上方 ...
- django 5 form1
---------------------Form表单验证(用户请求验证+生成HTML标签) 示例:用户管理 a. 添加用户页面 - 显示HTML标签 - 提交:数据验证 - 成功之后保存 - 错误显 ...
- docker学习之--日常命令
.查看镜像 sudo docker images sudo pull docker.io #下载镜像 sudo push docker.io #上传镜像 sudo docker save -o cen ...
- 移动端rem使用
let $html=document.documentElement,windowW = window.innerWidth,ratio = windowW / 750if (windowW > ...
- [Vue安装教程]十分钟学会vue 安装
Vue的安装主要有一下几个步骤: 1.安装npm淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 2.安装脚手架工 ...
- Spring MVC 解决无法访问静态文件和"全局异常处理"
我们都知道,Spring MVC的请求都会去找controller控制器,若果我们页面中引入了一个外部样式,这样是没效果的, 我们引入样式的时候是通过<like href="...&q ...
- NHibernate教程(8)--巧用组件
本节内容 引入 方案1:直接添加 方案2:巧用组件 实例分析 结语 引入 通过前面7篇的学习,有点乏味了~~~这篇来学习一个技巧,大家一起想想如果我要在Customer类中实现一个Fullname属性 ...
- 【Alpha阶段】第五次 Scrum Meeting
每日任务 1.本次会议为第 五次 Meeting会议: 2.本次会议在上午09:35,大课间休息时间在陆大召开,召开本次会议为20分钟,汇报自己的任务和讨论接下来的任务: 一.今日站立式会议照 二.每 ...