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. iOS 相机手动对焦

    AVCaptureDevice的方法,之前查了网上和stackoverflow上,没有,于是自己试着做了下,成功了,分享下. //实例化 AVCaptureDevice *captureDevice ...

  2. Java学习----对象与对象之间的关系

    1.依赖 对象之间最弱的一种关联方式,是临时性的关联.代码中一般指由局部变量,函数参数,返回值建立的对于其他对象的调用关系. public class A { // 方法一 public void t ...

  3. 数组Api .map()的使用

    之前并没有过多的使用过这个Api,在此记录下对其的理解,方便以后多多使用. 首先是对map的说明: var mappedArray = array.map(callback[, thisObject] ...

  4. jQuery--引入,基本语法,以及常用事件

    一.初识jQuery jQuery是一个JavaScript函数库.主要包含的功能有:HTML元素的选取.操作,CSS操作,HTML事件函数,JavaScript特效和动画,HTML DOM遍历和修改 ...

  5. List<T> ForEach break

    有没有方法扩展跳出 list.foreach循环? 理论上它其实不是一个循环,而是一个方法 代理调用内部循环   public delegate void ForEachAction<T> ...

  6. uitextfield动态限制输入的字数-b

    1.定义一个事件: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 ...

  7. BZOJ 1059 矩阵游戏

    Description 小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏--矩阵游戏.矩阵游戏在一个\(N \times N\)黑白方阵进行(如同国际象棋一般,只是颜色是随意的). ...

  8. JAVA存取对象属性时,如果开程多线程,记得对相关存取方法作原子化操作定义

    最显著的应用当然是银行存款和取款,不要存在存取数字和实际发生不一样的情况. synchronized关键字. class BankAccount { private int balance = 100 ...

  9. network: Android 网络判断(wifi、3G与其他)

    package mark.zeng; import Java.util.List; import Android.content.Context; import android.location.Lo ...

  10. java学习之数组(一)【内存】

    在java语言当中,为了更方便多个数据的管理,这里提供数组. 比如说,现在我们有一组数据,7,8,9,9,为了保存这四个数据,我们分别要定义变量来保存,少了还好说.但是假如,有100多个数据呢,我们一 ...