angular-cliで作ったAngular2プロジェクトにng2-bootstrapを導入する - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Go+GAE+Angular2で簡易的なWebサービスを構築 - Qiita
11月に学んだものを使ってシンプルなWebサービスを構築してみました。 GCP + Go + Angular2 のgoogleful的なヤツです。 夜中に少しづつ書いた超絶シンプルなモノですが、如何せんAngular2でかなり苦戦してしまい、この程度のでもトータル20～30時間くらいかかってしまいました… サービスの内容 datastoreに登録されているデータの一覧表示 登録されているデータの編集 これだけです笑。 とりあえず今回はソースの公開だけを行い、ノウハウとして役立ちそうなことはピックアップして今後記事にしていく予定です。 また、今後はこのソースに機能追加をしながら様々なサービスの学習を行う予定です。 今回やりたいこと go言語でREST APIを構築する Datastoreのレコードの登録・削除を管理者権限でのみ行えるようにする とにかくAngular2を使ってみる 実装内容
Angular2 DOC GUIDEを翻訳する[STYLE GUIDE] - Qiita
トピック Angular2 CORE DOCUMENTATIONのGUIDEの翻訳です。 DOCUMENTATION OVERVIEW - ドキュメント概要 - ARCHITECTURE OVERVIEW - 構文概要 - DISPLAYING DATA - データ表示 - USER INPUT - ユーザー入力 - FORMS - フォーム - DEPENDENCY INJECTION - 依存性注入 - STYLE GUIDE - スタイルガイド - 注意1）ここに掲載されていない項目は、Angular2 CORE DOCUMENTATIONのGUIDEを直接参照してください。 注意2）2016年12月12日時点の翻訳です。翻訳者はTOEICで700点くらいの英語力なので、英訳が間違っている可能性があります。しかもかなり意訳している箇所もあります。もし意訳を通り越して、誤訳になっている
![Angular2 DOC GUIDEを翻訳する[STYLE GUIDE] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f6776c1b58b14224797638870a71388cf7a9c73/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%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTEyNTY2JTJGcHJvZmlsZS1pbWFnZXMlMkYxNDc0NzA0ODAyP2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZiZz1GRkZGRkYmZm09cG5nMzImcz1mNTA3ZmZlOGIzNGQyMmRkYWYyMjhhODFlYTRkZTUxOA%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Df1d975cea459d15c60c236e8b575b56f%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9QW5ndWxhcjIlMjBET0MlMjBHVUlERSVFMyU4MiU5MiVFNyVCRiVCQiVFOCVBOCVCMyVFMyU4MSU5OSVFMyU4MiU4QiU1QlNUWUxFJTIwR1VJREUlNUQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz0zYmViZWIxNGExNTVmYmU2MjQ3MjgyNzUyNjkzZDhmZA%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBZYW1hbW90bzA1MjUmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz0yZmU5YzEyNjY5ZjY1NTgxZGY5ODc4MTliZTI5MjA2Mg%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D6d99e972ef72f6403b1789e6c18cddeb)
Angular2でlocalStorageを扱うServiceを実装する - Qiita
背景 SPAではないAngularアプリで、ある機能を実装していて、画面をまたぐ保存領域が欲しくなった Cookieで実装しようとしたが、容量が足りない localStorageを使うことにした localStorageとは Window.localStorage - Web APIs | MDN The localStorage property allows you to access a local Storage object. localStorage is similar to sessionStorage. The only difference is that, while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when t
Angular 2 @Outputのアレコレ - Qiita
おはようございます、@armorik83です。Angular 2の特徴的なAPIとして、前回は@Inputを紹介しましたが、今回は@Outputを取り上げます。 記事のサポート遅れについてお知らせとお詫び 先週の記事ではAngular 2 alpha.47を使用していたはずが、本稿執筆時点での最新バージョンはalpha.53となっており、何やら怒涛の勢いでalphaリリースが行われています。APIが安定する（と予想される）betaまでに詰め込めるだけのBreaking Changeを詰め込めという様子で、すでに先週公開した記事が最新alphaでは動かないという信じがたい状況になっております。変更の傾向を見ていると、機能そのものの追加や削減は見られないため、本記事が役に立たなくなることは無いと思っていますが、betaまで見守っているという状況です。このような情報鮮度のため読者諸氏にはご迷惑を
Angular 2入門：NgModelに触れてみる - Qiita
【20160819更新】rc.5対応した記事を書きました。Angular 2入門：NgModelに触れてみる [rc.5対応] この記事で書かれている内容は古いため参考にされないようご注意ください。 おはようございます。今井です。 最近は、ng-kyotoというAngularユーザーコミュニティでオーガナイザーをさせていただいております。Angular 2というこれまでのAngular JSとは全く異なる（！？）フレームワークがそろそろβ版になるということで、初めて触れる次第です。 私が初めてAngular JSと触れた時に一番印象的だったのは双方向バインディングだったような気がします。その双方向バインディングがAngular 2でどうなったのかを見てみたいと思います。 注意：この記事では、Angular 1.xをAngular JS。Angular 2.xをAngular 2と呼称します
Angluar2のクイックスタートとチュートリアルを実施 - その7 - Qiita
前回の投稿Angluar2のクイックスタートとチュートリアルを実施 - その6の続きです。 前回作成したソースを使用します。 本章ではhttpを通してリモートサーバーのweb APIを呼び出し、データの取得・追加・削除する方法を学びます。 本章もかなり長いです... 本投稿の参照元(英語) HTTP - ts 本章で学ぶこと 前述のほか、以下を学びます。 インメモリweb APIの作り方(深入りはしません) Observableの使い方 尚、本章のメインテーマはAngularのHTTPライブラリの紹介ですので、インメモリwebAPIについての説明は主題ではありません。より多くインメモリwebAPIについて学習したい場合、HTTP client chapter(英語)を参照ください。インメモリwebAPIはデモンストレーションのために使用しています。何か替わりになるリモートサーバをお持ちであ
Angular Universalを試して数か月経ったので学びを書いていく - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? (この内容は社内LTで使ったものを文章化して引き伸ばしたものです。) (ゆっくり書いていたらAngular 4 RCが出てしまいました。。。) Angular Universalを使って、隙間時間にちまちまと社内向けのサービスを開発しました。 その間に試していて、詰まったり引っかかったりしたことを連々と書いていきます。 はじめに そもそもAngular Universalとは何かに関してはQuramyさんのこちらのAngular2のServer Side Renderingに触れてみるにお任せしたいと思います。 タイトルの通りAngul
Angular2 DOC GUIDEを翻訳する[DEPENDENCY INJECTION] - Qiita
export class Car { public engine: Engine; public tires: Tires; public description = 'No DI'; constructor() { this.engine = new Engine(); this.tires = new Tires(); } // Method using the engine and tires drive() { return `${this.description} car with ` + `${this.engine.cylinders} cylinders and ${this.tires.make} tires.`; } } Carはコンストラクタの中で必要なものをすべて作り出しています。何が問題なのでしょうか。問題は、Carクラスが脆弱で柔軟性がなく、テストが難しくなって
![Angular2 DOC GUIDEを翻訳する[DEPENDENCY INJECTION] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/c04b38fb3d910bf347852406582c23f2586dff12/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%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTEyNTY2JTJGcHJvZmlsZS1pbWFnZXMlMkYxNDc0NzA0ODAyP2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPWQ0YjRiNWM1Y2E0MTkzN2E5M2FhYjZmYWJjZGE4ZmE2%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Da28c9d9378cc1b2e083af52e73ec32bd%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9QW5ndWxhcjIlMjBET0MlMjBHVUlERSVFMyU4MiU5MiVFNyVCRiVCQiVFOCVBOCVCMyVFMyU4MSU5OSVFMyU4MiU4QiU1QkRFUEVOREVOQ1klMjBJTkpFQ1RJT04lNUQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz1lZDA0MGMzNjVjNDFjMDA0YzE0ODVkMzY0ODk3MzJkMw%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBZYW1hbW90bzA1MjUmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz0yZmU5YzEyNjY5ZjY1NTgxZGY5ODc4MTliZTI5MjA2Mg%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Df7265937b7e041f2df7b0e1a1dc0bfc7)
Angular入門: http通信部分やテストを試す - Qiita
概要 前回（Angular入門: Component/ServiceをTestまで含めて試す）の続きです。 今回は 通信処理の書き方 テストの書き方 動作確認・デプロイ を書いていきます。 作った画面 要件としては、前回分に加えて AsyncIncrementボタンを押すと、サーバーにデータを取りに行って非同期に数字が加算される。 という形です。 環境 angular-cli: beta-32 Angular: 2.4 NodeJS: 6.9 ソースコードはこちら↓ https://github.com/uryyyyyyy/angularSample/tree/async 前提：APIサーバー SPAの場合は、フロントのリソースはS3などのホスティングサービスから配信するかもしれません。 その場合はAPIサーバーのエンドポイントは別のホストになることが有り得ます。 本記事ではそのような配信
Angular入門: Component/ServiceをTestまで含めて試す - Qiita
import { Component } from '@angular/core'; import {CounterService} from './services/counter.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { point: number; constructor(private counterService: CounterService) { this.point = counterService.point.getValue(); counterService.point.subscribe((v) => this.p
Angular2のFormについて（その１） - Qiita
概要 Angular2とionic2でformを使った際に，バリデーションが少し面倒だったので，Angular2のformについて調べてみました．この記事は The Ultimate Guide to Forms in Angular2 を元にしています．元の記事は少々長いため，以下のように二部に分けて記事にします．うまく訳せていないところもあるので，元の記事はご自身で確認いただければと思います． なおionic2に関しては第２部の最後に，フォームのサンプルを書いてみたいと思います． 第１部 FormControl FormGroup FormBuilder バリデーション 第２部 カスタムバリデーション 変更をWatchする ngModelによる双方向データバインディング ionic2に組み込んでみる 第１部ではAngular2が用意するツールを用いてバリデーションを実装するまでを見てい
Angular-CLIチートシート - Qiita
@armorik83です。今回はangular-cliについてまとめます。 angular-cli https://cli.angular.io/ Prototype of a CLI for Angular 2 applications based on the ember-cli project. angular-cliはAngularの2.x以上（本稿ではAngularと記述する）を用いたアプリケーションの開発を補助するCLIツールである。 インストール インストールは至って簡単だ。 node_modulesのグローバル空間にインストールするため抵抗がある人もいるかもしれないが、その場合適宜工夫してもらいたい。基本的にコマンドラインツールとして使うので、筆者はあまり問題ないと考えているが、バージョン違いによる挙動の差異があり得るため、チームで運用する際はメンバー間でバージョンについて
Angular で template内補完やエラーチェックできるようになったよ - Qiita
どうも @Quramy です。 さて、今日も今日とてAngular + エディタ関連ネタです。そろそろAngular 2というと怒られるらしいのでAngularと書きます。 先に成果を見てもらうのが手っ取り早いですね。コイツを見れ。 見ての通り、Angular Componentのテンプレート中でプロパティ名補完とエラーチェックを行えるようにしてみました。 上図はVimのキャプチャですが、もし、これを読んでる貴方がVisual Studio Codeユーザーであるならば、これ以降は全く読まなくてよいです。https://github.com/angular/vscode-ng-language-service にVSC用のpluginが転がっているので、こいつを入れればいいさ。 今日の想定読者は、Emacs, Vim, Sublime Text あたりを使ってAngularのコードを書いて
安心して2017年を迎えるためのAngular最新動向チェック - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 忙しい人向けのまとめ Angularは破壊的変更を含む可能性のあるメジャーアップデートを 半年に1回 に定めました 次のメジャーアップデートは3月1日予定です 諸事情により来年3月にリリースされるのはAngular 4.0.0です 2.xで書いてるものは基本壊れないから怯えないで あとAngular2 って呼ばないで！ Angular だから！ 時間がある人はここから読んでね どうも、lacoです。ng-japanの代表とかやってます。 さて、2016年はAngularコミュニティにとって、とても重要な激動の1年になりました。去年の今頃
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Angular2の開発環境を構築する - Qiita
AngularとZone.jsとテストの話 - Qiita
Angular2 DOC GUIDEを翻訳する[DOCUMENTATION OVERVIEW] - Qiita![Angular2 DOC GUIDEを翻訳する[DOCUMENTATION OVERVIEW] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/6b1e7d82c7661763a79127e7292a47454628b4f6/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%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTEyNTY2JTJGcHJvZmlsZS1pbWFnZXMlMkYxNDc0NzA0ODAyP2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZiZz1GRkZGRkYmZm09cG5nMzImcz1mNTA3ZmZlOGIzNGQyMmRkYWYyMjhhODFlYTRkZTUxOA%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Df1d975cea459d15c60c236e8b575b56f%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9QW5ndWxhcjIlMjBET0MlMjBHVUlERSVFMyU4MiU5MiVFNyVCRiVCQiVFOCVBOCVCMyVFMyU4MSU5OSVFMyU4MiU4QiU1QkRPQ1VNRU5UQVRJT04lMjBPVkVSVklFVyU1RCZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPWIyYjhmNWY3M2Y3MjkyODRjMjE0M2E5ZTRlZDRhMTZm%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBZYW1hbW90bzA1MjUmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz0yZmU5YzEyNjY5ZjY1NTgxZGY5ODc4MTliZTI5MjA2Mg%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Db994c31bf3ebe2e2cca035add01b4ff4)
angular2のtemplate tagも使ってあげてほしいなーという話 - Qiita
ReactユーザーのためのAngular2ファーストステップ - Qiita
