码迷,mamicode.com
首页 > Web开发 > 详细

Anaulrajs2之组件篇

时间:2017-03-06 01:32:53      阅读:276      评论:0      收藏:0      [点我收藏+]

标签:方式   sel   strong   amp   应用   提高   tac   输出   文件   

组件(Component)是构成Angular应用的基础核心,通俗的说就是一个组件包含了一个特定的功能,并且组件之间协同工作以组装成一个完整的应用程序;举个栗子??,一辆汽车中包含很多个零件,部件:发动机,轮胎,变速箱等,这一个一个大大小小的零部件就是汽车的组件,当然这不是颗粒度最小的组件,发动机本身也是有很多更小的组件组成。下面我们就来看看Angular中的组件吧!

一、Angular的组件

Angular的组件是自描述的,组件可以和宿主元素进行交互,组件中可以注入服务,组件有明确的Input&Output,这样就使得每一个服务都可以独立存在,所以意味着任何一个组件都可以通过bootstrap来启动,也可以路由加载,或者在其他组件中使用,大大提高了组件的复用性;

二、如何创建组件

创建组件主要有三步:

  • 引入Component修饰器;
  • 建立一个普通的类,用@Component修饰
  • 从@Component中设置一些元数据:selector,template等

如下图所示:

技术分享

注意事项:

  1. 组件修饰器:每个组件类必须要有@Component修饰才可以成为Angular组件
  2. 组件元数据:selector、template等
  3. 模板:每个组件都会关联一个模板,这个模板就是最终显示到页面上的,页面上的DOM元素就是此组件实例的宿主元素
  4. 组件类:组件实际上是一个普通的类,仅此而已

附:元数据一览

  • selector:用于定义组件在HTML代码中匹配的元素。这个参数是必须设置的,如果不设置则默认是div,因此组件无法定位准确的DOM元素。selector命名方式是“烤肉串式”,eg.hello-world,app-contact;
  • template:为组件指定一个内联模板;
  • templateUrl:为组件指定一个外联模板,指定外联模板的URL地址,与template只能指定其中有一个,不能重复;
  • styles:为组件指定內联样式
  • styleUrls:为组件指定一系列外联样式表文件;和styles可以重复指定,如果同时指定,则styleUrls会覆盖styles;
  • directives:用来引入其他指令或组件,使得在模版中可以使用指令或组件列表;注意:自定义的组件必须在使用前声明,否则无法使用
  • pipes:指定在模板中使用的管道,一般用来格式化数据
  • providers/viewProviders:为组件注入指定的服务;

三、组件交互

  一个组件可以指定输入或输出的属性,这是构成组件式自描述的原因之一。输入输出的属性可以使用属性修饰器@Input和@Output来修饰,然后通过()和[]的语法来调用

 

Anaulrajs2之组件篇

标签:方式   sel   strong   amp   应用   提高   tac   输出   文件   

原文地址:http://www.cnblogs.com/Henry-World/p/6507617.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!