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. 第17章课后题(高级Perl技巧)

    17.1 写一个程序,从文件中读取一组字符串(每行一个),然后让用户键入模式以便进行字符串匹配. 对于每个模式,程序应该说明文件里共有多少字符串匹配成功,分别是哪些字符串. 对于所键入的每个新模式,不 ...

  2. 复制JAVABEAN中的属性到另外一个JAVABEAN中

    下午写了一个属性复制方法,记录如下: class POUtil{ /** * * Function : 将一个source中的属性到复制到dest * @author : Liaokailin * C ...

  3. Centos7搭建php+mysql环境(整理篇)

    终于将mysql+php环境搭建成功,将之前的整理一下,环境:centos7,本机IP:192.168.1.24,数据库用户名及密码都设为root,测试文件路径:/var/www/html 1.取消c ...

  4. Java 可变参数

    java1.5增加了新特性:可变参数:适用于参数个数不确定,类型确定的情况,java把可变参数当做数组处理.注意:可变参数必须位于最后一项.当可变参数个数多余一个时,必将有一个不是最后一项,所以只支持 ...

  5. 用PHP添加购物商品

    <?php session_start(); header ( "Content-type: text/html; charset=UTF-8" ); //设置文件编码格式 ...

  6. jquery html 动态添加元素绑定事件

    由于实际的需要,有时需要往网页中动态的插入HTML内容,并在插入的节点中绑定事件处理函数.我们知道,用Javascript向HTML文档中 插入内容,有两种方法, 一种是在写HTML代码写入JS,然后 ...

  7. PHP面向对象(OOP):克隆对象__clone()方法

    有的时候我们需要在一个项目里面,使用两个或多个一样的对象,如果你使用“new”关键字重新创建对象的话,再赋值上相同的属性,这样做比较烦琐而且也容易出错,所以要根据一个对象完全克隆出一个一模一样的对象, ...

  8. 请教 WINDOWSPHONE 有个人录了个传感器等硬件的视频,并且项目是完全开源的,大家有知道地址的吗?或者叫什么。

    请教 WINDOWSPHONE 有个人录了个传感器等硬件的视频,并且项目是完全开源的,大家有知道地址的吗?或者叫什么.

  9. 转:推荐!国外程序员整理的 C++ 资源大全

    原文来自于:http://blog.jobbole.com/78901/ 关于 C++ 框架.库和资源的一些汇总列表,由 fffaraz 发起和维护. 内容包括:标准库.Web应用框架.人工智能.数据 ...

  10. My ECMAScript 7 wishlist

    With ECMAScript 6 now feature complete, any further changes to the core of JavaScript will happen in ...