TypeScript is used heavily as we build up our application, but TypeScript isn’t required. If you want to Inject a Service without using TypeScript, you’ll need to understand the @Inject decorator.

import {Component, View, Inject} 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{
todoService;
constructor(
// public todoService:TodoService //pulbic make todoService global available for the class
@Inject(TodoService) todoService;
){
console.log(todoService);
} onClick(event , value){
this.todoService.addTodo(value);
console.log(this.todoService.todos);
}
}

[Angular 2] Inject Service的更多相关文章

  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] Use Service use Typescript

    When creating a service, need to inject the sercive into the bootstrap(): import {bootstrap, Compone ...

  3. Guice 学习(六)使用Provider注入服务( Provider Inject Service)

    1.定义接口 package com.guice.providerInject; import com.google.inject.ProvidedBy; public interface Servi ...

  4. angular js自定义service的简单示例

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. Angular 学习笔记——service &constant

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

  6. Angular:使用service进行http请求的简单封装

    ①使用ng g service services/storage创建一个服务组件 ②在app.module.ts 中引入HttpClientModule模块 ③在app.module.ts 中引入创建 ...

  7. [Angular] 'providedIn' for service

    There is now a new, recommended, way to register a provider, directly inside the @Injectable() decor ...

  8. Angular:使用service进行数据的持久化设置

    ①使用ng g service services/storage创建一个服务组件 ②在app.module.ts 中引入创建的服务 ③利用本地存储实现数据持久化 ④在组件中使用

  9. angular之service、factory预provider区别

    昨晚项目组做了angular分享,刚好有讨论到这个问题.虽然许久不做前端开发,但是兴趣所致.就查阅了下资料,以便后续需要使用 自己的理解:service是new出来的,factory是直接使用就能获得 ...

随机推荐

  1. ios开发相关网站

    1.苹果开发者中心(ios Dev Center):最权威的学习ios开发的地方,提供ios开发所能用到的所有内容(包含文档.指南以及实例代码). https://developer.apple.co ...

  2. openerp import namespace

    # If True, the Python modules inside the openerp namespace are made available# without the 'openerp. ...

  3. iOS 的 XMPPFramework 简介一

    XMPPFramework是一个OS X/iOS平台的开源项目,使用Objective-C实现了XMPP协议(RFC-3920),同时还提供了用于读写XML的工具,大大简化了基于XMPP的通信应用的开 ...

  4. C# asp:Repeater DataSource List<T>

    1. asp:Repeater 数据源为List<T> 2.页面显示 3.行绑定取值

  5. Java中遍历Map的几种方法

      转自: http://blog.csdn.net/wzb56/article/details/7864911 方法分为两类: 一类是基于map的Entry:map.entrySet(); 一类是基 ...

  6. 工作总结:MFC调用Windows自带新建、保存对话框代码

    保存: void CExample17Dlg::OnBnClickedSaveButton() { // TODO: Add your control notification handler cod ...

  7. Instagram的技术架构

    http://blogread.cn/it/article/5497 Instagram 被 Facebook 以10亿美金收购.团队规模:13 人.而在被Facebook收购前的一个月,整个团队才7 ...

  8. sicp第1章

    牛顿迭代法求平方: (define (sqrt-iter guess x) (if (good-enough? guess x) guess (sqrt-iter (improve guess x) ...

  9. javascript isNaN

    因为以前felx组件默认是-99999999,后来因为方便组件和数据库的操作,就统一修改Number类型的数据为NAN类型了,然后通过isNaN去判断,而然很多表达式是返回字符串的或者null,要注意 ...

  10. 图论(floyd算法):NOI2007 社交网络

    [NOI2007] 社交网络 ★★   输入文件:network1.in   输出文件:network1.out   简单对比 时间限制:1 s   内存限制:128 MB [问题描述] 在社交网络( ...