[Angular 2] Use Service use Typescript
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的更多相关文章
- [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 ...
- [Angular 2] Inject Service
TypeScript is used heavily as we build up our application, but TypeScript isn’t required. If you wan ...
- angular js自定义service的简单示例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Angular 学习笔记——service &constant
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...
- Angular:使用service进行http请求的简单封装
①使用ng g service services/storage创建一个服务组件 ②在app.module.ts 中引入HttpClientModule模块 ③在app.module.ts 中引入创建 ...
- [Angular] 'providedIn' for service
There is now a new, recommended, way to register a provider, directly inside the @Injectable() decor ...
- Angular:使用service进行数据的持久化设置
①使用ng g service services/storage创建一个服务组件 ②在app.module.ts 中引入创建的服务 ③利用本地存储实现数据持久化 ④在组件中使用
- Angular Service入门
1.Angular内置service Angular为了方便开发者开发,本身提供了非常多的内置服务.可以通过https://docs.angularjs.org/api/ng/service查看Ang ...
- Angular service, 服务
早上开车上班, 发现车快没油了, 于是拐进加油站. 有一辆出租车也在加油.. Angular service在一个应用里是以单例形式存在的. 这个单例的实例是由service factory( ...
随机推荐
- c# winform 设置winform进入窗口后在文本框里的默认焦点
c# winform 设置winform进入窗口后在文本框里的默认焦点 进入窗口后默认聚焦到某个文本框,两种方法: ①设置tabindex 把该文本框属性里的tabIndex设为0,焦点就默认在这个文 ...
- php之文件上传类代码
/* 单个文件上传 功能 上传文件 配置允许的后缀 配置允许的大小 获取文件后缀 判断文件的后缀 报错 */ class UpTool{ protected $allowExt = 'jpg,jpeg ...
- 原生Js获取某个节点后面的第一个标签
nextSlbling属性 获取某个节点后面的第一个节点(可能是标签 文本) 判断获取的节点是否为标签节点还是文本节点 window.onload=function(){ var pagecount= ...
- MySQL zip版安装配置
文章出处:http://www.cnblogs.com/winstic/,请保留此连接 这段时间在学习Python 数据库操作知识,简单整理MySQL zip文件安装方法 下载 在MySQL官网htt ...
- Binding在WPF中的使用
闲来无事,不想打DOTA,在这里小小研究下wpf中关于Binding的东西. 咯咯 在我们印象中,Binding的意思是“绑定”,这个“绑”大概取自于Bind这个单词吧,这么理解的话就是以音译英了,没 ...
- C++实现base64编码(1)
下面的代码是php里面的base64编码逻辑,确实比我之前的要美观很多,我只是简单的用C++的类进行了一下封装,删除了一些没用的逻辑,基本上还是原来PHP的代码: #include <iostr ...
- bzoj1311: 最优压缩
Description 其中: Auv是与Aij相邻的像素(为了简化,认为(i-1,j),(i+1,j,(i,j-1),(i,j+1)为相邻元素); Wij取值0或者1,表示Aij修改后取V0或者V ...
- 转:基于HTTP协议的轻量级开源简单队列服务:HTTPSQS
[文章作者:张宴 本文版本:v1.7.1 最后修改:2011.11.04 转载请注明原文链接:http://blog.zyan.cc/httpsqs/] HTTPSQS(HTTP Simple Que ...
- SequoiaDB 架构指南
1 简介 SequoiaDB(巨杉数据库)是一款分布式非关系型文档数据库,可以被用来存取海量非关系型的数据,其底层主要基于分布式,高可用,高性能与动态数据类型设计,与当前主流分布式计算框架 Hadoo ...
- SharePoint DataFormWebPart 通过Caml和xslt聚合内容
以下是一个例子,SPDataSource用于查询内容,DatasourceMode属性指定查询范围(网站集,网站,列表),SelectCommand是Caml查询:Xsl展示内容,下面列子是用tabl ...