angular2のserviceをproviderに登録する

angular2 service


serviceの登録。providerを指定する。

サービスの作成

@Injectableをつける

Injectableをimportし、関数定義の前で@Injectable()を記述する。

import { Injectable } from '@angular/core';

@Injectable()

export class TestService {

...

}


providerに指定

component内の@Component/providersで指定するか、

app.module.ts内の@NgModule/providersで指定する。

componentでproviderを指定

xxx.component.ts内の@Componentで

providers: []そ指定する。

import { TestService } from [TextServiceのpath]

@Component({

selector: 'home',

providers: [

TestService

],

styleUrls: [ './home.component.css' ],

templateUrl: './home.component.html'

})

app.module.tsでproviderを指定

app.module.ts内で、@Ngmoduleでproviders:[]を指定する。

import { TestService } from [TextServiceのpath]

@NgModule({

...

providers: [ TestService ],

...

})

ここに登録すると、他のサービスからサービスを使用することもできる。

serviceの使用

サービスをインポートし、コンストラクタ引数に指定する。

import { TestService } from [TextServiceのpath]

export TestComponent {

constructor( private testService: TestService)

{

...

}

...

angular2-webpack-starterにsocketioを追加してみる

angular2-webpack-starterにsocketioを追加してみる


angular2-webpack-starter

ここに説明がある angular2 starter  /  リポジトリ repository

ファイルの追加

赤字を追加、青字を編集。

  • angular2-webkit-starter
  • server
    • server.js
  • src
    • app
      • +barrel
      • +detail
      • about
      • sockets
        • index.ts
        • sockets.service.ts
      • home
      • no-content
      • app.component.css
      • app.component.spen.css
      • app.component.ts
      • app.e2d.ts
      • app.module.ts
      • app.resolver.ts
      • app.routes.ts
      • environmemt.ts
      • index.ts

npm moduleの追加

  • webpack-hot-middleware
  • socket.io-client
  • @type/socket.io-client
npm install webpack-hot-middleware --savedev
npm install socket.io-client --save
npm install @type/socket.io-client --savedev

server.jsの追加

server/server.js


const http = require('http');
const express = require('express');

const webpack = require('webpack');
const webpackConfig = require('../webpack.config.js');
const compiler = webpack(webpackConfig);

const app = express();
app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: webpackConfig.output.publicPath,
}));
app.use(require('webpack-hot-middleware')(compiler));
app.use(express.static('dist'));
const server = new http.Server(app);
const PORT = process.env.PORT || 3000;

server.listen(PORT);

/*
 socketio
*/
var io = require('socket.io')(server);
io.on('connection', function(socket){    
  socket.on('socketTest', function(){
    console.log('getEmmit!!!');
    socket.emit('retSocketTest');
  });
});

socket serviceの追加(/app/shared)

index.ts, socket.service.ts

index.tsの追加

export * from './sockets.component';
socket.service.tsの追加

import { Injectable, OnDestroy } from "@angular/core";
import * as io from "socket.io-client";

@Injectable()
export class SocketService implements OnDestroy{
    private socket: SocketIOClient.Socket;

    constructor() {
        this.socket = io.connect();
        this.socket.on('retSocketTest', () => {
            console.log('retSocketTest');
        })
    }
    public test(){
        this.socket.emit('socketTest');
    }
    public ngOnDestroy() {
        console.log('socketio close');
        this.socket.close();
    }
}

socketsコンポーネントの追加(/app/sockets)

index.ts, sockets.component.ts

index.tsの追加

export * from './sockets.component';
sockets.component.tsの追加

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { SocketService } from '../shared';

@Component({
  selector: 'sockets',
  providers: [ SocketService ],
  template:`
    <h1>Sockets</h1>
  `
})
export class SocketsComponent implements OnInit {
  private socketData : any;
  constructor( private socketService: SocketService ){
  }
  public ngOnInit(){
    console.log('sockets');
    this.socketService.test();    
  }
}

app.componentコンポーネントの修正(/app)

app.module.ts, app.route.ts, app.component.ts

app.module.tsの修正
SocketComponentをngModuleに追加
//追加
import { SocketComponent } from './sockets';

@NgModule({ bootstrap: [ AppComponent ],
declarations: [
...

SocketsComponent
],

赤字を追加
app.route.tsの修正
socket.componentのrouteを追加
//追加
import { SocketsComponent } from './sockets';

export const ROUTES: Routes = [ ...
{ path: 'sockets', component: SocketsComponent }, <<< 追加


//---------------
path :'**'より下に追加すると、ルーティングされない。
app.component.tsの修正
@Component({
template: `
<nav>
...
//追加
<a [routerLink]=" ['./sockets'] "
routerLinkActive="active" [routerLinkActiveOptions]= "{exact: true}">
Sockets
</a>
...
これで、socketsページを表示すると、 クライアントからサーバに'socketTest'がemitされ、 サーバから、'retSocketTest'が返送される。


ここまでで、socketioが追加できた。


サーバ側にmongodbを追加する。 socket.componentでmongodbデータを取得できるようにする。

ファイルの追加

赤字を追加、青字を編集。

  • angular2-webkit-starter
  • server
    • server.js
  • src
    • models
      • index.ts
      • sockets-item.model.ts
    • app
      • +barrel
      • +detail
      • about
      • sockets
        • index.ts
        • sockets.service.ts
      • home
      • no-content
      • app.component.css
      • app.component.spen.css
      • app.component.ts
      • app.e2d.ts
      • app.module.ts
      • app.resolver.ts
      • app.routes.ts
      • environmemt.ts
      • index.ts

npm moduleの追加

  • mongodb
npm install mongodb --save

server.jsにmongodb追加

server/server.js

socketio部にmongodbを追加して置き換え

/*
 socketio
*/
var io = require('socket.io')(server);
/*
 mongodb
*/
var Promise = require("bluebird");
var MongoDB = Promise.promisifyAll(require("mongodb"));
var MongoClient = Promise.promisifyAll(MongoDB.MongoClient);
var MONGO_URL = 'mongodb://127.0.0.1:27017/test';

io.on('connection', function(socket){    
  socket.on('socketTest', function(){
    console.log('getEmmit!!!');
    socket.emit('retSocketTest');
  });
  socket.on('mongoRead', function(){
    console.log('getEmmit!!!');
    MongoClient.connectAsync('mongodb://localhost:27017/myTest').then(function(db) {
      return db.collection("myTest").find({}).toArrayAsync();
    }).then(function(orders) {
      console.log('then1', orders);
      socket.emit('retMongoRead', orders);
    }).catch(function(err) {
      console.log('then2', err);
    });
  });
});

socket service用のmodelの追加

index.ts, socket-item.model.ts

src/modelsフォルダを作成して、ファイルを追加する。
index.tsの追加

export * from "./socket-item.model";
socket-item.model.tsの追加

export interface ISocketItem {
    action: string;
    item: any;
}

socket.service/socket.componentsの変更

index.ts, socket.service.ts

socket.onをovserveし、socket.componetsでscribeして読む。
socket.serviceの変更

import { Injectable, OnDestroy } from "@angular/core";
import { Observable } from "rxjs";
import * as io from "socket.io-client";
import { ISocketItem } from "../../models";

@Injectable()
export class SocketService implements OnDestroy{
    private socket: SocketIOClient.Socket;
    private mongoData: any;

    constructor() {
        //this.socket = io.connect();
        this.socket = io.connect();
    }
    public get(): Observable{
        return Observable.create((observer: any) => {
            this.socket.on("retSocketTest", (item: any) => observer.next({ action: "test", item: item }) );
            this.socket.on("retMongoRead", (item: any) => observer.next({ action: "read", item: item }) );
            return () => this.socket.close();
        });
    }
    public test(){
        this.socket.emit('socketTest');
    }
    public ngOnDestroy() {
        console.log('socketio close');
        this.socket.close();
    }
    public mongoRead() {
        this.socket.emit('mongoRead');
    }
}

socket-item.model.tsの追加

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { SocketService } from '../shared';
import { ISocketItem } from "../../models";
import { Observable } from "rxjs";

@Component({
  selector: 'sockets',
  providers: [ SocketService ],
  template:`
    <h1>Sockets</h1>
    <button (click)=mongoRead()>mongoRead</button>
    {{ mongoReadData | json}}
    <br><br>
  `
})
export class SocketsComponent implements OnInit {
  private socketData : any;
  private mongoReadData : any;
  constructor( private socketService: SocketService ){
    this.mongoReadData = {};
    this.socketService.get()
      .subscribe(
                (socketItem: ISocketItem) => {
                  /*
                    let message: IMessage = socketItem.item;
                    this.list = this.list.push(message);
                    this.messages.next(this.list);
                    */
                    if(socketItem.action === 'test'){
                      console.log('test', socketItem.item);
                    }
                    else if(socketItem.action === 'read'){
                      console.log('read', socketItem.item);
                      this.mongoReadData = socketItem.item;
                    }
                    //this.mongoReadData.next();
                },
                error => console.log(error)
            );
  }
  public ngOnInit(){
    console.log('sockets');
    this.socketService.test();    
  }
  private mongoRead(){
    console.log('btn click');
    this.socketService.mongoRead();
  }
}


socketsページ

socketMongoRead

こんな感じにsocketsページでmongoReadボタンを押すと、dbのmongoデータが表示される。

angular2-webpack-starterにモジュールを追加する

angular2-webpack-starterにモジュールを追加する


angular2-webpack-starter

ここに説明がある angular2 starter  /  リポジトリ repository

moduleの追加

赤字を編集、青字をコピー

  • app
  • +barrel
  • +detail
  • about <<< コピー
  • mypage <<< abautのペーストをrename
  • home
  • no-content
  • app.component.css
  • app.component.spen.css
  • app.component.ts
  • app.e2d.ts
  • app.module.ts
  • app.resolver.ts
  • app.routes.ts
  • environmemt.ts
  • index.ts

mypageフォルダ追加

file名変更
about.component.ts
about.component.spec.ts
>>>
mypage.component.ts
mypage.component.spec.ts
mypage.component.ts内の変更
@Component内編集
selector: 'about', >>> selector: 'mypage',
template:内
<h1>About</h1> >>> <h1>Mypage</h1>
コンポーネント名の変更
export class AboutComponent implements OnInit { >>> export class MypageComponent implements OnInit {
indext.ts内の変更
export * from './about.component';
>>>
export * from './mypage.component';

app.componet.ts編集

@component/templateの変更
<nav>タグ内に、
<a [routerLink]=" ['./mypage'] " routerLinkActive="active" [routerLinkActiveOptions]= "{exact: true}"> Mypage </a>
を追加。

app.module.ts編集

import追加
import { MypageComponent } from './mypage';
を追加。
@NgModule内追加
declarations:内に
MypageComponent,
を追加。

app.route.ts編集

import追加
import { MypageComponent } from './mypage';
を追加。
export const ROUTES内追加
{ path: 'mypage', component: MypageComponent },
を追加。 一番下(path: '**')より下に追加すると、リンクされなくなるので注意。

npm startで起動する。
a2_webpack_add_module

こんな感じに新ページとルーティングスイッチが追加される。

androider
アンドロイダー公認デベロッパー認証
google play/easycalc
ケイデザイン
ギャラリー
  • angular2-webpack-starterにsocketioを追加してみる
  • angular2-webpack-starterにモジュールを追加する
  • vscodeでpython3, javascriptを走らせる設定 / ubuntu16.04
  • vscodeでpython3, javascriptを走らせる設定 / ubuntu16.04
  • raspberrypi2のgpioをpython3で制御
  • expressにangular2のquickstartを組込んでみる
  • ubuntu14.04でネットワークに繋がらなくなる >>> 固定IPにすると繋がった
  • ubuntu14.04でネットワークに繋がらなくなる >>> 固定IPにすると繋がった
  • ubuntu14.04でネットワークに繋がらなくなる >>> 固定IPにすると繋がった