質問編集履歴

1 誤字

shohu.yudai score 12

2017/09/27 16:05  投稿

Angular4からSpriteと決済をする方法

AngularからSpriteを簡単に扱う方法として以下npmモジュールを見つけましたが

[https://www.npmjs.com/package/angular-stripe](https://www.npmjs.com/package/angular-stripe)

angular-stripeのページで記載されている以下Usageの書き方は

```javascript

// node module exports the string 'angular-stripe' for convenience

angular.module('myApp', [

require('angular-stripe')

])

// otherwise, include the code first then the module name

angular.module('myApp', [

'angular-stripe'

])

```

[https://angular.io/tutorial/toh-pt3](https://angular.io/tutorial/toh-pt3)へ適用する場合、app.module.tsやapp.component.tsなどにどのような修正を加えればよいのものでしょうか。

```typescript

app.componet.ts

----

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

import { Hero } from './hero';

const HEROES: Hero[] = [

{ id: 11, name: 'Mr. Nice' },

{ id: 12, name: 'Narco' },

{ id: 13, name: 'Bombasto' },

{ id: 14, name: 'Celeritas' },

{ id: 15, name: 'Magneta' },

{ id: 16, name: 'RubberMan' },

{ id: 17, name: 'Dynama' },

{ id: 18, name: 'Dr IQ' },

{ id: 19, name: 'Magma' },

{ id: 20, name: 'Tornado' }

];

@Component({

selector: 'my-app',

template: `

<h1>{{title}}</h1>

<h2>My Heroes</h2>

<ul class="heroes">

<li *ngFor="let hero of heroes"

[class.selected]="hero === selectedHero"

(click)="onSelect(hero)">

<span class="badge">{{hero.id}}</span> {{hero.name}}

</li>

</ul>

<hero-detail [hero]="selectedHero"></hero-detail>

`,

styles: [`

省略・・・

`]

})

export class AppComponent {

title = 'Tour of Heroes';

heroes = HEROES;

selectedHero: Hero;

onSelect(hero: Hero): void {

this.selectedHero = hero;

}

}

```

```typescript

app.module.ts

-----

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

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule }  from '@angular/forms';

import { AppComponent }       from './app.component';

import { HeroDetailComponent } from './hero-detail.component';

@NgModule({

imports: [

BrowserModule,

FormsModule

],

declarations: [

AppComponent,

HeroDetailComponent

],

bootstrap: [ AppComponent ]

})

export class AppModule { }

```

Spriteは本来ならばhtmlにscriptタグを埋め込むだけで決済画面が作れるのですが、Angularはhtmlを吐き出す際にscriptタグを削除してしまうため、[angular-stripe](https://www.npmjs.com/package/angular-stripe)などを使わないといけないとの認識です。

Angular4でSpriteで決済できるようになれば、どのような方法でも構いませんが、色々調べた結果こちらのライブラリが良さそうだと思いました。

初歩的な質問かもしれませんが、何卒ご回答よろしくお願い致します。

JavaScript 29405 questions JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。 Myタグに追加 TypeScript 1136 questions TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。 Myタグに追加 Angular 341 questions Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。 Myタグに追加