[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( ...
随机推荐
- 第17章课后题(高级Perl技巧)
17.1 写一个程序,从文件中读取一组字符串(每行一个),然后让用户键入模式以便进行字符串匹配. 对于每个模式,程序应该说明文件里共有多少字符串匹配成功,分别是哪些字符串. 对于所键入的每个新模式,不 ...
- 复制JAVABEAN中的属性到另外一个JAVABEAN中
下午写了一个属性复制方法,记录如下: class POUtil{ /** * * Function : 将一个source中的属性到复制到dest * @author : Liaokailin * C ...
- Centos7搭建php+mysql环境(整理篇)
终于将mysql+php环境搭建成功,将之前的整理一下,环境:centos7,本机IP:192.168.1.24,数据库用户名及密码都设为root,测试文件路径:/var/www/html 1.取消c ...
- Java 可变参数
java1.5增加了新特性:可变参数:适用于参数个数不确定,类型确定的情况,java把可变参数当做数组处理.注意:可变参数必须位于最后一项.当可变参数个数多余一个时,必将有一个不是最后一项,所以只支持 ...
- 用PHP添加购物商品
<?php session_start(); header ( "Content-type: text/html; charset=UTF-8" ); //设置文件编码格式 ...
- jquery html 动态添加元素绑定事件
由于实际的需要,有时需要往网页中动态的插入HTML内容,并在插入的节点中绑定事件处理函数.我们知道,用Javascript向HTML文档中 插入内容,有两种方法, 一种是在写HTML代码写入JS,然后 ...
- PHP面向对象(OOP):克隆对象__clone()方法
有的时候我们需要在一个项目里面,使用两个或多个一样的对象,如果你使用“new”关键字重新创建对象的话,再赋值上相同的属性,这样做比较烦琐而且也容易出错,所以要根据一个对象完全克隆出一个一模一样的对象, ...
- 请教 WINDOWSPHONE 有个人录了个传感器等硬件的视频,并且项目是完全开源的,大家有知道地址的吗?或者叫什么。
请教 WINDOWSPHONE 有个人录了个传感器等硬件的视频,并且项目是完全开源的,大家有知道地址的吗?或者叫什么.
- 转:推荐!国外程序员整理的 C++ 资源大全
原文来自于:http://blog.jobbole.com/78901/ 关于 C++ 框架.库和资源的一些汇总列表,由 fffaraz 发起和维护. 内容包括:标准库.Web应用框架.人工智能.数据 ...
- My ECMAScript 7 wishlist
With ECMAScript 6 now feature complete, any further changes to the core of JavaScript will happen in ...