[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( ...
随机推荐
- Java学习----方法的覆盖
方法的覆盖:子类继承父类,子类重写父类的同名方法. 覆盖的原则: 1. 方法的参数必须跟父类保持一致 2. 子类方法的修饰符的范围必须大于等于父类方法同名的修饰符(public > privat ...
- [开源]jquery-ajax-cache:快速优化页面ajax请求,使用localStorage缓存请求
项目:jquery-ajax-cache 地址:https://github.com/WQTeam/jquery-ajax-cache 最近在项目中用到了本地缓存localStorage做数据 ...
- C#应用程序获取项目路径的方法总结
一.非Web程序 //基目录,由程序集冲突解决程序用来探测程序集 1.AppDomain.CurrentDomain.BaseDirectory //当前工作目录的完全限定路径2.Envi ...
- 更换Python默认软件镜像源
限于一些众所周知的原因,在我们pip安装软件的时候出现类似报错: data = self.read(amt=amt, decode_content=decode_content) File " ...
- [r]Seven habits of effective text editing
Seven habits of effective text editing(via) Bram Moolenaar November 2000 If you spend a lot of time ...
- C++例题1:输出可打印字符
#include<iostream>#include<stdlib.h>#include<cctype>int main(){ int i;char a=0; fo ...
- Mysql 授权访问
' WITH GRANT OPTION; FLUSH PRIVILEGES; 这就是设置一个 urser:root pwd: 账号,该账号可以在任何机器,同时访问服务器
- struts2令牌,防止重复提交
struts2的令牌,可以用来防止重复提交,其原理是在提交jsp页面中,写入一个隐藏域name="token",然后在action中定义一个变量token并get.set.在服务器 ...
- CSS中的高度
https://developer.mozilla.org/en-US/docs/Web/API/element.clientHeight Element.clientHeight是只读属性,以像素为 ...
- 杂题 UVAoj 107 The Cat in the Hat
The Cat in the Hat Background (An homage to Theodore Seuss Geisel) The Cat in the Hat is a nasty c ...