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. Eclipse 编译StanfordNLP

    1.源码最新下载地址:http://nlp.stanford.edu/software/index.shtml; 2.解压stanford-corenlp.zip; 3.打开Eclipse新建JAVA ...

  2. 网站开发常用jQuery插件总结(三)拖拽插件gridster

    1.gridster插件功能 实现类似于win8 磁贴拖拽的功能 2.gridster官方地址 http://gridster.net/ 在官方的网站上也有插件的帮助和实例,但是按照官方的说明,我在本 ...

  3. Chatwin商务通

    <script language="javascript" src="http://lwt.zoosnet.net/JS/LsJS.aspx?siteid=你商务通 ...

  4. SharePoint 2013 如何使用TaxonomyWebTaggingControl 控件

    在该文章中,我将介绍如何使用TaxonomyWebTaggingControl控件, 首先我相信您已经在SharePoint Managed Metadata Service里定义Term Sets, ...

  5. hdu不要62

    Problem Description 杭州人称那些傻乎乎粘嗒嗒的人为62(音:laoer).杭州交通管理局经常会扩充一些的士车牌照,新近出来一个好消息,以后上牌照,不再含有不吉利的数字了,这样一来, ...

  6. 关于Unity导出的Android应用在小米、联想等机型上崩溃的问题

    应用在三星手机上运行没有出现问题,但在小米和联想手机上会崩溃.这个问题在刚开始时一直查不到问题所在,后来发现是因为Android清单文件中声明的权限出现了重复,去掉了重复的权限之后,就没有出现崩溃的情 ...

  7. 【Java】对Web Service的理解

    WSDL(Web Service Description Language)是描述Web Service的语言. 你会怎样向别人介绍你的Web service有什么功能,以及每个函数调用时的参数呢?你 ...

  8. 面向对象涉及SOLID原则

    S = Single Responsibility Principle 单一职责原则 O = Opened Closed Principle 开放闭合原则  L = Liscov Substituti ...

  9. AOP小结

    AOP主要采用代理模式来实现的,静态代理(设计模式中的代理模式),动态代理(反射机制,实现InvocationHandler接口),cglib实现(采用继承方式,针对目标类生成子类,并覆盖方法进行增强 ...

  10. BZOJ 1093 [ZJOI2007]最大半连通子图

    1093: [ZJOI2007]最大半连通子图 Time Limit: 30 Sec  Memory Limit: 162 MBSubmit: 1986  Solved: 802[Submit][St ...