做外贸找生意上哪个网站,有经验的郑州网站建设,苏州高端网站建设咨询,为什么我做的网站不是加密访问第一章、第一节 Angular基础
让我们先来看看Angular是如何实现组件模式的。
组件模式
Angular 应用程序使用组件模式。你可能听说过这个模式#xff0c;它不仅用于软件开发#xff0c;还用于制造、建筑和其他领域。简单地说#xff0c;它涉及到将更小的、离散的构建块组合…第一章、第一节 Angular基础
让我们先来看看Angular是如何实现组件模式的。
组件模式
Angular 应用程序使用组件模式。你可能听说过这个模式它不仅用于软件开发还用于制造、建筑和其他领域。简单地说它涉及到将更小的、离散的构建块组合成更大的成品。例如电池是汽车的组成部分。
在软件开发中组件是逻辑单元可以组合成更大的应用程序。组件往往具有内部逻辑和属性这些逻辑和属性对较大的应用程序是屏蔽的或隐藏的。然后较大的应用程序通过称为接口的方式使用这些构建块接口只公开使用组件所需的内容。这样只要不改变接口组件的内部逻辑就可以在不影响较大应用程序的情况下进行修改。
回到我们的电池例子汽车的使用连接器接通电池。然而如果电池坏了它可以被一个全新的电池取代只要电池有相同的连接器。这意味着汽车制造商不必担心电池内部的问题这就简化了汽车的制造过程。更重要的是车主不必每次电池坏掉时都更换汽车。
为了扩展业务电池制造商可以为一系列不同的车辆销售电池例如全地形车、船只或雪地摩托。因此组件模式使他们能够实现更大的规模经济。
在web应用程序中使用组件模式
随着web应用程序变得越来越复杂能够用更小的和离散的组件构建它们的需求变得更加迫切。组件的方式允许以某种方式构建应用程序以防止它们成为乱七八糟的代码。相反基于组件的设计允许我们在独立于其他部分的情况下对应用程序的特定部分进行推理然后我们可以通过商定的连接点将应用程序组合成一个完整的整体。
此外维护成本更低因为每个组件的内部逻辑可以单独管理而不会影响应用程序的其他部分。使用自描述组件将应用程序组合在一起使应用程序在更高的抽象级别上更容易理解。
为什么以前Angular不使用组件?
如果这个想法很有意义为什么早期版本的Angular没有采用组件模式呢?答案是当Angular第一次发布时现有的技术并不完全支持在web应用程序中实现这种模式。
然而早期版本的Angular在实现更智能的web应用程序设计和组织方面迈出了实质性的步伐。例如他们实现了MVC模式该模式将应用程序分离为模型、视图和控制器(您将看到MVC模式在我们将在Angular中构建的组件中继续使用)。
使用MVC模式模型是数据视图是web页面(或移动应用程序屏幕甚至是Flash页面)控制器用模型中的数据填充视图。通过这种方式可以实现关注点分离。遵循这种模式并明智地使用指令将使您非常接近组件。
因此早期版本的Angular允许更合理地设计和构建应用程序。然而由于所使用的技术不是真正孤立的这种方法受到了限制。相反它们最终都被呈现出来与屏幕上的其他元素没有任何真正的分离。
有什么新东西能让Angular使用组件模式?
相比之下Angular 的最新版本包含了最近出现的技术这使得更全面地实现组件模式成为可能。这些技术包括Web组件、ES2015 (JavaScript的新版本)和TypeScript。让我们来讨论一下这些技术为实现这一目标带来了什么。
Web 组件
Web组件是一个总称实际上涵盖了Web浏览器的四个新兴标准:
Custom elementsShadow DOMTemplatesHTML imports
现在让我们详细讨论每一个问题: Custom elements 自定义元素允许创建标准HTML标记以外的新类型的DOM元素比如 div 和 p。你将在本书中看到这些定制元素的使用。例如我们在本章中构建的应用程序将有一个名为app-root的根元素但是你可以为该元素指定任何名称。单个组件也将使用自定义元素。例如在下面的章节中我们将构建一个更复杂的应用程序它将屏幕分解为多个组件。页面的标题将使用自定义元素abe-header来显示其内容(前缀abe对我们的应用程序是唯一的有助于避免与本地HTML元素或其他应用程序中的自定义元素命名冲突)。添加自定义标记的功能在屏幕上提供了一个位置该位置可以保留下来绑定组件。简而言之这是将组件与页面其余部分分离并使其能够真正独立的第一步。 Shadow DOM 在DOM中为scripts、CSS、HTML提供了一个隐藏区域。隐藏区域内的标记和样式不会影响页面的其余部分。同样重要的是它们不会受到页面其他部分的标记和样式的影响。我们的组件可以使用这个隐藏区域来呈现它的显示。这是使组件自包含的第二步。 Templates (模板)是HTML的片段最初不会在web页面中呈现但可以在运行时使用JavaScript激活。许多JavaScript框架已经支持某种形式的模板。Web组件标准化这个模板并在浏览器中提供直接支持。可以使用模板使组件动态使用的Shadow DOM中的HTML和CSS。这是构成组件的第三步。 构成Web组件的最后一个标准是HTML导入。它们提供了在单个包中加载HTML、CSS和JavaScript等资源的方法。Angular不使用HTML导入。相反它依赖于JavaScript模块加载我们将在本章稍后讨论。
Angular组件 和 Web组件
目前的Web浏览器并不完全支持Web组件。因此Angular组件并不是严格意义上的Web组件。也许更准确的说法是Angular组件实现了Web组件背后的设计原则。它们使在当今的浏览器下构建web组件这件事成为了可能。 Angular支持Chrome、Firefox、Safari和Edge等常绿浏览器以及ie9及以上版本。它还支持Android和IOS。要查看Angular支持的浏览器列表请访问https:/ / angular.io / guide/ browser- support。 因此在本书的其余部分中我们将关注于构建Angular组件而不是Web组件。尽管有这样的区别Angular组件与Web组件紧密结合甚至可以与Web组件互操作。随着浏览器开始更全面地支持Web组件Angular组件和Web组件之间的差异将开始消失。因此如果您想要开始采用未来的Web组件标准Angular为您提供了今天这样做的机会。
Angular的语言支持
您可以使用ES5(所有当前浏览器都支持的JavaScript版本)开发组件但是Angular通过添加对最新语言(如ES2015和TypeScript)的关键特性的支持增强了开发组件的能力。
ES2015
ES2015 是JavaScript的新版本;2015年6月获得批准。它增加了许多 语言的改进我们将在这本书中看到但在这一点上我们最感兴趣的两个是:
ClassesModule loading
以前在JavaScript中不存在类的概念。既然它们确实存在那么使用它们的关键好处就是它们提供了简单、清晰的语法我们可以使用它为组件中的代码创建方便的容器。当你开始研究这本书中的应用程序时你会发现。类还为我们的组件提供了一个方便的简写名称使它们更容易通过依赖注入等事情联系在一起。
我们将在本书的例子中探索类的使用。如果您没有使用面向对象的语言那么您可能不熟悉类因此我们将在本章的示例中介绍它们。
ES2015 还介绍了一种新的模块加载方法。模块提供了一种封装JavaScript文件的方法。当它们被封装时它们不会污染全局命名空间并且可以以受控的方式与其他模块交互。
一旦我们定义了模块我们需要一种方式将它们加载到应用程序中以执行。模块加载允许我们从Angular组成的modules和其他我们创建或使用的组件的模块中选择我们应用程序需要的东西。
目前有很多方法和库支持JavaScript中的模块加载。ES2015为加载模块添加了新的、一致的语法作为语言的一部分。它的语法很简单包括在模块前面加上export关键字(或使用默认导出)然后使用import在应用程序的其他地方使用它们。
es2015模块加载使我们能够将组件组合成有用的包或特性可以在应用程序中导入或导出。事实上模块是Angular本身的核心。我们将看到模块在Angular本身和我们在本书中构建的应用程序中被广泛使用。
由于目前的浏览器并不完全支持ES2015我们需要将ES2015转换为ES5以便在应用程序中使用类和模块加载等特性。我们通过一种叫做转化的过程来完成。
一旦ES2015被传输到ES5我们就可以使用SystemJS这样的模块加载器来加载我们的模块。SystemJS遵循ES2015模块加载语法使我们能够在当今的浏览器中进行模块加载。或者我们可以使用webpack之类的模块绑定器来加载和组合我们的模块。对于本书中的项目我们将使用webpack在应用程序中加载、打包和部署模块。
TypeScript
TypeScript是Microsoft作为JavaScript的超集创建的这意味着它包含了ES2015的特性(比如类和模块加载)并添加了以下内容:
TypesDecorators
Types类型允许我们在类中标记变量、属性和参数以表明它们是数字、字符串、布尔值或数组和对象等各种结构。这使我们能够在设计时执行类型检查以确保在应用程序中使用了正确的类型。
Decorators 装饰器是简单的注释我们可以使用符号和函数将其添加到类中。它们为我们的类的使用提供了指令(称为元数据)。在Angular中decorator允许我们将类标识为Angular组件。decorator还使我们能够指定一个自定义元素将组件绑定到该元素并标识一个向组件添加HTML视图的模板。在阅读本书的过程中我们将更详细地介绍装饰器的使用。
decorator不是ES2015的一部分而是未来它们将包含在JavaScript语言中的提议的一部分。作为微软和谷歌合作的一部分它们被添加到TypeScript。如前所述TypeScript编译成ES5因此我们能够在浏览器中同时使用类型和装饰器而这些浏览器并不完全支持ES2015或拟议的修饰符标准。
综合能力
通过遵循Web组件标准并添加对ES2015和TypeScript的支持Angular使我们能够创建实现组件设计模式的Web应用程序。这些组件通过自描述和自包含构建块的集合帮助实现构建大型应用程序标准背后的远景。
我们希望您能在本书的示例中看到Angular使组件能够以一种简单明了的方式构造使开发人员更容易实现它们。在我们继续阅读本书中的示例时我们将重点介绍每种技术的使用情况。
Angular modules
组件是 Angular 应用程序的基本构件。但是我们如何将这些构建块组织成完整的应用程序呢? Angular modules 提供了这个问题的答案。它们使我们能够将组件组合成可重用的功能组这些功能组可以在整个应用程序中导出和导入。例如在更复杂的应用程序中我们希望有用于诸如身份验证、公共实用程序和外部服务调用的模块。与此同时模块使我们能够以一种允许我们按需加载的方式对应用程序中的特性进行分组。这就是所谓的延迟加载我们将在 第四章 “Personal Trainer”中讨论这个话题。
每个Angular应用程序都有一个或多个包含组件的模块。Angular引入了NgModule来方便地指定组成模块的组件。每个Angular应用程序都必须至少有一个这样的模块——根模块。 Angular本身是作为模块构建的我们将这些模块导入到应用程序中。因此当您构建Angular应用程序时您将看到所有模块的使用。 构建Angular应用程序的基本步骤
总之:在一个基本的层面上你会看到在Angular中开发应用你会做以下事情:
创建组件将它们打包成模块启动 app
了解Angular和组件设计模式的最好方法就是观察它的实际操作。因此我们将在Angular中构建我们的第一个Hello World应用程序。这个应用程序将帮助您熟悉Angular框架并了解组件设计模式。我们开始吧。
