質問編集履歴

1 誤字

shohu.yudai

shohu.yudai score 10

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

    22791 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • TypeScript

    633 questions

    TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

  • Angular

    231 questions

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る