原文链接: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]属性绑定把父组件HeroListComponentselectedHero的值传到子组件HeroDetailComponenthero属性中。

  • (click) 事件绑定在用户点击英雄的名字时调用组件的selectHero方法。

双向数据绑定是重要的第四种绑定形式,它使用ngModel指令组合了属性绑定和事件绑定的功能。

指令

服务

依赖注入

MVVM

VI

Angular架构概览(截取部分)的更多相关文章

  1. Angular(01)-- 架构概览

    声明 本系列文章内容梳理自以下来源: Angular 官方中文版教程 官方的教程,其实已经很详细且易懂,这里再次梳理的目的在于复习和巩固相关知识点,刚开始接触学习 Angular 的还是建议以官网为主 ...

  2. Asp.net mvc项目架构分享系列之架构概览

    Asp.net mvc项目架构分享系列之架构概览 Contents 系列一[架构概览] 0.项目简介 1.项目解决方案分层方案 2.所用到的技术 3.项目引用关系 系列二[架构搭建初步] 4.项目架构 ...

  3. Python -- Scrapy 架构概览

    架构概览 本文档介绍了Scrapy架构及其组件之间的交互. 概述 接下来的图表展现了Scrapy的架构,包括组件及在系统中发生的数据流的概览(绿色箭头所示). 下面对每个组件都做了简单介绍,并给出了详 ...

  4. angular架构

    angular架构包括以下部分: 1.模块 2.组件 3.模板 4.元数据 5.数据绑定 6.指令 7.服务 8.依赖注入 9.动画 10.变更检测 11.事件 12.表单 13.HTTP 14.生命 ...

  5. Apache Beam的架构概览

    不多说,直接上干货! Apache Beam是一个开源的数据处理编程库,由Google贡献给Apache的项目,前不久刚刚成为Apache TLP项目.它提供了一个高级的.统一的编程模型,允许我们通过 ...

  6. Mybatis技术内幕(一)——整体架构概览

    Mybatis技术内幕(一)--整体架构概览 Mybatis的整体架构分为三层,分别是基础支持层.核心处理层和接口层. 如图所示: 一.基础支持层 基础支持层包含整个Mybatis的基础模块,这些模块 ...

  7. Angular05 angular架构、搭建angular开发环境、组件必备三要素、angular启动过程

    1 angular架构 1.1 组件:是angular应用的基本构建模块,可以理解为一段带有业务逻辑和数据的HTML 1.2 服务:用来封装可重用的业务逻辑 1.3 指令:允许你想HTML元素添加自定 ...

  8. 【WPF系列】基础学习-WPF架构概览

    引言 WPF从.net framewok3.0加入以来,经历了很多跟新.每次更新都给用户带来了新的功能或者优化性能.下面我们首先看下WPF再.netFramework中的位置,接着介绍下WPF的架构框 ...

  9. ONOS架构-概览

    这个是阅读https://wiki.onosproject.org/display/ONOS/Architecture+Guide是顺便翻译的,目前断断续续在阅读,今天先贴一部分 概览 基于osgi, ...

随机推荐

  1. Mac 10.12安装数据库管理工具MySQL Workbench

    说明:跨平台的MySQL管理工具.别纠结是不是反人类的了,这款用熟了也很溜. 下载: (链接: https://pan.baidu.com/s/1b3VtmA 密码: 6hka)

  2. Mac 10.12安装Git管理工具SourceTree

    说明:Git的GUI工具应该是这款最好用. 下载: (链接: https://pan.baidu.com/s/1mhRr35Y 密码: vv67)

  3. 完美原创:centos7.1 从源码升级安装Python3.5.2

    (原创)完美原创:centos7.1 从源码升级安装Python3.5.2 下载Python3.5.2源码:https://www.python.org/downloads/release/pytho ...

  4. spring boot快速入门 1 :创建项目、 三种启动项目方式

    准备工作: (转载)IDEA新建项目时,没有Spring Initializr选项 最近开始使用IDEA作为开发工具,然后也是打算开始学习使用spring boot. 看着博客来进行操作上手sprin ...

  5. Python对象引用和del删除引用

    1.首先介绍下python的对象引用 1)Python中不存在传值调用,一切传递的都是对象引用,也可以认为是传址调用.即Python不允许程序员选择采用传值或传引用.Python参数传递采用的是“传对 ...

  6. 手机端全局样式表整理(mobile)

    @charset "utf-8";/*  * filename:          global.css * description:       全局样式(包含样式重置,公共常用 ...

  7. Ambari集群里操作时典型权限问题put: `/home/bigdata/1.txt': No such file or directory的解决方案(图文详解)

    不多说,直接上干货! 问题详情 明明put该有的文件在,可是怎么提示的是文件找不到的错误呢? 我就纳闷了put: `/home/bigdata/1.txt': No such file or dire ...

  8. Android开源项目xUtils HttpUtils模块分析(转)

    xUtils是github上的一个Android开源工具项目,其中HttpUtils模块是处理网络连接部分,刚好最近想整理下Android网络编程知识,今天学习下xUtils中HttpUtils. x ...

  9. php 析构函数,构造函数

    php 析构函数,构造函数   <?php /** * 测试使用的PHP操作类 * Date: 2017/7/13 * Time: 14:22 */class Test{ /** 姓名 */ p ...

  10. Rest客户端

    public class RestClient { public string EndPoint { get; set; } //请求的url地址 public HttpVerb Method { g ...