Anaulrajs2之组件篇

组件(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来修饰,然后通过()和[]的语法来调用

时间: 2024-10-06 19:08:25

Anaulrajs2之组件篇的相关文章

Android开发工程师文集-提示框,菜单,数据存储,组件篇

提示框,菜单,数据存储,组件篇 Toast Toast.makeText(context, text, 时间).show(); setDuration();//设置时间 setGravity();//位置 获取: 添加toast.getView(); imageView添加到toast中,addView(); LayoutInflater inflater = LayoutInflater.from(this); View toast_view=inflater.inflate(R.id.,nu

vue.js学习日记-组件篇

组件 自定义组件 全局注册: var question={name:'MR Liu'} Vue.component('my-header',{ template:'<p>hello world{{name}}</p> ', data:function(){//data必须是函数 且一般只能返回一个对象 return question//没有';'这个结束符 } }) 注意 question和template之间的关系一定要自己明确 局部注册: <html><hea

简单Maven的Web项目之验证码(jcaptcha组件篇)

一:JCaptcha简介 jcaptcha是一个开源的用来生成图形验证码的Java开源组件,使用起来也是非常的简单方便. jcapthca是非常强大的,不光是可以生成图片式的验证码,还可以生成声音式的(新浪就使用了双重验证码). Jcaptcha是CAPTCHA里面的一个比较著名的项目. 二:切换使用JCaptcha生成验证码 1:首先添加需要用到的jar包 注:由于部分jar包maven中央库中没有需要自行添加到本地库,稍后给出jar包的下载地址 下面是jar包在pom.xml文件中的配置 <

Cobbler实现自动化批量安装Linux系统系列一:安装先决性组件篇

随着经历的企业越来越多,服务器规划.实施及运维工作也越来越多,有时会发现,其实做为一名IT人,我们总是有些局限,尤其是在对企业IT结构规划时,由于只局限于对一种分支产品的特性了解,当所熟悉的产品不能胜任现有平台时,我们总会感觉有一些无奈,比如微软的MDT.WDS及SCCM,实话说挺不错的,但至少也只是在微软平台操作系统的部署上,当我们遇到在业务网运维平台中以Linux为主的环境时,大批量部署Linux,这时对于微软的这些部署产品可能就不能像在微软产品范围中那样如龙得水般了,这时我们也就真正理解了

Delphi7 组件篇 之 TBevel组件

TBevel组件 该组件可以创建具有3D效果的斜角的盒子.方框或线. 常用属性: shape:设置边界形状 style:设置分解的框线在屏幕上是凸起还是凹下. shape属性 type TBevelShape = (bsBox, bsFrame, bsTopLine, bsBottomLine, bsLeftLine, bsRightLine, bsSpacer); bsBox: 由style属性决定. bsFrame:客户区域是凸起还是凹下. bsTopLine:Bevel对象在客户区域显示一

[android开发篇]activity组件篇

https://developer.android.com/guide/components/activities.html Activity 是一个应用组件,用户可与其提供的屏幕进行交互,以执行拨打电话.拍摄照片.发送电子邮件或查看地图等操作. 每个 Activity 都会获得一个用于绘制其用户界面的窗口.窗口通常会充满屏幕,但也可小于屏幕并浮动在其他窗口之上. 一个应用通常由多个彼此松散联系的 Activity 组成. 一般会指定应用中的某个 Activity 为"主"Activi

vue组件篇(2)---封装组件并发布到npm

瞎说说 vue小白,要进行应用开发:你们都用什么UI框架,求指教,不想踩坑(想太多,不踩坑???不存在的!!!too young too simple-) 同学1:pc端我用element UI,感觉组件的API方法.属性比较完善...?? 同学2:哈?我个人感觉他的样式有些生硬,不够炫酷美观??,用iView吧,组件丰富,动画效果cool~~~?? 同学3:真的吗?阔是有人说,iView组件虽然完美的把其他UI组件有的缺点完美避过,但是某某组件不够人性化....?? 同学4:用vue-beau

vue.js之组件篇

Vue.js 组件 模块化:是从代码逻辑的角度进行划分的: 组件化:是从UI界面的角度进行划分的. 组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树,如下图所示: 使用Vue.extend来创建全局vue组件: var com1 = Vue.extend({ template: '<h3>这是使用 Vue.extend 创建的组件&

微信小程序组件篇实战

实现效果如下: 实现代码如下: index.wxml: <!--index.wxml--> <view class="container"> <view class = "selection"> <swiper indicator-dots="true" autoplay="true" interval="3000" duration="1000"