zoukankan      html  css  js  c++  java
  • 【2019-11-19】架构概览

    架构概览

    Angular是一个用HTML 和TypeScript 构建客户端应用的平台与框架。

    Angular的基本构造块是NgModule ,它为组件提供了编译的上下文环境。NgModule会把相关的代码收集到一些功能集中。Angular就是由一组NgModule定义出的

    应用至少会有一个用于引导应用的根模块,通常还会有很多特性模块
    ①组件定义视图 -- 视图是一组可见的屏幕元素,Angular可以根据你的程序逻辑和数据来选择和修改它们。每个应用至少有一个根组件

    ②组件使用服务 -- 服务会提供那些与视图不直接相关的功能。服务提供商可以作为依赖被注入到组件中,这些能让你的代码更加模块化,更加可服用,更加高效

     组件和服务都是简单的类,这些类使用装饰器来标识它们的类型,并提供元数据告知Angular该如何使用它们

    ①组件类的元数据将组件类和一个用来定义视图的模板关联起来。模板把普通的HTML和Angular 指令与绑定标记(markup)组合起来,这样Angular就可以在呈现HTML之前修改这些HTML

    装饰器是一些用于修饰 JavaScript 类的函数。Angular 定义了许多装饰器,这些装饰器会把一些特定种类的元数据附加到类上,以便 Angular 了解这些这些类的含义以及该如何使用它们。

     ②服务类的元数据提供一些信息,Angular要用这些信息来让组件可以通过依赖注入 使用该服务

    应用的组件通常会定义很多视图,并进行分级组织。Angular提供Router服务来帮助你定义视图之间的导航路径。路由器提供了先进的浏览器内导航功能

    模块

    Angular定义了NgModule,它和javaScript(ES2015)的模块不同而且有一定的互补性。NgModule为一个组件集声明了编译的上下文环境,它专注于某个领域,某个工作流或一组紧密相关的能力。NgModule可以将其组件和服务关联起来,形成功能单元

    每个Angular应用都会有一个根模块,通常命名为AppModule.根模块提供了用来启动应用的引导机制,一个应用通常会包含很多功能模块

    像JavaScript模块一样,NgModule也可以从其他NgModule中导入功能,并允许导出自已的功能供其他NgModule使用.比如:要在你的应用使用路由器(Router),就要导入Router这个NgModule

     模块这项技术还能让你获得惰性加载(按需加载模块)的优点,以尽可能减少启动时需要加载的代码体积

    组件

    每个Angular应用至少有一个组件,就是根组件,它会把组件树和页面中的DOM连接起来,每个组件都会定义一个类,其中包含应用的数据和逻辑,并与一个HTML模板相关联,该模板顶一个了一个供目标环境下显示的视图

    模板、指令和数据绑定

    模板会把HTML和Angular的标记组合起来,这些标记可以在HTML元素显示之前修改它们。模板中的指令会提供程序逻辑,而绑定标记会把你应用中的数据和DOM连接在一起,有两种类型的数据绑定:

    ①事件绑定:让你的应用可以通过更新应用的数据来响应目标环境下的用户输入

    ②属性绑定:让你将从应用数据计算出来的值插入到HTML中

    在视图显示出来之前,Angular会先根据你的应用数据和逻辑来运行模板中的指令并解析绑定表达式,以修改HTML元素和DOM。Angular支持双数据绑定,这意味着DOM中发生的变化同样可以反映回你的程序数据中

    你的模板也可以用管道转换要显示的值,以增强用户体验。Angular为一些通用的转换提供了预定义管道,你还可以定义自已的管道

    服务与依赖注入

    对于与特定视图无关并希望跨组件共享的数据或逻辑,可以创建服务类,服务类的定义通常紧跟在“@Injectable()”装饰器之后。该装饰器提供的元数据可以让你的服务作为依赖被注入到客户组件中

    依赖注入(DI)让你可以保持组件类的精简和高效。有了DI,组件就不用从服务器获取数据、验证用户输入或直接把日志写到控制台,而是会把这些任务委托给服务

    路由

    Angular 的 Router模块提供了一个服务,它可以让你定义在应用的各个不同状态和视图层次之间导航时要使用的路径。它的工作模型基于人们熟知的浏览器导航约定:

    ①在地址栏输入URL,浏览器就会导航到相应的页面

    ②在页面中点击链接,浏览器就会导航到一个新页面

    ③点击浏览器的前进和后退按钮,浏览器就会在你的浏览历史中向前或向后导航

    不过路由器会把类似URL的路径映射到视图而不是页面。当用户执行一个动作时,比如点击链接,本应该在浏览器加载一个新页面,但是路由器会拦截浏览器这个行为,并显示或者隐藏一个视图层次结构

    如果路由器认为当前的应用状态需要某些特定的功能,而定义此功能的模块尚未加载,路由器就会按需惰性加载此模块

    路由器会根据你应用中的导航规则和数据状态来拦截URL。当用户点击按钮,选择下拉框或者收到其他任何来源的输入时,你可以导航到一个新视图,路由器会在浏览器的历史日志中记录这个动作,所以前进和后退按钮可以正常工作

    要定义导航规则,就要把导航路径和组件关联起来。路径使用类似URL的语法来和程序数据整合在一起,就像模板语法会把视图和程序数据整合在一起一样,然后你就可以用程序逻辑来决定要显示或者隐藏哪些视图,以根据你制定的访问规则对用户的输入做出相应

     

  • 相关阅读:
    切图常用快捷键
    统计网页访问量的代码
    jQuery $.each用法
    js数组去重的三种常用方法
    React中的context的用法和使用场景和发布-订阅模式
    工具函数
    前端安全
    面试题整理
    学习的一些链接
    工厂模式、构造函数模式、原型模式、构造函数模式+原型模式
  • 原文地址:https://www.cnblogs.com/QQ-lala/p/11891006.html
Copyright © 2011-2022 走看看