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. Java实现Linux下服务器程序的双守护进程

    作者:Vinkn 来自http://www.cnblogs.com/Vinkn/ 一.简介 现在的服务器端程序很多都是基于Java开发,针对于Java开发的Socket程序,这样的服务器端上线后出现问 ...

  2. Android自定义View基础

    自定义控件, 视频教程 http://www.jikexueyuan.com/course/1748.html 1. 编写自定义view 2. 加入逻辑线程 3. 提取和封装自定义view 4. 利用 ...

  3. C#中静态方法和非静态方法的区别(一)

    实例方法比静态方法多传递一个隐含的指针参数,该指针指向该方法所从属的已被实例化的对象.这一区别的外在表现为实例方法内可使用this关键字代表所从属的实例对象,而静态方法不可使用this因为静态方法不针 ...

  4. [Forward]Use the SharePoint My Tasks Web Part outside of My Sites

    from http://yalla.itgroove.net/2014/04/use-sharepoint-tasks-web-part-outside-sites/ Use the SharePoi ...

  5. unity3d中的http通信 二

    转载自 http://www.cnblogs.com/88999660/archive/2013/03/11/2954279.html 如果侵权,请及时通知我删除! using System; usi ...

  6. AOP举例子

    切面类TestAspect package com.spring.aop; /** * 切面 * */ public class TestAspect { public void doAfter(Jo ...

  7. 【HDOJ】2717 Catch That Cow

    bfs. /* 2717 */ #include <iostream> #include <cstdio> #include <cstring> #include ...

  8. 设置Git提交时不用输入用户名和密码

    在用git提交时代码至github上时每次都要输入用户名和密码,当提交操作较为频繁时非常不方便,可以按下文中的介绍,设置成提交时不用输入用户名和密码: 1.在当前库下,已经运行过 git remote ...

  9. BestCoder Round #51 (div.2)

    明显是无良心的数学round= = 1000 Zball in Tina Town #include<iostream> #include<cstdio> #include&l ...

  10. OpenSSH远程拒绝服务漏洞

    漏洞版本: OpenSSH 漏洞描述: Bugtraq ID:61286 OpenSSH是一种开放源码的SSH协议的实现 OpenSSH存在一个安全漏洞,允许远程攻击者利用漏洞提交恶意请求,使应用程序 ...