Angular架构概览(截取部分)
原文链接:https://angular.cn/docs/ts/latest/guide/architecture.html
我们是这样写 Angular 应用的:用 Angular 扩展语法编写 HTML 模板, 用组件类管理这些模板,用服务添加应用逻辑, 用模块打包发布组件与服务。
然后,我们通过引导根模块来启动该应用。 Angular 在浏览器中接管、展现应用的内容,并根据我们提供的操作指令响应用户的交互。
全景图
这个架构图展现了 Angular 应用中的 8 个主要构造块:
模块
根模块在一些小型应用中可能是唯一的模块,大多数应用会有很多特性模块,每个模块都是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。
组件
组件负责控制屏幕上的一小块区域,我们称之为视图。
模板
通过组件的自带的模板来定义组件视图。模板以 HTML 形式存在,告诉 Angular 如何渲染组件。模板除了可以使用像<h2>
和<p>
这样的典型的 HTML 元素,还能使用其它元素。 例如,像*ngFor
、{{hero.name}}
、(click)
、[hero]
和<hero-detail>
这样的代码使用了 Angular 的模板语法。
元数据
告诉 Angular 如何处理一个类。
数据绑定
{{hero.name}}
插值表达式在<li>
标签中显示组件的hero.name
属性的值。[hero]
属性绑定把父组件HeroListComponent
的selectedHero
的值传到子组件HeroDetailComponent
的hero
属性中。(click)
事件绑定在用户点击英雄的名字时调用组件的selectHero
方法。
双向数据绑定是重要的第四种绑定形式,它使用ngModel
指令组合了属性绑定和事件绑定的功能。
指令
服务
依赖注入
MVVM
VI
Angular架构概览(截取部分)的更多相关文章
- Angular(01)-- 架构概览
声明 本系列文章内容梳理自以下来源: Angular 官方中文版教程 官方的教程,其实已经很详细且易懂,这里再次梳理的目的在于复习和巩固相关知识点,刚开始接触学习 Angular 的还是建议以官网为主 ...
- Asp.net mvc项目架构分享系列之架构概览
Asp.net mvc项目架构分享系列之架构概览 Contents 系列一[架构概览] 0.项目简介 1.项目解决方案分层方案 2.所用到的技术 3.项目引用关系 系列二[架构搭建初步] 4.项目架构 ...
- Python -- Scrapy 架构概览
架构概览 本文档介绍了Scrapy架构及其组件之间的交互. 概述 接下来的图表展现了Scrapy的架构,包括组件及在系统中发生的数据流的概览(绿色箭头所示). 下面对每个组件都做了简单介绍,并给出了详 ...
- angular架构
angular架构包括以下部分: 1.模块 2.组件 3.模板 4.元数据 5.数据绑定 6.指令 7.服务 8.依赖注入 9.动画 10.变更检测 11.事件 12.表单 13.HTTP 14.生命 ...
- Apache Beam的架构概览
不多说,直接上干货! Apache Beam是一个开源的数据处理编程库,由Google贡献给Apache的项目,前不久刚刚成为Apache TLP项目.它提供了一个高级的.统一的编程模型,允许我们通过 ...
- Mybatis技术内幕(一)——整体架构概览
Mybatis技术内幕(一)--整体架构概览 Mybatis的整体架构分为三层,分别是基础支持层.核心处理层和接口层. 如图所示: 一.基础支持层 基础支持层包含整个Mybatis的基础模块,这些模块 ...
- Angular05 angular架构、搭建angular开发环境、组件必备三要素、angular启动过程
1 angular架构 1.1 组件:是angular应用的基本构建模块,可以理解为一段带有业务逻辑和数据的HTML 1.2 服务:用来封装可重用的业务逻辑 1.3 指令:允许你想HTML元素添加自定 ...
- 【WPF系列】基础学习-WPF架构概览
引言 WPF从.net framewok3.0加入以来,经历了很多跟新.每次更新都给用户带来了新的功能或者优化性能.下面我们首先看下WPF再.netFramework中的位置,接着介绍下WPF的架构框 ...
- ONOS架构-概览
这个是阅读https://wiki.onosproject.org/display/ONOS/Architecture+Guide是顺便翻译的,目前断断续续在阅读,今天先贴一部分 概览 基于osgi, ...
随机推荐
- Mac 10.12安装数据库管理工具MySQL Workbench
说明:跨平台的MySQL管理工具.别纠结是不是反人类的了,这款用熟了也很溜. 下载: (链接: https://pan.baidu.com/s/1b3VtmA 密码: 6hka)
- Mac 10.12安装Git管理工具SourceTree
说明:Git的GUI工具应该是这款最好用. 下载: (链接: https://pan.baidu.com/s/1mhRr35Y 密码: vv67)
- 完美原创:centos7.1 从源码升级安装Python3.5.2
(原创)完美原创:centos7.1 从源码升级安装Python3.5.2 下载Python3.5.2源码:https://www.python.org/downloads/release/pytho ...
- spring boot快速入门 1 :创建项目、 三种启动项目方式
准备工作: (转载)IDEA新建项目时,没有Spring Initializr选项 最近开始使用IDEA作为开发工具,然后也是打算开始学习使用spring boot. 看着博客来进行操作上手sprin ...
- Python对象引用和del删除引用
1.首先介绍下python的对象引用 1)Python中不存在传值调用,一切传递的都是对象引用,也可以认为是传址调用.即Python不允许程序员选择采用传值或传引用.Python参数传递采用的是“传对 ...
- 手机端全局样式表整理(mobile)
@charset "utf-8";/* * filename: global.css * description: 全局样式(包含样式重置,公共常用 ...
- Ambari集群里操作时典型权限问题put: `/home/bigdata/1.txt': No such file or directory的解决方案(图文详解)
不多说,直接上干货! 问题详情 明明put该有的文件在,可是怎么提示的是文件找不到的错误呢? 我就纳闷了put: `/home/bigdata/1.txt': No such file or dire ...
- Android开源项目xUtils HttpUtils模块分析(转)
xUtils是github上的一个Android开源工具项目,其中HttpUtils模块是处理网络连接部分,刚好最近想整理下Android网络编程知识,今天学习下xUtils中HttpUtils. x ...
- php 析构函数,构造函数
php 析构函数,构造函数 <?php /** * 测试使用的PHP操作类 * Date: 2017/7/13 * Time: 14:22 */class Test{ /** 姓名 */ p ...
- Rest客户端
public class RestClient { public string EndPoint { get; set; } //请求的url地址 public HttpVerb Method { g ...