Angular2でModal作る - Qiita
Angular2でモーダルを自作したメモ。 要件: Angular以外のライブラリには頼らない モーダルを開く時はServiceとして扱いたい モーダルの内側はComponentとして開発したい モーダルを閉じた場合、Promise(or Observable)をresolveしたい。 要するに、下記のようなコードを書きたいのだ。 import { Component , Input } from "@angular/core"; import { ModalContext } from "./modal"; @Component({ selector: "greeting", template: ` <div> <section> <input [(ngModel)]="message" placeholder="Message"> </section> <footer> <button
Angular4(Angular2~)のユニットテスト【Angularのユニットテストの基本とComponentの簡単なテスト編】 - Qiita
import {ComponentFixture, TestBed, async, ComponentFixtureAutoDetect,} from '@angular/core/testing'; import {By} from '@angular/platform-browser'; import {DebugElement} from '@angular/core'; import {AppComponent} from './app.component'; // describeでテストSuiteを作成 describe('AppComponentのテスト', () => { // テストの中のAppComponent let comp: AppComponent; // ComponentFixtureは、 componentのインスタンスそのものとcomponentのDOM
node.js + Express 最低限のメモ - Qiita
var express = require('express'); var app = express(); //HelloWorld app.get('/', function(req,res,next){ res.send("Hello World"); }); //API app.get('/api/:memberId', function(req,res,next){ var memberId = req.params.memberId; var data = {"status":"OK","memberId":memberId} res.json(data); }); //Listen app.listen(3000, function(){ console.log("Start Express on port 3000."); });
郵便番号で住所情報を返却するAPIをNode.jsで簡単構築 - Qiita
var http = require('http'); var unzip = require('unzip'); var fs = require('fs'); var iconv = require('iconv-lite'); var readline = require('readline'); var sqlite3 = require('sqlite3').verbose(); var db = new sqlite3.Database('ZipInfo.db'); var ZIP_FILE = "KEN_ALL.zip"; var CSV_FILE = "KEN_ALL.csv"; function downloadZIPCSV(){ // 日本郵便の住所情報データURL var downloadUrl = 'http://www.post.japanpost.jp/zipc
node.js + Express ３分でゼロからアプリケーション構築 - Qiita
node.js とフレークワークexpressの開発環境/アプリケーション の構築手順はいろいろあると思いますが、コマンドベースでシンプルにまとめてみました。 NVM (Node Version Manager)のインストール
WebStromとAngular CLIでAngular2アプリケーションを作ってみよう - Qiita
こんにちわ、メトロノームかわかみ（@saruyama_monki）です。 Angularアドベントカレンダーの７日目は、WebStromとAngular CLIを使ってAngular2アプリケーション作ることを解説します。 WebStrom 2016.3について WebStormについての紹介は割愛させて頂きますが有料のIDEになります。 11月14日にバージョン2016.3のアップデードが入りまして、Angular CLIが使えるようになりました。 WebStormは、他の製品（PhpStorm、RubyMineなど）にも梱包されておりますので同じように使えます。 有料は。。。と思われる方は、まずは30日のFree Trial版を使ってみて下さい。プログラミングがもっともっと好きになると思います。 Angular2プロジェクトの作成 WebStromを立ち上げますと、プロジェクトの作成画
PHPアプリでファイルをクライアントからAWS S3に直接JavaScriptで送付する方法 - Qiita
こんにちはみなさん サーバサイドの実装やっていると、クライアントには一見すると容易いのに、サーバ側では困難な状況が発生している、ということがあります。 ファイルアップロードなんてまさにそれで、PHPだとアップロードしたファイルの分だけメモリを確保しよるので、下手に動画ファイルなんてあげられると、送信途中でメモリを使い尽くしてリクエストが落ちるなんて事態になります。 HD画質の長時間動画なんて送信された日には、数GBのメモリを使うので、使用するインスタンスのサイズもそれ相応に大きくしなければならなかったりして、費用効率もあまり良くないように思います。 というわけで、やり方を幾つか探ったところ、JavaScriptを使ってクライアントから直にS3へアップロードする技があったので、そいつを実現してみましょう。ミニマム実装なので、ダサい感じですが、例示するものとしては問題ないでしょう。 TL;DR
webpackのDLLバンドルを使ってビルドを速くする - Qiita
How to make your Webpack builds 10x faster 「webpackビルドを10倍速くする方法」というスライドを見つけた。 内容を要約すると、こんな感じ。 css-loaderは0.15未満を使う cacheDiretoryはデフォルトで無効だから有効にする HappyPackを使う DLLバンドルを使って、静的コードのバンドルを分ける DLLバンドルは聞いたことがなかったので調べた。 DLLバンドルとは Dll bundles doesn't execute any of your module's code. They only include modules. モジュールをまとめただけのbundleで、scriptタグで読み込んだ時点では含まれるモジュールは実行されず、他のbundleから参照された時に実行される。
Angular4 + Express4 + MongoDB3 + TypeScript2 の最小構成プロジェクトをAngular CLIベースで構築する。(ビルド、テスト、Dockerデプロイまで) その２. テスト編 - Qiita
Angular4 + Express4 + MongoDB3 + TypeScript2 の最小構成プロジェクトをAngular CLIベースで構築する。(ビルド、テスト、Dockerデプロイまで) その２. テスト編JavaScriptjasmineTypeScriptAngularProtractor やりたいこと Angular CLI使って、MEANスタック(MongoDB + Express + Angular + NodeJS)のアプリを作りたい。どうせならサーバ側もTypeScriptで作りたい。 フロント側とサーバ側の両方をwebpack、gulpなどは使わずにnpm scriptsだけでビルド、テストできるようにしたい。 Dockerを使ってアプリを簡単に配布したい。 これらを達成するための最小構成プロジェクトの作り方を３回に分けて紹介します。 その１. ビルド編 その２
Angular4 + Express4 + MongoDB3 + TypeScript2 の最小構成プロジェクトをAngular CLIベースで構築する。(ビルド、テスト、Dockerデプロイまで) その１. ビルド編 - Qiita
Angular4 + Express4 + MongoDB3 + TypeScript2 の最小構成プロジェクトをAngular CLIベースで構築する。(ビルド、テスト、Dockerデプロイまで) その１. ビルド編JavaScriptMongoDBExpressTypeScriptAngular やりたいこと Angular CLI使って、MEANスタック(MongoDB + Express + Angular + NodeJS)のアプリを作りたい。どうせならサーバ側もTypeScriptで作りたい。 フロント側とサーバ側の両方をwebpack、gulpなどは使わずにnpm scriptsだけでビルド、テストできるようにしたい。 Dockerを使ってアプリを簡単に配布したい。 これらを達成するための最小構成プロジェクトの作り方を３回に分けて紹介します。 その１. ビルド編 ⇦ 今回はコ
yarnチートシート - Qiita
webpackに引き続き、Railsが推してるフロントパッケージマネージャのyarnを調べてみました。npmも慣れてきたんで変えるのやだなー、と思ってたのですが互換性高くて移行しやすいし、動作も速くていい感じです。 概要 yarn = フロント(js)のパッケージマネージャ Facebook発、オープンソース、BSDライセンス npmと互換性がある npmと同じpackage.json, node_modules/で構成される コマンドも似ている バージョンの厳密な管理ができる package.jsonでバージョンそのものではなく、許容するバージョンの範囲を指定する 実際にインストールされた際のバージョンはyarn.lockに記録され、別マシンで再現可能になる npmに比べて高速に動作する 導入 Homebrewあるいはnpmでインストールできる。
Angular 入門 #1 - Qiita
この会の進め方 https://angular.io/docs を読み進めていきます Angular 自習のススメ angular.io/docs 公式サイトのドキュメントが充実 ここ読めばもうAngularマスターです 英語 https://github.com/ng-japan/hands-on ng-japan (Angular Japan User Group) が公開しているハンズオン 日本語 各自これをやりましょう（完）でいい気も angular.io/docs を読み進める デモを動かす 大体のページでブラウザ上ですぐ動かせるデモと、ダウンロードしてローカルで動かせるデモが用意されています The code referenced on this page is available as a live example / downloadable example. live e
npm 5.2.0の新機能！ 「npx」でローカルパッケージを手軽に実行しよう - Qiita
npmとはNode.jsインストール時に付属するパッケージマネージャーで、Node.jsのパッケージの管理や実行を取り扱うものです。 npmのバージョン5.2.0で導入された「npx」を用いると、下記のようにローカルにインストールしたnpmパッケージを、npxコマンドだけで実行できるようになります。 npxはnpmにバンドルされているため、npxの個別インストールは不要です。 次のようにしてモジュールを実行できます。 従来のnpmの実行方法との比較 従来では、ローカルのnpmパッケージを使用するには、次のような方法が必要でした。 方法1: ./node_modules/.bin/(パッケージ名)で実行する 方法2: $(npm bin)/(パッケージ名)で実行する 方法3: package.jsonにnpm-scriptsを記述して実行する npxはいずれの方法よりも簡潔なコマンドで、パッ
Vue.jsでGETとPOSTを実装する - Qiita
Vue.jsにおけるGET・ POSTに関する情報がほとんどない(公式のREADMEくらい)ので、上手くいった例をまとめておく。 GET/POSTにはvue-resoureを用いた。 この辺の処理はAngularJSとよく似ているので、Vue.jsで調べるよりAngularJSで調べた方がヒントは得られるかもしれない。 GET イベントのリストをJSONで返してくれるAPIに対してGETをして、その結果を表示する例。 【GitHub】 HTMLの実装 HTMLはシンプルで、js内でelに登録するidのhomeと、v-repeatでeventsの中の要素を取得して表示している。 <div id="home"> <h1>event list</h1> <hr> <div v-repeat="t : events"> {{$index}} <h2>{{t.title}}</h2> <p>{{t.
Angular をやるのに欠かせない VSCode Extension - Qiita
2017/07/11(Tue) 時点の情報に基づいています Angular をやるのに Visual Studio Code (以降 VSCode) は相性ばっちりで、デフォルト設定でもほぼストレスなくプログラミングできるのが素晴らしいですが、以下の VSCode Extension をインストールすれば、さらに効率アップが図れます。 Angular Language Service Angular 本家が開発している Extension で template に対してプロパティ補完をしてくれる強力な Extension です。存在しないプロパティを指定すればエラーチェックがかかって教えてくれます。 Path Intellisense ファイルパスを補完してくれる Extension です。例えば Component の templateUrl や styleUrls に外部の HTML
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
pug+riot.jsでyieldを使う。 - Qiita
[TypeScript 2.4] custom transformer を利用して React のバケツリレー問題を解決する - Qiita![[TypeScript 2.4] custom transformer を利用して React のバケツリレー問題を解決する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/e1acdcb2da552ffc4ab23d42c731c0f126a4147c/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGODYwNDUlMkZwcm9maWxlLWltYWdlcyUyRjE0NzM3MDM2MTg_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9ZjcxZDg2NmJlYWU5MDg1NzlhZWU1OWU2YmRkNWM1Y2M%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Db58a3077bb8a5ff36dc52bc8cb9a10cc%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCVHlwZVNjcmlwdCUyMDIuNCU1RCUyMGN1c3RvbSUyMHRyYW5zZm9ybWVyJTIwJUUzJTgyJTkyJUU1JTg4JUE5JUU3JTk0JUE4JUUzJTgxJTk3JUUzJTgxJUE2JTIwUmVhY3QlMjAlRTMlODElQUUlRTMlODMlOTAlRTMlODIlQjElRTMlODMlODQlRTMlODMlQUElRTMlODMlQUMlRTMlODMlQkMlRTUlOTUlOEYlRTklQTElOEMlRTMlODIlOTIlRTglQTclQTMlRTYlQjElQkElRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz03ODM3MmJkZWFkYjM5NmRmMzUyMDIwMThhY2YwMzZmYw%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBraW1hbXVsYSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWQ2YjJkYjg4YTBlOWQwMGYxYzI0MDZjMjdjZjZiMWUw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D223b8e1563a68420f587aa65bba9b370)
node.js + expressでドットを含むQueryStringを得る - Qiita
Angular 4.3で追加されたHttpClientModuleについてのメモ - Qiita
Babel、Browserify のクイックスタート2017年夏版 - Qiita
