2016-02-12 64 views
5

我是Angular的新手,对于Angular JS 1.x很少有经验。但是我的问题是关于角2.我在读关于Componentsherehttps://angular.io/docs/ts/latest/guide/architecture.htmlAngular 2中的组件是什么

我用的打字稿及我的问题是:是否有把握地说,组件是一个类(不@Component注释)相似模型(在Asp.Net MVC),因为我们可以将html控件与组件类中定义的字段绑定起来,还是更像控制器?还是有更多的我失踪?

有一个在2号地址的一份声明中说:

我们定义组件的应用逻辑 - 它做什么支持这样的观点 - 一类

上述说法内部增加我混乱,因为我们可以在一个与html绑定的类中做很多事情。在文本更改时,我们可以远程检查某些内容或点击按钮,我们可以调用一个方法,所有这些都可以在组件类中定义。那么,组件的限制究竟是什么?我们可以把它们当作模型或者控制器吗?

请大家帮我澄清这个

+1

请仔细阅读本文,其中描述了[组件和装饰](http://blog.thoughtram.io/angular/2015/05/03/the-difference-between-annotations-和decorator.html) –

回答

3

事实上,组件类对应于您的组件实现。我的意思是你自己的处理:

所以组件类可以看作是Angular1控制器和作用域的混合。

@Component修饰器是什么将使组成Angular2的一部分。我的意思是参与框架和应用程序的不同特性和机制。

它将使能够构成不同的事情的组件引用几个:

  • 选择
  • 模板
  • 输入和输出(可使用@Input@Ouput
  • 可以还被配置
  • 特定供应商
  • 组件中使用的指令/组件
  • 个管道组件中使用

而且你可以看到一个类装饰(该@Component装饰就是这种类型)作为一种拦截:

  • 它将使可能的参数的依赖注入的组件构造函数。
  • 它将使组件实例成为利用ZoneJS的变更检测的一部分。马克给了这个很棒的解释:What is the Angular2 equivalent to an AngularJS $watch?
  • 它将根据使用反射元数据配置的内容在组件实例上添加元数据。

所以@Component修饰器对配置组件并使其成为Angular2机制的一部分非常重要。

注为大家:我想简单介绍一下这个,这相当于我对事物的理解,但随意评论我的答案;-)

+0

好吧,所以组件基本上是一种与模板交互以及在模板状态发生变化时采取行动的方式。所以我相信我不应该把它看作模型或控制器。 – sdeep

+0

是的,确切!对于组件的状态也是如此......同意,它与模型/控制器有点不同。有人对此进行了讨论:“这是MVC,MVVM,MGM,MSG吗?答案是Angular符合你想要的任何定义”;-) –

0

指令/部件更换的控制器,范围的组合,和来自AngularJS的指令(Angular 1)。

组件是一个视图和一个关联的视图控制器。 (指令没有视图。)组件是我们如何为我们的应用程序创建视图并使用(最小)状态,数据和逻辑来支持这些视图。

视图是一个HTML模板,带有一些额外的Angular语法,用于控制屏幕/显示区域。该组件将某些(子集!)应用程序数据公开给视图,并处理该视图的UI逻辑。数据不应该由组件拥有。相反,组件应该只引用它需要驱动视图的数据。 (这与AngularJS中使用的最佳实践类似 - 控制器应该引用数据,而不是拥有它。)服务通常应拥有自己的数据。

同样,组件逻辑应限制为驱动视图所需的逻辑(因此,“视图逻辑”)。应用程序逻辑属于服务。其他任务也属于服务而不属于组件:验证用户输入,记录,与(网络)服务器交互等。

因此,组件(如AngularJS控制器)应该尽可能“瘦”。他们应该处理用户交互并定义这些所需的数据绑定。他们应该专注于支持这个观点。

当用户与应用程序交互时,角度创建并销毁组件。组件有一个生命周期,我们可以利用生命周期钩子。

组件直到我们告诉Angular它只是一个类。我们通过将元数据附加到课程上来做到这一点。

我发现知道什么属于组件而什么不是,而不是试图确定它是“控制器”还是“模型” - 这些术语如此广泛和过度使用以至于我更重要不要以为你可以让两位开发人员就任何一个术语的定义达成一致。

上述一些句子可能是从Angular.io文档,博客,其他SO帖子等复制而来。我在文档中有一堆关于Angular的笔记,并且我并不总是跟踪源引用。