You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

概要 前回（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サーバーのエンドポイントは別のホストになることが有り得ます。 本記事ではそのような配信

<p>Counter</p> <p>Point: {{point}}</p> <button (click)="increment(3)">Increment 3</button> <button (click)="decrement(2)">Decrement 2</button> 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; c

関ジャバで発表した資料です。

Learning path - 学習方法 - ほとんどのページは独立しているので、ガイドをそのまま読み進める必要はありません。 新しくAngularを始める方には、次のようにガイドセクションを進めていく学習方法をお勧めします。 全体像を知るために、Architecture overview(英文)を読みます。 QuickStart(英文)を試してみてください。QuickStartはAngularの"Hello, World"です。その過程を通して、Angularアプリを書くために必要なライブラリやツールのセットアップ方法がわかります。 QuickStartではカバーしきれなかった点をフォローしてくれるTour of Heroes tutorial(英文)に従い、簡易的なテータ駆動型アプリを作成してください。そのアプリでは、本格的なアプリケーションとして重要となる次の特徴を試すことができます

Angular 2を使うならUIはコレで！Ionic 2ことはじめ（正式リリース版対応） 榊原昌彦（一般社団法人リレーションデザイン研究所 ...） Web制作してると、また新技術が出たのかと思うと、気づいたら「新常識」が増えてたということに頻繁に出会います。 タスクランナー、SCSS、LiveReload、SPA、PWA、ハイブリッドアプリ。そういった近年のキーワードを一気に体験できるUIフレームワーク「Ionic 2」が先日リリースされましたので、ご紹介します。 編集部注: Angular 2の正式名称は「Angular」ですが、現状だと「AngularJS 1.x」のことを呼称していると誤解される可能性が高いと判断し、本稿では「Angular 2」で統一させていただきます 記事の内容が古くなってたので、2017年8月11日に更新しました Ionic 2の概要 Ionic2は、アメリカ

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クラスが脆弱で柔軟性がなく、テストが難しくなって

Angular Playground

Brussels — The hybrid city (edited)In this post I want to rise some awareness around the latest Naming Guidelines for Angular content. Last week, the Angular Team published the new guidelines applying to Angular branding and as an extension concerning to content creators in the Angular Community: online tutorials, blog posts, videos, etc. This affects how the Angular team will be referring both to

Theme 第 24 回のテーマは Angular2 です。 今回は、ゲストとして Angular のコントリビュータであり、 ng_japan の代表である @laco0416 をお迎えして、 9 月に公開された Angular2 の内容や、現代のフロントエンド開発に向けたフルスタックフレームワークとして Angular2 が何を選んだのか、それは今後の Web 開発にどういう影響を及ぼして行くのか。 Angular 自身、そしてそれを取り巻くエコシステムや標準化の現場で「今何がおこっているのか」と「これからどうなっていくのか」について議論しました。 (本編の最後に話していたイベントですが、このエピソード公開時点で終わってしまっていました。間に合わなくてすいません。。) Show Note Angular2 Angular 2.0.0 がリリースされました module https://

はじめに Angular 2はGoogleとオープンソースコミュニティで開発されているJavaScriptフレームワークで、従来のAngularJS（AngularJS 1）の次期バージョンです。2016年9月に正式版がリリースされ、本格的に利用できる環境が整いました。Angular 2はAngularJS 1に対して多くの変更点があり、コードの記述法も基本的に異なります。 前回記事では、Angular 2のWebページを構成する要素である、コンポーネントやモジュールについて説明しました。これらを利用すると、実装を分割して互いの影響範囲を限定することができます。 しかし、ログ出力のようにさまざまな箇所で使われる処理や、ビジネスロジックのような画面から独立した処理は、独立して実装した処理を、後から追加できれば便利です。Angular 2ではこのような機能として、独立した処理を実装する「サービ

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

※現在では、Web標準技術を利用したアプリ開発が広く普及し、そのためのフレームワークも多数存在しています。その中でも主流のフレームワークの1つである「Angular」を活用し、そのための知識を備えることには大きな意味があります。本連載は、Angularユーザーに向けて、その使いこなしTIPSを紹介するものです。なお、本連載は「Build Insider」で公開していた連載「Angular Tips」を同サイトおよび筆者の了解を得たうえで、本フォーラムに移行したものです。記事はBuild Insiderで公開した状態のまま移行しているため、用語統一などの基準が＠ITの通常の記事とは異なる場合があります。

どうも、らこです。今週も予定通り新しいバージョンのリリースが行われました。現在リリースされているバージョンは以下のとおりです latest next core 2.1.2 2.2.0-beta.1 router 3.1.2 3.2.0-beta.1 それでは今回の注目すべき変更点をまとめます。 2.1.2 Bug Fixes compiler: walk third party modules (#12453) (a838aba), closes #11889 #12428 サードパーティライブラリが提供するDirectiveを使ったときに、AoTコンパイルで生成されるコードが正しくないimport文を含むバグが修正されました compiler: use Maps instead of objects in selector implementation (d321b0e) Compone