Angular 4.0 架构详解
Angular 4.0 架构
这个架构图展现了 Angular 应用中的 8 个主要构造块:
模块 (module)
组件 (component)
模板 (template)
元数据 (metadata)
数据绑定 (data binding)
指令 (directive)
服务 (service)
依赖注入 (dependency injection)
1.模块 (module)
Angular 或者 ionic 新建的项目,都会存在一个根模块,默认名是 AppModule。如果你使用了模块化来创建应用,包括 AppModule,每个都会存在一个 @NgModule 装饰器的类(虽然他很像 java 中的注解,但是他的官方命名叫装饰器)。我们新建的页面,如果不使用懒加载,都要在 @NgModule 中先声明后使用
。
下面举个例子,简单介绍一下 @NgModule 中的内容:
//app.module.ts import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
imports 本模块声明的组件模板需要的类所在的其它模块。
providers 服务的创建者,并加入到全局服务列表中,可用于应用任何部分。
declarations 声明本模块中拥有的视图类。Angular 有三种视图类:组件、指令和管道。
exports declarations 的子集,可用于其它模块的组件模板。
bootstrap 指定应用的主视图(称为根组件),它是所有其它视图的宿主。只有根模块才能设置 bootstrap 属性。
2.组件 (component)、模板 (template)、元数据 (metadata)
Component
组件是一个装饰器,他能接受一个配置对象, Angular 会基于这些信息创建和展示组件及其视图。
selector:CSS 选择器,它告诉 Angular 在父级 HTML 中查找 <hero-list> 标签,创建并插入该组件。
templateUrl:组件 HTML 模板的模块相对地址,如果使用 template 来写的话是用“`”这个符号来直接编写 HTML 代码。
providers:组件所需服务的依赖注入。
template
模板就是那段 HTML 代码,可以用 templateUrl 引入外面的,也可以用 template`` 直接写。
metadata
元数据装饰器用类似的方式来指导 Angular 的行为。 例如 @Input、@Output、@Injectable 等是一些最常用的装饰器
3.数据绑定 (data binding)
//插值表达式 显示组件的hero.name属性的值
<li>{{hero.name}}</li> //属性绑定 把父组件selectedHero的值传到子组件的hero属性中
<hero-detail [hero]="selectedHero"></hero-detail> //事件绑定 用户点击英雄的名字时调用组件的selectHero方法
<li (click)="selectHero(hero)"></li> //双向绑定 数据属性值通过属性绑定从组件流到输入框。用户的修改通过事件绑定流回组件,把属性值设置为最新的值
<input [(ngModel)]="hero.name">
双花括号是单向绑定,传递的是值。方向是
组件 -> 模板
。方括号是单向绑定,传递的是属性。方向是
父组件 -> 子组件
。圆括号是事件绑定,处理
点击等活动(action)
。方括号套圆括号是双向绑定,方向是
组件 <-> 模板
。
4.指令 (directive)
结构型指令是 ngFor、ngIf 这种的,通过在 DOM 中添加、移除和替换元素来修改布局。
属性型指令是 ngModel 这种的,用来修改一个现有元素的外观或行为。
Angular 还有少量指令,它们或者修改结构布局(例如 ngSwitch ), 或者修改 DOM 元素和组件的各个方面(例如 ngStyle 和 ngClass)
Angular 4.0 架构详解的更多相关文章
- NopCommerce源码架构详解--初识高性能的开源商城系统cms
很多人都说通过阅读.学习大神们高质量的代码是提高自己技术能力最快的方式之一.我觉得通过阅读NopCommerce的源码,可以从中学习很多企业系统.软件开发的规范和一些新的技术.技巧,可以快速地提高我们 ...
- hdfs文件系统架构详解
hdfs文件系统架构详解 官方hdfs分布式介绍 NameNode *Namenode负责文件系统的namespace以及客户端文件访问 *NameNode负责文件元数据操作,DataNode负责文件 ...
- NopCommerce源码架构详解
NopCommerce源码架构详解--初识高性能的开源商城系统cms 很多人都说通过阅读.学习大神们高质量的代码是提高自己技术能力最快的方式之一.我觉得通过阅读NopCommerce的源码,可以从 ...
- RESTful 架构详解
RESTful 架构详解 分类 编程技术 1. 什么是REST REST全称是Representational State Transfer,中文意思是表述(编者注:通常译为表征)性状态转移. 它首次 ...
- Zookeeper系列二:分布式架构详解、分布式技术详解、分布式事务
一.分布式架构详解 1.分布式发展历程 1.1 单点集中式 特点:App.DB.FileServer都部署在一台机器上.并且访问请求量较少 1.2 应用服务和数据服务拆分 特点:App.DB.Fi ...
- 【菜鸟】RESTful 架构详解
RESTful 架构详解 分类 编程技术 1. 什么是REST REST全称是Representational State Transfer,中文意思是表述(编者注:通常译为表征)性状态转移. 它首次 ...
- Hyperledger Fabric架构详解
区块链开源实现HYPERLEDGER FABRIC架构详解 区块链开源实现HYPERLEDGER FABRIC架构详解 2018年5月26日 陶辉 Comments 10 Comments hyper ...
- Vue1.0用法详解
Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性. 开发环境部署 可参考使用 vue+webpack. 基本用法 1 2 3 ...
- Android消息传递之EventBus 3.0使用详解
前言: 前面两篇不仅学习了子线程与UI主线程之间的通信方式,也学习了如何实现组件之间通信,基于前面的知识我们今天来分析一下EventBus是如何管理事件总线的,EventBus到底是不是最佳方案?学习 ...
随机推荐
- Spring学习笔记4—流程(Spring Web Flow)
Spring Web Flow是Spring框架的子项目,作用是让程序按规定流程运行. 1 安装配置Spring Web Flow 虽然Spring Web Flow是Spring框架的子项目,但它并 ...
- Kafka简介、安装
一.Kafka简介 Kafka是一个分布式.可分区的.可复制的消息系统.几个基本的消息系统术语:1.消费者(Consumer):从消息队列(Kafka)中请求消息的客户端应用程序.2.生产者(Prod ...
- 剑指offer 面试30题
面试30题: 题目:包含min函数的栈 题:定义栈的数据结构,请在该类型中实现一个能够得到栈最小元素的min函数.在该栈中,调用min.push.pop的时间复杂度都是O(1) 解题思路:1)如果每次 ...
- SpringMVC:学习笔记(4)——处理模型数据
SpringMVC—处理模型数据 说明 SpringMVC 提供了以下几种途径输出模型数据: – ModelAndView: 处理方法返回值类型为 ModelAndView时, 方法体即可通过该对象添 ...
- Android下拉快捷设置面板添加快捷开关流程
快速设定面板上快捷开关的加载流程,包括图标等的加载和点击事件等的处理过程,以及创建一个快捷开关的主要过程(以增加一个锁屏开关为例).本文所讨论的Android版本为5.1. 快捷开关的加载流程 资源模 ...
- Loadrunder脚本篇——web_submit_data实现提交post请求
概述 web_link()和web_url()函数都是页面访问型函数,实现HTTP请求中的GET方法,如果需要实现POST方法,可使用web_submit_form或web_submit_data() ...
- iMX6 yocto平台QT交叉编译环境搭建
转:https://blog.csdn.net/morixinguan/article/details/79351909 . /opt/fsl-imx-fb/4.9.11-1.0.0/environm ...
- 一个骑行者的独白,很不错,我就转载了。--原名是--<<关于认怂这件事>>
一个骑行者的独白,很不错,我就转载了.--原名是--<<关于认怂这件事>> PS:我不知道这些是对是错,但都不曾后悔,或许哪天我在生活面前也怂了,然后跑回大城市乖乖的当个小 ...
- FANCO工程机械云平台
此系统专门为工程机械设备使用单位定制合理的生产要求,监控生产状况,快速体现产值,通过算法计算绩效等
- web框架详解之三Modal
一.Modal操作之创建表,添加数据 1. 配置Django中settings的设置连接mysql数据库,然后在mysql数据库中创建库 2. 在models中创建表.继承Model 3. 在sett ...