Angular2核心功能简介

原文地址：点击打开链接

Angular2核心

 

     Angular2的核心包括六个方面，分别是组件、模板、指令、服务、依赖注入和路由，他们之间的关系如下图：

       由上图可以看到，用户直接交互的是模板，也就是可见可交互的视图界面，它是组成组件的要素之一。组件是用来维护数据模型和功能逻辑的，它包括模板和组件类。路由控制组件的创建和销毁，从而完成界面的跳转。指令与模板相互关联，它最重要的功能是增强了模板的功能，也是对模板的一种语法拓展。服务是与逻辑功能相关的单元，它通过依赖注入的方式引入到组件内部，为组件类服务。

 

组件：

Angular框架基于组件设计，组价是最小的执行单元。组件类似于HTML页面抽出的公共元素，但并不限于这些。一个应用程序是由这些组件组成的，他们之间有一定的关系。通过Angular的命令穿件的组件包括四个文件：HTML、CSS、Spec.ts、Component.ts。HTML和CSS文件用来展示模板视图；Component.ts是组件类，用来完成功能逻辑的；Spec.ts是放测试代码的。

 

import { Component, OnInit } from '@angular/core';

@Component({     //组件装饰器
  selector: 'app-preview-paper',   //别的组件使用该组件的标签名，也是该组件的唯一标识
  templateUrl: './preview-paper.component.html',   //模板对应的文件，也可以使用template标签，后面用反单引号括起来HTML代码，效果是一样的
  styleUrls: ['./preview-paper.component.css']     //CSS样式，修饰模板文件，可以引入多个css文件
}) 
export class PreviewPaperComponent implements OnInit {   //组件类的声明

  constructor() { }   //构造器

  ngOnInit() {   //该组件一初始化时要执行的内容
  }
  
}