[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( ...
随机推荐
- 微信小程序,大多数人误解的8个问题
作者:王安,数字天堂DCloud公司创始人兼CEO 注:本文内容包含技术.商业,不懂技术的读者可以只看商业相关的内容.本文仅代表作者一家之言,如有不同意见,欢迎留言讨论~ 8个误解 坊间所传的信息很多 ...
- php基础知识【函数】(6)mysql数据库
一.连接和关闭 1.mysql_connect('example.com:3307', 'root', '123456') --打开一个到 MySQL 服务器的非永久连接 2.mysql_pconne ...
- Python自动化运维之24、JQuery
jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多).它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, ...
- 转:简单介绍 P3P 技术
原文来自于:http://blog.csdn.net/ghj1976/article/details/4889219 以 Internet Explorer 为例,默认情况下,IE的隐私策略如下图所设 ...
- oracle 对象权限 系统权限 角色权限
系统权限: 允许用户执行特定的数据库动作,如创建表.创建索引.连接实例等 对象权限: 允许用户操纵一些特定的对象,如读取视图,可更新某些列.执行存储过程等 select * from user_sys ...
- 转一篇NGINX+UWSGI+PYTHON+DJANGO部署文档
高远弄的,,专业,明晓..感谢哈哈. http://blog.csdn.net/tmpbook/article/details/42873667
- 修改2张表不同SESSION相互持有记录引发的死锁
死锁产生的原因:如果有两个会话,每个会话都持有另一个会话想要的资源,此时就会发生死锁. 2张表不同SESSION持有不同记录 SQL> create table t1(id int); Tabl ...
- 一招解决IE7无法访问https网页
很多人都遇到过这种情况: 自己的IE访问不了https的网页了,如果你百度的话,有人会告诉你注册一堆的dll文件,或者更改IE设置啦什么的.上午,我也遇到这个问题,这些方法都不管用.请教了高手,将方法 ...
- HDOJ 2071 Max Num
Problem Description There are some students in a class, Can you help teacher find the highest studen ...
- bzoj 2324 [ZJOI2011]营救皮卡丘(floyd,费用流)
2324: [ZJOI2011]营救皮卡丘 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 1777 Solved: 712[Submit][Stat ...