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. phpcms V9 内容模型管理(转)

    转自:http://www.cnblogs.com/Braveliu/p/5102627.html [1]理解模型 模型,系统知识的抽象表示.既然抽象了,那就得脑补一下.大家都是面向对象设计的专业人员 ...

  2. Javascript参数传递中值和引用的一种理解

    值(value)和引用(reference)是各种编程语言老生常谈的话题,js也不例外. 我将剖析一个例子的实际运行过程,跟大家分享我对js参数传递中的值和引用的理解. 参考官网数据类型的两种分类,本 ...

  3. PAT - 基础 - 龟兔赛跑

    题目: 乌龟与兔子进行赛跑,跑场是一个矩型跑道,跑道边可以随地进行休息.乌龟每分钟可以前进3米,兔子每分钟前进9米:兔子嫌乌龟跑得慢,觉得肯定能跑赢乌龟,于是,每跑10分钟回头看一下乌龟,若发现自己超 ...

  4. 微信开放平台获取component_verify_ticket

    官方文档说明: 在公众号第三方平台创建审核通过后,微信服务器会向其“授权事件接收URL”每隔10分钟定时推送component_verify_ticket.第三方平台方在收到ticket推送后也需进行 ...

  5. 【Windows核心编程】Windows常见数据类型

    一,常见数据类型 WORD:               16位无符号整形数据 DWORD:             32位无符号整型数据(DWORD32) DWORD64:         64位无 ...

  6. PHP学习之中数组-遍历一维数组【2】

    在PHP学习之中数组[1]中学会怎么创建一个数组,如果PHP学习之中数组[1]中的元素多的话,我们访问元素又是一个问题了,下面我们就使用for语句while,foreach来遍历我们的数组: < ...

  7. 《学习Opencv》第五章 习题6

    这是第五章 习题5.6的结合版,其中实现了摄像头抓拍功能,能够成功运行. #include "stdafx.h" #include "cv.h" #includ ...

  8. 利用TraceSource写日志

    利用TraceSource写日志 从微软推出第一个版本的.NET Framework的时候,就在“System.Diagnostics”命名空间中提供了Debug和Trace两个类帮助我们完成针对调试 ...

  9. 堆和栈的区别【zz】

    一.预备知识—程序的内存分配一个由c/C++编译的程序占用的内存分为以下几个部分1.栈区(stack)— 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等.其操作方式类似于数据结构中的栈.2. ...

  10. thinkphp中的session()方法

    系统提供了Session管理和操作的完善支持,全部操作可以通过一个内置的session函数完成. 用法 session($name, $value='') 参数 name(必须):如果传入数组 则表示 ...