上一篇文章 Angular2入门系列教程-多个组件,主从关系

  在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码

  Angular2中提供了依赖注入的概念,使得我们可以很优雅得做到这一点。这里简单描述下,依赖注入可以使我们在编写代码的时候不用使用new 去生成一个类,这样就达到了解耦的目的,更多关于依赖注入的知识我觉得不应该在这里讲解

  和其他方式类似,Angular2使用的是装饰器@Injectable()来描述以一个类是否可注入,我们本篇文章的目的,就是为了剥离数据获取的操作,提供一个可复用的可注入的服务。

  为了方便,我们直接在之前的data文件夹目录下建立一个blog.service.ts的文件,这个文件要干嘛呢?就是将之前的ArticleComponent中的获取blog的方法抽离出来,成为一个完全独立的模块,至于在ArticleComponent中,我们使用依赖注入的方式,将我们的服务注入进去,直接使用,看代码

  

import { Injectable } from '@angular/core';

import { Blog,BLOGS } from './blog';

@Injectable()
export class BlogService {
getBlogs(): Blog[] {
return BLOGS;
}
getSelectedBlog(id:number):Blog
{
return this.getBlogs().find(x=>x.id==id);
}
}

  正如前面所说,我们使用@Injectable()来装饰了我们的BlogService,使得我们可以在其他组件中注入这个服务,看AppComponent,我们发现和之前有一点儿改变

  

import { Component } from '@angular/core';
import {BLOGS,Blog} from '../data/blog';
import {BlogService} from './../data/blog.service'; @Component({
selector: 'ngarticle',
templateUrl: './article.component.html',
styleUrls:['./article.component.css']
}) export class ArticleComponent {
blogList:Blog[];
selectedBlog:Blog;
constructor(private bService:BlogService)
{
this.blogList=bService.getBlogs();
}
selectBlog(id:number)
{
this.selectedBlog=this.bService.getSelectedBlog(id);
}
}

  我们在AppComponent的构造函数中使用了BlogService的参数,使得我们可以在其类的内部任意使用我们的服务(其实你并不用刻意关心依赖注入怎么工作的,你需要了解的是它给编程带来解耦的作用)

  而当我们兴致勃勃地用ng serve 运行的时候,我们却发现,怎么报错了?

  

  我们看到Angular2给我们的提示是BlogService没有Provider;

  我们需要在AppComponent组件的@Component()装饰器中添加这样一句话

  providers:[BlogService]

  provider的作用,就是告诉Angular,我们在初始化AppComponent的时候,同时也要创建一个BlogService的实例,这样,我们就可以在组件中使用了

  

  好了,到这里,我们只需要在AppComponnet.html把获取detail的函数的参数改了就行了

  

<div class="article">
<ul class="articleList">
<li *ngFor="let blog of blogList" (click)="selectBlog(blog.id)">
<a>
{{blog.id}}:{{blog.title}}
</a>
</li>
</ul>
<div>
<article-detail [blog]="selectedBlog"></article-detail> </div>
</div>

运行效果嘛,其实和上篇代码的还是一样,但是还是贴下吧

  接下来我们将要继续学习如何使用Angular中的路由和Angualr中的HTTP请求;而在HTTP请求一章,我们将展开js中基于Promise的异步编程和Observable(可观察对象)的学习,途中,我们也会讲解如何在Angular2中使用Jquery!

  我好像很不会瞎比比,就这样吧

  更新ing。。。

  


  项目已经放到了gitbub上,地址 https://github.com/SeeSharply/LearnAngular

  本文章的提交 https://github.com/SeeSharply/LearnAngular/tree/df1cd319b3571622242ae4d1b424a5d9e853ed93

Angular2入门系列教程4-服务的更多相关文章

  1. Angular2入门系列教程7-HTTP(一)-使用Angular2自带的http进行网络请求

    上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...

  2. Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数

    上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...

  3. Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  4. Angular2入门系列教程3-多个组件,主从关系

    上一篇 Angular2项目初体验-编写自己的第一个组件 好了,前面简单介绍了Angular2的基本开发,并且写了一个非常简单的组件,这篇文章我们将要学会编写多个组件并且有主从关系 现在,假设我们要做 ...

  5. Angular2入门系列教程1-使用Angular-cli搭建Angular2开发环境

    一直在学Angular2,百忙之中抽点时间来写个简单的教程. 2016年是前端飞速发展的一年,前端越来越形成了(web component)组件化的编程模式:以前Jquery通吃一切的田园时代一去不复 ...

  6. Angular2入门系列教程2-项目初体验-编写自己的第一个组件

    上一篇 使用Angular-cli搭建Angular2开发环境 Angular2采用组件的编写模式,或者说,Angular2必须使用组件编写,没有组件,你甚至不能将Angular2项目启动起来 紧接着 ...

  7. ASP.NET MVC 入门系列教程

    ASP.NET MVC 入门系列教程 博客园ASP.NET MVC 技术专题 http://kb.cnblogs.com/zt/mvc/ 一个居于ASP.NET MVC Beta的系列入门文章,有朋友 ...

  8. Qt快速入门系列教程目录

    Qt快速入门系列教程目录

  9. Android视频录制从不入门到入门系列教程(一)————简介

    一.WHY Android SDK提供了MediaRecorder帮助开发者进行视频的录制,不过这个类很鸡肋,实际项目中应该很少用到它,最大的原因我觉得莫过于其输出的视频分辨率太有限了,满足不了项目的 ...

随机推荐

  1. 获得本机IP,并且将ip放在CIpAdress里

    char szHostName[MAX_PATH + 1]; gethostname(szHostName, MAX_PATH); //得到计算机名 hostent *p = gethostbynam ...

  2. robotium 新建 android 测试项目:

    注意:新建项目后再运行前一定要修改Manifest文件中的instrumentation 中的target package, 这个是测试的入口 1. 程序开始要通知系统我要测的app是什么 如何知道a ...

  3. lazyload 分页加载

    http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/ echo $d['pic']; ?>" src=&qu ...

  4. iphone/ipod网页开发教程及规则

    侦测iPhone/iPod 开发特定设备的移动网站,首先要做的就是设备侦测了.下面是使用Javascript侦测iPhone/iPod的UA,然后转向到专属的URL. if((navigator.us ...

  5. 字符编码笔记:ASCII,Unicode和UTF-8,附带 Little endian和Big endian的解释

    作者: 阮一峰 日期: 2007年10月28日 今天中午,我突然想搞清楚Unicode和UTF-8之间的关系,于是就开始在网上查资料. 结果,这个问题比我想象的复杂,从午饭后一直看到晚上9点,才算初步 ...

  6. python网络编程-01

    python网络编程 1.socket模块介绍 ①在网络编程中的一个基本组件就是套接字(socket),socket是两个程序之间的“信息通道”. ②套接字包括两个部分:服务器套接字.客户机套接字 ③ ...

  7. jQuery选择器的的优点

    jQuery选择器的的优点 选择器想必大家都不陌生,今天呢,我就给大家介绍一下jQuery选择器的优点: jQuery选择器更简洁的写法: jQuery完善的处理机制: jQuery选择器判断dom节 ...

  8. 发布Ext JS 5.1 beta版本

    原文:Announcing Ext JS 5.1 Beta 概述 我们很高兴的宣布,Ext JS 5.1 beta发布了.自从Ext JS 5.0.1,我们一直在努力添加一些令人兴奋的和一些在Senc ...

  9. mysqlbinlog 工具分析binlog日志

    MySQL的binlog 日志对于生产环境非常有用,任何时间对数据库的修改都会记录在binglog中:当数据发生增删改,创建数据库对象都会记录到binlog中,数据库的复制也是基于binlog进行同步 ...

  10. python爬虫scrapy之scrapy终端(Scrapy shell)

    Scrapy终端是一个交互终端,供您在未启动spider的情况下尝试及调试您的爬取代码. 其本意是用来测试提取数据的代码,不过您可以将其作为正常的Python终端,在上面测试任何的Python代码. ...