Angular4中的组件,模块,服务,装饰器,控制器
组件(component)
我们可以理解为一段带有业务逻辑和数据的HTML
服务(server)
server用来封装可重用的业务逻辑
指令
指令允许你向HTML中添加自定义行为,Angular为我们提供了很多指令可以使用
模块(module)
上面说的组件,服务,指令加在一起是用来实现一个功能的,而模块(module)用来打包和分发这些功能的
例子
这里我们使用Angular CLI为我们自动生成的项目中的组件和模块为例。
先看src目录中的app中的app.components.ts,这是一个Typescript文件。内容如下:
import { Component } from ‘@angular/core’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
title = ‘app works!’;
}
介绍一下组件中三个必备元素
1、装饰器
这段代码中的@Compoent就是一个装饰器,用来告知angular框架如何处理一个Typescript类,他包含多个属性,这些属性值叫做元数据,angular会根据元数据渲染组件,并执行组件逻辑。我们可以看到这段代码的首三行定义了一个APPComponent类,他看着就是一个普通的ts类,但是我们需要告诉Angular这个类是一个组件,这就需要用装饰器讲这些元数据附件到雷伤,元数据会告诉Angular图和将这个Typescript类处理成一个组件
import { Component } from ‘@angular/core’;
从@angular/core引用了一个装饰器
元数据:
(1)selector: ‘app-root’,
表示这个组件可以通过app-root这个HTML标签来调用,打开项目根目录下的index.html可以看到里面有这样一行代码
Loading…
调用了这个组件
(2)templateUrl: ‘./app.component.html’,
我们已经知道了怎么调用组件,这行代码来说明组件现实的内容是什么,打开app.component.html代码如下
<h1>
{{title}}
</h1>
那这里的{{tilte}}是什么意思呢?后面马上说到。
(3)styleUrls: [‘./app.component.css’]
表示组件的css
2、模板(template)
用来定义组件的外观,元数据中的tempateUrl指定的文件其实就是组建的模板
3、控制器(controller)
控制器包含了组件的所有属性和方法,用来定义页面,逻辑,这段代码定义的类,其实就是定义了一个控制器
export class AppComponent { title = ‘app works!’; }