第3章
◄Angular入门初步►
本章将介绍使用Ionic框架开发前掌握的Angular（从2.0版本开始，去掉了JS这个后缀，统称Angular）基础知识。
除了需要明白HTML5/CSS3/JavaScript这三个Web开发的基本知识，要学会Ionic开发还有一个前提就是懂Angular和TypeScript（从2.0版本开始，Angular主要使用TypeScript作为开发语言）。
然而按笔者的估计，初学型的开发者要完整搞懂Angular的方方面面，怎么也得读一本几百页专讲Angular的书。
为了不偏离本书主旨，同时又根据2/8原则，笔者在本章将介绍使用Ionic框架时无法回避的Angular整体结构和最重要的组成元素，而有些旁枝末节或是关系不大的知识点将被略过或在后续章节的示例代码中出现的时候给出解释。
如有读者想要全面深入学习Angular知识以达到能够深度改写和扩展Ionic框架提供的指令组件的能力，笔者建议直接参考Angular官方中文网站完整的使用说明（/docs）、API文档（/api）或者国内外出版的优秀Angular书籍。
本章的主要知识点包括：AngularCLI安装与使用Angular整体结构模块与依赖注入（Module&DependencyInjection）组件与模板(Component&Template)指令与服务（Directive&Service）一个简单的Angular项目：实时自选股行情页 3.1AngularCLI安装与使用 在安装Angular前，我们需要确保在阅读第2章时已经成功安装了Node.js和NPM，如果还没有安装，请先阅读2.1.1章节。
Ionic移动开发入门与实战（第2版） 3.1.1AngularCLI的安装 AngularCLI是Angular的命令行界面工具，主要用来创建项目、添加文件以及启动服务等功能。
我们使用以下命令进行安装。
npminstall-g@angular/cli 在安装完成后，使用以下命令验证AngularCLI的正常安装与版本，如图3.1所示。
Ng--version 图3.1验证AngularCLI是否成功安装以及被安装的版本 3.1.2使用AngularCLI创建项目 首先讲一下如何使用CLI来创建一个新的项目。
进入你想要创建项目的文件夹下，执行以下命令来生成一个新项目，如图3.2所示。
ngnewHelloAngular 图3.2使用AngularCLI新建项目 52 第3章Angular入门初步在项目目录文件夹下，会生成如图3.2中所示的文件。
之后等待NPM将node_modules文件夹下的依赖安装完成即可。
3.1.3使用AngularCLI启动开发服务器 在新项目创建完成后即可启动服务器。
我们执行以下命令。
cdHelloAngularngserve--open 命令执行后，如果可以看到如图3.3所示的界面，那么环境算是搭建完成了。
在接下来的章节讲解后，我们会在最后一节做一个简单的项目，帮助读者学习Angular的代码编写。
图3.3Angular初始项目ngserve命令会启动开发服务器，可以在修改文件的时候对页面进行自动更新。
加入--open（或-o）参数可以自动帮助我们打开浏览器并访问该地址，其中默认地址为http://localhost:4200/。
53 Ionic移动开发入门与实战（第2版） 3.2Angular整体结构概述 接触过前端界面开发的读者应该都用过或者听说jQuery了。
Angular与jQuery大不相同：Angular是一个开发框架，而jQuery是一个工具库。
工具库像瑞士军刀，使用者觉得合适的时候就找到它的某个部件用一下，但是它基本不会对使用者提出过多要求或者严格限制，比如瑞士军刀不会要求小刀和开瓶器一定需要一起配合使用；而开发框架则大不相同，它已经通过自有的部分组成了一个环环相扣的有机整体，严格约定了使用者在哪里可以自由组合，在哪里必须按部就班。
只有遵照它的要求嵌入和组合，才能保证体系在拼装运行时能正常工作。
因此庞大严谨的Angular相对于灵活的jQuery要难学一些，不把Angular开发应用的整体结构和各部分组件职能了解清楚，会觉得没处下手或是使用时如堕五里雾中，即使勉强完成应用，也在其中埋了一些坑等着后人来慢慢填。
因此本节将先从Angular的整体入手，向读者简单介绍这个重型框架的开发语言TypeScript和几大特性。
图3.4是笔者简化过的典型Angular应用结构图，图中前端区域包括了本章将要介绍的大部分内容，除了代码模块和依赖注入这两个抽象概念和变形过滤器这个工具类组件。
视图/View (HTML+CSS) 双向数据绑定 视图-模型/View-Model (指令directive) 模型/Model (作用域Scope) 控制器/ Controller 服务句柄/ServiceHandle
M.V.VM前端 后端数据接口/API+DB 后端 图3.4典型Angular应用的概要组件图 3.2.1Angular与TypeScript Angular是用TypeScript构建的。
TypeScript作为ES6的超集，直接使用JavsScript也是可以的，但是使用TypeScript最大的好处就是它的类型系统。
类型检查有助于在编译期预防bug，更有助于清晰表达自己的意图。
54 第3章Angular入门初步 3.2.2Angular实现了
M.V.VM模式 MVVM模式是Model-View-ViewMode模式的简称。
由视图（View）、视图模型（ViewModel）、模型（Model）三部分组成，通过这三部分实现UI逻辑、呈现逻辑和状态控制、数据与业务逻辑的分离。
图3.4中从下至上组成MVVM的3部分： 模型（Model）用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。
它代表了对后端数据直接访问的权利，例如对数据库的访问（后面我们会看到，这是通过服务Service来代理完成的）。
模型本身并不依赖于视图和视图-模型。
视图-模型（View-Model）在中间负责与模型和视图互动，将模型的最新状态发送到视图，由其利用HTML和CSS来渲染内容。
视图（View）是Angular解析后渲染和绑定后生成的HTML。
Angular使用MVVM模式获得了4大好处：
1.低耦合视图可以独立于模型变化和修改，一个视图-模型可以绑定到不同的视图上。
当视图变化的时候模型可以不变，当模型变化的时候视图也可以不变。
2.可重用性可以把一些视图的逻辑放在视图-模型里面，让很多视图重用这段视图逻辑。
3.开发与设计工作可分离开发人员可以专注于业务逻辑和数据的开发（视图-模型）。
设计人员可以专注于界面（视图）的设计。
4.可测试性可以依据测试归约构造视图-模型来对界面（视图）进行测试。
3.2.3Angular实现了模块化 把系统分割成多模块（Modules）的目的是通过定义公共APIs、限制行为（功能）和数据（属性和变量）的可视化，从而实现问题领域分离（SeparationofConcerns）。
大部分的编程语言内置了对模块化的支持，作为一个完整的开发框架，Angular实现了自己的模块化系统。
这个系统有以下重要特性： 组件寄生于模块中：在定义与使用本章后面介绍的控制器、指令、过滤器和服务组件时，必须指明其所属的模块系统（Angular自带的核心组件除外）。
使用依赖注入：尽管服务组件是普通的JavaScript对象或函数，但为了不污染整体命名空间，这些服务不是定义在全局空间上，而是需要声明了对其的依赖，才能在其他模块中使用它们。
55 Ionic移动开发入门与实战（第2版） 3.2.4Angular实现了声明式界面 使用Angular框架标准的Web页面最显著的特点是它们表面上都是多了一些特别的属性tag（如：ngFor、ngIf、ngClass等）的静态HTML文档，却能具有动态行为能力。
在Angular中，这类HTML文件被称为模板，而ng-app这类标记被称之为指令。
模板通过指令指示Angular进行必要的操作。
比如：ng-app指令就被用来通知Angular自动引导一个Angular应用。
当Angular启动应用时，它会通过一个编译器解析处理这个模板文件，生成的结果就是图3.1里的视图部分。
3.2.5Angular实现了双向数据绑定 目前市面上大多数的前端框架或库在数据模型和视图之间实现的都是单向数据绑定，而双向数据绑定是Angular较有特色之处。
图3.5中左边的模型图显示了单向数据绑定的常用模式，即数据模型与HTML模板结合生成了一次性的视图，数据流是单向的。
而图3.5中右边的模型图显示的视图与模型之间是有相互交互机制的，从而使视图与模型互相形成数据成为可能，所以称之为双向数据绑定。
而这个交互机制就是通过图3.4中的视图模型来完成的。
图3.5单向数据绑定与双向数据绑定区别 那么为什么需要双向数据绑定呢？它的意义在于给开发人员带来便利性和减少了烦琐易错的手工编写两层之间数据同步的工作量： 用户通过视图里的控件调整了语言配置、调整了夜间模式、输入了数据项，这些行为可以用几乎自动的方式来更新到数据模型。
当数据模型变化了，比如地理位置变化了、网络情况变化了、同步/异步推送的数据流变化了（比如实时聊天类应用）、被其他视图的输入改变了，所有视图都能几乎自动地持续反应数据模型的变化。
请注意上面两段话里都出现的几乎自动这四个字，它使设计人员和开发人员的任务分离成为可能。
也正因为有这个便利性为Angular带来的成功，使后续出现的Vue.js、ReactJS等前端框架，在是否支持以及如何支持双向数据绑定上都面临一个艰难的决定（实现双向数据绑定 56 也会带来一系列副作用，这就不属于本书讨论的范围了）。
第3章Angular入门初步 本章前面的各节概念很多，初学者容易产生能看懂文本里的每个词，但却不知道实现一个Angular功能页面到底该如何去做。
产生这种盲人摸象的现象这并不奇怪，毕竟Angular框架的运行时底层依照设计时的强制约定默默做了很多台面底下的工作才把这些概念和组件紧密整合到一起。
因此笔者建议读者可以强忍烦闷先粗略浏览一遍3.1节至3.5节对概念形成初步印象，然后通过阅读分析3.6节给出的一个完整的Angular范例代码，再回头查看前面印象模糊的部分小节的说明。
经过一到两次的反复理解过程，就能上手编写基于Angular框架的应用了。
3.3模块与依赖注入 在图3.4的Angular应用的概要组件图中没有出现模块的字样，然而这不代表它没出现在图里。
实际上图中的指令、服务、控制器都是定义在Angular的模块里。
读者从图3.6展现的图中可以看到所有类型的Angular组件都是归属于作为容器的某个模块的。
Module DirectiveFilter Controller ProviderConfigRunFactoryServiceConstValue 图3.6Angular模块与组件定义关系 自然地，如果要会使用Angular，就需要解决两个问题：如何在模块里创建组件以及如何使用其他模块里的组件。
下文的3.3.1和3.3.2节将分别回答这两个问题。
3.3.1根模块 Angular或者Ionic新建的项目，都会存在一个根模块，默认名是AppModule。
如果你使用了模块化来创建应用，包括AppModule，每个都会存在一个@NgModule装饰器的类（虽然他很像Java中的注解，但是他的官方命名叫装饰器）。
我们新建的页面，如果不使用懒加载， 57 Ionic移动开发入门与实战（第2版） 都要在@NgModule中先声明后使用。
下面举个例子，简单介绍一下@NgModule中的内容： //app.module.ts import{NgModule} from'@angular/core'; import{BrowserModule}from'@angular/platform-browser'; @NgModule({ imports: [BrowserModule], providers:[Logger], declarations:[AppComponent], exports: [AppComponent], bootstrap:[AppComponent] }) exportclassAppModule{} Imports：本模块声明的组件模板需要的类所在的其他模块。
Providers：服务的创建者，并加入到全局服务列表中，可用于应用任何部分。
Declarations：声明本模块中拥有的视图类。
Angular有三种视图类：组件、指令和管道。
Exports：declarations的子集，可用于其他模块的组件模板。
Bootstrap：指定应用的主视图（称为根组件），它是所有其他视图的宿主。
只有根模块才能设置bootstrap属性。
3.3.2使用模块与组件依赖注入 依赖注入是提供类的新实例的一种方式，还负责处理类所需的全部依赖。
大多数依赖都是服务。
Angular使用依赖注入来提供新组件以及组件所需的服务。
比如我们要给某组件导入HttpService这个服务，看这段代码： constructor(privateservice:HttpService){... } 这个constructor就是构造函数，依赖注入在constructor中进行。
你也许会觉得前面写上private、public之类的很怪，这是TypeScript语法比较特殊，习惯就好。
当Angular创建组件时，会首先为组件所需的服务请求一个注入器injector。
我们必须先用注入器injector为HttpService注册一个提供商provider。
我们必须在providers写上才能用，看这段代码： @Component({selector:'some-list',templateUrl:'./ponent.html',providers:[HttpService]}) 58 第3章Angular入门初步 3.4组件与模板 组件是一个模板的控制类用于处理应用和逻辑页面的视图部分。
组件是构成Angular应用的基础和核心，可用于整个应用程序中。
组件知道如何渲染自己及配置依赖注入。
组件通过一些由属性和方法组成的API与视图交互。
模板则是使用我们熟悉的HTML语言。
在Angular中HTML语法大都可以使用，除了
除了需要明白HTML5/CSS3/JavaScript这三个Web开发的基本知识，要学会Ionic开发还有一个前提就是懂Angular和TypeScript（从2.0版本开始，Angular主要使用TypeScript作为开发语言）。
然而按笔者的估计，初学型的开发者要完整搞懂Angular的方方面面，怎么也得读一本几百页专讲Angular的书。
为了不偏离本书主旨，同时又根据2/8原则，笔者在本章将介绍使用Ionic框架时无法回避的Angular整体结构和最重要的组成元素，而有些旁枝末节或是关系不大的知识点将被略过或在后续章节的示例代码中出现的时候给出解释。
如有读者想要全面深入学习Angular知识以达到能够深度改写和扩展Ionic框架提供的指令组件的能力，笔者建议直接参考Angular官方中文网站完整的使用说明（/docs）、API文档（/api）或者国内外出版的优秀Angular书籍。
本章的主要知识点包括：AngularCLI安装与使用Angular整体结构模块与依赖注入（Module&DependencyInjection）组件与模板(Component&Template)指令与服务（Directive&Service）一个简单的Angular项目：实时自选股行情页 3.1AngularCLI安装与使用 在安装Angular前，我们需要确保在阅读第2章时已经成功安装了Node.js和NPM，如果还没有安装，请先阅读2.1.1章节。
Ionic移动开发入门与实战（第2版） 3.1.1AngularCLI的安装 AngularCLI是Angular的命令行界面工具，主要用来创建项目、添加文件以及启动服务等功能。
我们使用以下命令进行安装。
npminstall-g@angular/cli 在安装完成后，使用以下命令验证AngularCLI的正常安装与版本，如图3.1所示。
Ng--version 图3.1验证AngularCLI是否成功安装以及被安装的版本 3.1.2使用AngularCLI创建项目 首先讲一下如何使用CLI来创建一个新的项目。
进入你想要创建项目的文件夹下，执行以下命令来生成一个新项目，如图3.2所示。
ngnewHelloAngular 图3.2使用AngularCLI新建项目 52 第3章Angular入门初步在项目目录文件夹下，会生成如图3.2中所示的文件。
之后等待NPM将node_modules文件夹下的依赖安装完成即可。
3.1.3使用AngularCLI启动开发服务器 在新项目创建完成后即可启动服务器。
我们执行以下命令。
cdHelloAngularngserve--open 命令执行后，如果可以看到如图3.3所示的界面，那么环境算是搭建完成了。
在接下来的章节讲解后，我们会在最后一节做一个简单的项目，帮助读者学习Angular的代码编写。
图3.3Angular初始项目ngserve命令会启动开发服务器，可以在修改文件的时候对页面进行自动更新。
加入--open（或-o）参数可以自动帮助我们打开浏览器并访问该地址，其中默认地址为http://localhost:4200/。
53 Ionic移动开发入门与实战（第2版） 3.2Angular整体结构概述 接触过前端界面开发的读者应该都用过或者听说jQuery了。
Angular与jQuery大不相同：Angular是一个开发框架，而jQuery是一个工具库。
工具库像瑞士军刀，使用者觉得合适的时候就找到它的某个部件用一下，但是它基本不会对使用者提出过多要求或者严格限制，比如瑞士军刀不会要求小刀和开瓶器一定需要一起配合使用；而开发框架则大不相同，它已经通过自有的部分组成了一个环环相扣的有机整体，严格约定了使用者在哪里可以自由组合，在哪里必须按部就班。
只有遵照它的要求嵌入和组合，才能保证体系在拼装运行时能正常工作。
因此庞大严谨的Angular相对于灵活的jQuery要难学一些，不把Angular开发应用的整体结构和各部分组件职能了解清楚，会觉得没处下手或是使用时如堕五里雾中，即使勉强完成应用，也在其中埋了一些坑等着后人来慢慢填。
因此本节将先从Angular的整体入手，向读者简单介绍这个重型框架的开发语言TypeScript和几大特性。
图3.4是笔者简化过的典型Angular应用结构图，图中前端区域包括了本章将要介绍的大部分内容，除了代码模块和依赖注入这两个抽象概念和变形过滤器这个工具类组件。
视图/View (HTML+CSS) 双向数据绑定 视图-模型/View-Model (指令directive) 模型/Model (作用域Scope) 控制器/ Controller 服务句柄/ServiceHandle
M.V.VM前端 后端数据接口/API+DB 后端 图3.4典型Angular应用的概要组件图 3.2.1Angular与TypeScript Angular是用TypeScript构建的。
TypeScript作为ES6的超集，直接使用JavsScript也是可以的，但是使用TypeScript最大的好处就是它的类型系统。
类型检查有助于在编译期预防bug，更有助于清晰表达自己的意图。
54 第3章Angular入门初步 3.2.2Angular实现了
M.V.VM模式 MVVM模式是Model-View-ViewMode模式的简称。
由视图（View）、视图模型（ViewModel）、模型（Model）三部分组成，通过这三部分实现UI逻辑、呈现逻辑和状态控制、数据与业务逻辑的分离。
图3.4中从下至上组成MVVM的3部分： 模型（Model）用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。
它代表了对后端数据直接访问的权利，例如对数据库的访问（后面我们会看到，这是通过服务Service来代理完成的）。
模型本身并不依赖于视图和视图-模型。
视图-模型（View-Model）在中间负责与模型和视图互动，将模型的最新状态发送到视图，由其利用HTML和CSS来渲染内容。
视图（View）是Angular解析后渲染和绑定后生成的HTML。
Angular使用MVVM模式获得了4大好处：
1.低耦合视图可以独立于模型变化和修改，一个视图-模型可以绑定到不同的视图上。
当视图变化的时候模型可以不变，当模型变化的时候视图也可以不变。
2.可重用性可以把一些视图的逻辑放在视图-模型里面，让很多视图重用这段视图逻辑。
3.开发与设计工作可分离开发人员可以专注于业务逻辑和数据的开发（视图-模型）。
设计人员可以专注于界面（视图）的设计。
4.可测试性可以依据测试归约构造视图-模型来对界面（视图）进行测试。
3.2.3Angular实现了模块化 把系统分割成多模块（Modules）的目的是通过定义公共APIs、限制行为（功能）和数据（属性和变量）的可视化，从而实现问题领域分离（SeparationofConcerns）。
大部分的编程语言内置了对模块化的支持，作为一个完整的开发框架，Angular实现了自己的模块化系统。
这个系统有以下重要特性： 组件寄生于模块中：在定义与使用本章后面介绍的控制器、指令、过滤器和服务组件时，必须指明其所属的模块系统（Angular自带的核心组件除外）。
使用依赖注入：尽管服务组件是普通的JavaScript对象或函数，但为了不污染整体命名空间，这些服务不是定义在全局空间上，而是需要声明了对其的依赖，才能在其他模块中使用它们。
55 Ionic移动开发入门与实战（第2版） 3.2.4Angular实现了声明式界面 使用Angular框架标准的Web页面最显著的特点是它们表面上都是多了一些特别的属性tag（如：ngFor、ngIf、ngClass等）的静态HTML文档，却能具有动态行为能力。
在Angular中，这类HTML文件被称为模板，而ng-app这类标记被称之为指令。
模板通过指令指示Angular进行必要的操作。
比如：ng-app指令就被用来通知Angular自动引导一个Angular应用。
当Angular启动应用时，它会通过一个编译器解析处理这个模板文件，生成的结果就是图3.1里的视图部分。
3.2.5Angular实现了双向数据绑定 目前市面上大多数的前端框架或库在数据模型和视图之间实现的都是单向数据绑定，而双向数据绑定是Angular较有特色之处。
图3.5中左边的模型图显示了单向数据绑定的常用模式，即数据模型与HTML模板结合生成了一次性的视图，数据流是单向的。
而图3.5中右边的模型图显示的视图与模型之间是有相互交互机制的，从而使视图与模型互相形成数据成为可能，所以称之为双向数据绑定。
而这个交互机制就是通过图3.4中的视图模型来完成的。
图3.5单向数据绑定与双向数据绑定区别 那么为什么需要双向数据绑定呢？它的意义在于给开发人员带来便利性和减少了烦琐易错的手工编写两层之间数据同步的工作量： 用户通过视图里的控件调整了语言配置、调整了夜间模式、输入了数据项，这些行为可以用几乎自动的方式来更新到数据模型。
当数据模型变化了，比如地理位置变化了、网络情况变化了、同步/异步推送的数据流变化了（比如实时聊天类应用）、被其他视图的输入改变了，所有视图都能几乎自动地持续反应数据模型的变化。
请注意上面两段话里都出现的几乎自动这四个字，它使设计人员和开发人员的任务分离成为可能。
也正因为有这个便利性为Angular带来的成功，使后续出现的Vue.js、ReactJS等前端框架，在是否支持以及如何支持双向数据绑定上都面临一个艰难的决定（实现双向数据绑定 56 也会带来一系列副作用，这就不属于本书讨论的范围了）。
第3章Angular入门初步 本章前面的各节概念很多，初学者容易产生能看懂文本里的每个词，但却不知道实现一个Angular功能页面到底该如何去做。
产生这种盲人摸象的现象这并不奇怪，毕竟Angular框架的运行时底层依照设计时的强制约定默默做了很多台面底下的工作才把这些概念和组件紧密整合到一起。
因此笔者建议读者可以强忍烦闷先粗略浏览一遍3.1节至3.5节对概念形成初步印象，然后通过阅读分析3.6节给出的一个完整的Angular范例代码，再回头查看前面印象模糊的部分小节的说明。
经过一到两次的反复理解过程，就能上手编写基于Angular框架的应用了。
3.3模块与依赖注入 在图3.4的Angular应用的概要组件图中没有出现模块的字样，然而这不代表它没出现在图里。
实际上图中的指令、服务、控制器都是定义在Angular的模块里。
读者从图3.6展现的图中可以看到所有类型的Angular组件都是归属于作为容器的某个模块的。
Module DirectiveFilter Controller ProviderConfigRunFactoryServiceConstValue 图3.6Angular模块与组件定义关系 自然地，如果要会使用Angular，就需要解决两个问题：如何在模块里创建组件以及如何使用其他模块里的组件。
下文的3.3.1和3.3.2节将分别回答这两个问题。
3.3.1根模块 Angular或者Ionic新建的项目，都会存在一个根模块，默认名是AppModule。
如果你使用了模块化来创建应用，包括AppModule，每个都会存在一个@NgModule装饰器的类（虽然他很像Java中的注解，但是他的官方命名叫装饰器）。
我们新建的页面，如果不使用懒加载， 57 Ionic移动开发入门与实战（第2版） 都要在@NgModule中先声明后使用。
下面举个例子，简单介绍一下@NgModule中的内容： //app.module.ts import{NgModule} from'@angular/core'; import{BrowserModule}from'@angular/platform-browser'; @NgModule({ imports: [BrowserModule], providers:[Logger], declarations:[AppComponent], exports: [AppComponent], bootstrap:[AppComponent] }) exportclassAppModule{} Imports：本模块声明的组件模板需要的类所在的其他模块。
Providers：服务的创建者，并加入到全局服务列表中，可用于应用任何部分。
Declarations：声明本模块中拥有的视图类。
Angular有三种视图类：组件、指令和管道。
Exports：declarations的子集，可用于其他模块的组件模板。
Bootstrap：指定应用的主视图（称为根组件），它是所有其他视图的宿主。
只有根模块才能设置bootstrap属性。
3.3.2使用模块与组件依赖注入 依赖注入是提供类的新实例的一种方式，还负责处理类所需的全部依赖。
大多数依赖都是服务。
Angular使用依赖注入来提供新组件以及组件所需的服务。
比如我们要给某组件导入HttpService这个服务，看这段代码： constructor(privateservice:HttpService){... } 这个constructor就是构造函数，依赖注入在constructor中进行。
你也许会觉得前面写上private、public之类的很怪，这是TypeScript语法比较特殊，习惯就好。
当Angular创建组件时，会首先为组件所需的服务请求一个注入器injector。
我们必须先用注入器injector为HttpService注册一个提供商provider。
我们必须在providers写上才能用，看这段代码： @Component({selector:'some-list',templateUrl:'./ponent.html',providers:[HttpService]}) 58 第3章Angular入门初步 3.4组件与模板 组件是一个模板的控制类用于处理应用和逻辑页面的视图部分。
组件是构成Angular应用的基础和核心，可用于整个应用程序中。
组件知道如何渲染自己及配置依赖注入。
组件通过一些由属性和方法组成的API与视图交互。
模板则是使用我们熟悉的HTML语言。
在Angular中HTML语法大都可以使用，除了