上一篇文章 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. c++防止客户端多开巧妙代码

    在读OBS源码时看到一个比较有意思的关于防止用户多开程序的写法,简单有效,记录下 //make sure only one instance of the application can be ope ...

  2. jQueryMobile控件之按钮

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. SharePoint 2013 调用WCF服务简单示例

    内容比较简单,主要记录自己使用SharePoint 2013WCF服务遇到的小问题和小经验,分享给大家,希望能够给需要的人有所帮助.好吧,进入正题! 第一部分 SharePoint 2013调用自带W ...

  4. Python自省学习

    1. 访问对象的属性 class MyClass(): a=' b=' def __init__(self): pass def write(self): print self.a,self.b my ...

  5. 实时Android语音对讲系统架构

    本文属于Android局域网内的语音对讲项目系列,<通过UDP广播实现Android局域网Peer Discovering>实现了局域网内的广播及多播通信,本文将重点说明系统架构,音频信号 ...

  6. [UWP]用Shape做动画

    相对于WPF/Silverlight,UWP的动画系统可以说有大幅提高,不过本文无意深入讨论这些动画API,本文将介绍使用Shape做一些进度.等待方面的动画,除此之外也会介绍一些相关技巧. 1. 使 ...

  7. 批量数据复制SqlBulkCopy使用经验点滴(特别是超时处理)

    如果要批量复制大量的数据,用ado.net或者其他orm框架逐条读取并写入,有时会耗时太长,满足不了要求,此时SqlBulkCopy就可以出来大显身手了,相信许多人了解或使用过它. 但实际使用时,还是 ...

  8. jQuery 事件冒泡

    1 . 什么是冒泡 在页面上可以有多个事件,也可以多个元素响应同一个事件.假设网页上有两个元素,其中一个元素嵌套在另一个元素里,并且都被绑定了 click 事件,同时<body>元素上也绑 ...

  9. ftp弱密码案例

  10. Eureka单机高可用伪集群配置

    Eureka Server高可用集群理论上来讲,因为服务消费者本地缓存了服务提供者的地址,即使Eureka Server宕机,也不会影响服务之间的调用,但是一旦新服务上线,已经缓存在本地的服务提供者不 ...