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学习----方法的覆盖

    方法的覆盖:子类继承父类,子类重写父类的同名方法. 覆盖的原则: 1. 方法的参数必须跟父类保持一致 2. 子类方法的修饰符的范围必须大于等于父类方法同名的修饰符(public > privat ...

  2. [开源]jquery-ajax-cache:快速优化页面ajax请求,使用localStorage缓存请求

    项目:jquery-ajax-cache 地址:https://github.com/WQTeam/jquery-ajax-cache     最近在项目中用到了本地缓存localStorage做数据 ...

  3. C#应用程序获取项目路径的方法总结

    一.非Web程序   //基目录,由程序集冲突解决程序用来探测程序集 1.AppDomain.CurrentDomain.BaseDirectory     //当前工作目录的完全限定路径2.Envi ...

  4. 更换Python默认软件镜像源

    限于一些众所周知的原因,在我们pip安装软件的时候出现类似报错: data = self.read(amt=amt, decode_content=decode_content) File " ...

  5. [r]Seven habits of effective text editing

    Seven habits of effective text editing(via) Bram Moolenaar November 2000 If you spend a lot of time ...

  6. C++例题1:输出可打印字符

    #include<iostream>#include<stdlib.h>#include<cctype>int main(){ int i;char a=0; fo ...

  7. Mysql 授权访问

    ' WITH GRANT OPTION; FLUSH PRIVILEGES; 这就是设置一个 urser:root pwd: 账号,该账号可以在任何机器,同时访问服务器

  8. struts2令牌,防止重复提交

    struts2的令牌,可以用来防止重复提交,其原理是在提交jsp页面中,写入一个隐藏域name="token",然后在action中定义一个变量token并get.set.在服务器 ...

  9. CSS中的高度

    https://developer.mozilla.org/en-US/docs/Web/API/element.clientHeight Element.clientHeight是只读属性,以像素为 ...

  10. 杂题 UVAoj 107 The Cat in the Hat

     The Cat in the Hat  Background (An homage to Theodore Seuss Geisel) The Cat in the Hat is a nasty c ...