When creating a service, need to inject the sercive into the bootstrap():

import {bootstrap, Component, View} from "angular2/angular2";
import {TodoInput} from "./todoInput";
import {TodoService} from "./todoService"; @Component({
selector:'app'
})
@View({
directives: [TodoInput],
template: `
<div><todo-input></todo-input></div>
`
})
class App{ } bootstrap(App, [TodoService]);

todoService.js

export class TodoService{
todos: string[] = []; addTodo(value: any):void {
this.todos.push(value);
}
}

inputTodo.js:

import {Component, View} from "angular2/angular2";
import {TodoService} from "./todoService"; @Component({
selector: 'todo-input'
}) // Define a ref by using xxx-YYY
// Reference a ref by using xxxYyy
@View({
template: `
<input type="text" #log-me />
<button (click)="onClick($event, logMe.value)">Log Input</button>
`
})
export class TodoInput{
constructor(
public todoService:TodoService //pulbic make todoService global available for the class
){
console.log(todoService);
} onClick(event , value){
this.todoService.addTodo(value);
console.log(this.todoService.todos);
}
}

[Angular 2] Use Service use Typescript的更多相关文章

  1. [Angular 2] Inject Service with "Providers"

    In this lesson, we’re going to take a look at how add a class to the providers property of a compone ...

  2. [Angular 2] Inject Service

    TypeScript is used heavily as we build up our application, but TypeScript isn’t required. If you wan ...

  3. angular js自定义service的简单示例

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

  4. Angular 学习笔记——service &constant

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

  5. Angular:使用service进行http请求的简单封装

    ①使用ng g service services/storage创建一个服务组件 ②在app.module.ts 中引入HttpClientModule模块 ③在app.module.ts 中引入创建 ...

  6. [Angular] 'providedIn' for service

    There is now a new, recommended, way to register a provider, directly inside the @Injectable() decor ...

  7. Angular:使用service进行数据的持久化设置

    ①使用ng g service services/storage创建一个服务组件 ②在app.module.ts 中引入创建的服务 ③利用本地存储实现数据持久化 ④在组件中使用

  8. Angular Service入门

    1.Angular内置service Angular为了方便开发者开发,本身提供了非常多的内置服务.可以通过https://docs.angularjs.org/api/ng/service查看Ang ...

  9. Angular service, 服务

      早上开车上班, 发现车快没油了, 于是拐进加油站. 有一辆出租车也在加油..   Angular service在一个应用里是以单例形式存在的. 这个单例的实例是由service factory( ...

随机推荐

  1. js 之 复制一段代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. OS X Yosemite下安装Hadoop2.5.1伪分布式环境

    最近开始学习Hadoop,一直使用的是公司配好的环境.用了一段时间后发现对Hadoop还是一知半解,故决定动手在本机上安装一个供学习研究使用.正好自己用的是mac,所以没啥说的,直接安装. 总体流程 ...

  3. underscorejs-partition学习

    2.25 partition 2.25.1 语法: _.partition(list, predicate, [context]) 2.25.2 说明: 拆分list为两个数组. 第一个数组的元素都满 ...

  4. PHPCMS收集标签使用

    调用子栏目(在栏目首页模板需要用到) {pc:content action="category" catid="$catid" num="25&quo ...

  5. android 开源项目学习

    1.Android团队提供的示例项目 如果不是从学习Android SDK中提供的那些样例代码开始,可能没有更好的方法来掌握在Android这个框架上开发.由Android的核心开发团队提供了15个优 ...

  6. JavaScript----Performance Tool and Process

    1. Syntax-------------JSLint, JSHint, 2. Combine------------YUI 3. Minify---------------JSMin

  7. SharePoint REST api

    http://msdn.microsoft.com/en-us/magazine/dn198245.aspx Understanding and Using the SharePoint 2013 R ...

  8. codeforces Unusual Product

    题意:给你n*n的矩阵,里面是1或0,然后q次询问,如果操作数为1,那么就把x行的数0变成1,1变成0:如果操作数为2,那么在x列上的数0变成1,1变成0:如果是3,输出: 思路:在求的时候,对角线上 ...

  9. etErrorMode(SEM_NOGPFAULTERRORBOX); 去除错误对话框.

    etErrorMode(SEM_NOGPFAULTERRORBOX);  去除错误对话框. http://www.cnblogs.com/-clq/archive/2012/01/22/2328783 ...

  10. Gvim一些基本配置

    介绍一些关于Gvim(windows 7 32位 Vim 7.4)的基本配置,除了特别说明,代码一律添加在安装目录下的_vimrc文件中. 1.取消自动备份,这行代码需要添加在 _vimrc文件中的b ...