[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( ...
随机推荐
- linux常用指令(飞天云)
1.svn相关指令 svn co svn://... //check out 到本地 2.pangu相关 pu cpdir pangu://... //复制pangu里面对应的文件夹到本 ...
- MySql数据库1【概念】
[mysql] mysql是目前最主流的跨平台.开放源代码的关系型数据库,由瑞曲的mysql ab公司开发,已经被SUN公司收购,标识是一只名为sakila的海豚,代表mysql的速度.能力.精确优秀 ...
- Problem:To Connect with MySQL in Virtual PC Environment
I'm trying to build a 1:n dev environment,with the help of Vsever(just like VMware worked on sever) ...
- CSS HACK的方法
所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE7 专用 *+height: 100px; IE6.IE7 共用 *height: 100px; IE ...
- [BZOJ 3238] [AHOI 2013] 差异 【后缀数组 + 单调栈】
题目链接:BZOJ - 3238 题目分析 显然,这道题就是求任意两个后缀之间的LCP的和,这与后缀数组的联系十分明显. 求出后缀数组后,求出字典序相邻两个后缀的LCP,即 Height 数组. 那么 ...
- couchdb and redis
http://www.jdon.com/artichect/scalable5.html http://www.dedecms.com/knowledge/data-base/nosql/2012/0 ...
- Cylinder
http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2374 思路:三分枚举. #include &l ...
- hashCode() 和equals() 区别和作用
HashSet和HashMap一直都是JDK中最常用的两个类,HashSet要求不能存储相同的对象,HashMap要求不能存储相同的键. 那么Java运行时环境是如何判断HashSet中相同对象.Ha ...
- dns智能解析对网站排名的影响
网站排名是所有建站者都关系的问题,如何提升网站排名有很多因素,网站是否健康也与网站排名有关,下面智儒科技网站建设为你研究下如何判断自己的网站是否健康. 一般情况下,网站的排名在优化的基础上,怎么也上不 ...
- 微信下载APK
腾讯应用宝 微信屏蔽了来源不是腾讯的APK function isWeixin() { var ua = navigator.userAgent.toLowerCase() if(ua.match(/ ...