この記事はAngular公式ブログ Version 5.0.0 of Angular Now Availableを元に翻訳、加筆したものです。 Angularのバージョン5.0.0、pentagonal-donutをリリースしました。このリリースは新機能とバグ修正を含むメジャーリリースです。Angularの軽量化と高速化、そして使いやすさにフォーカスしつづけています。 ここではv5における大きな変更について取りあげます。すべてを知りたい方はチェンジログを参照してください。 Build Optimizer5.0.0以降、CLIで作成されたプロダクションビルドではデフォルトでビルドオプティマイザが適用されるようになりました。 ビルドオプティマイザは、Angularアプリケーションのセマンティックな理解をもとにバンドルサイズを小さくするためのCLI同梱のツールです。 ビルドオプティマイザには2つ

本書は、JavaScriptフレームワーク「Angular」の解説書です。データバインディング、コンポーネント、依存性注入などの基本から、ディレクティブ／パイプ／サービスの自作やテスト、さらに、Angular CLIやngx-bootstrapなど関連ツール、ライブラリといった応用分野まで網羅しています。 最新Angular 4に対応し、今後のアップグレードも考慮した内容になっており、これまでになく広い領域をカバーしています。これから始める方も、新しくなったAngularが気になる方も、必見の一冊です。 担当編集者からのコメント Google開発のJavaScriptアプリケーションフレームワーク「AngularJS」は、バージョン2で「Angular」と名称変更し、さらに高機能なフルスタックフレームワークへと生まれ変わりました。本書は、その「Angular」を初めて利用する入門者向けの書

リポジトリも複数に分けて管理していて、とても管理がかっこ悪い状態でした。 そこで、このアプリをAngular（2.x）に移行し、それぞれをComponent化することでリポジトリを一つで管理できるようにすることを考えました。 方針 Angular（2.x）のビルドにAngular CLIを使っている場合、ビルド時にenvironmentを使って環境を切り替えることができます。 Angular CLIで作成したコードは、初期状態で以下の2つのenvironmentが設定されています。

Angular CLIによる開発環境の構築、Webアプリのプロジェクト作成から実行までの手順をまとめました。 現時点の最新版「Angular 4」を対象としています。 Angular CLIを使用すると、Webアプリを簡単に作成・実行できるだけでなく、各種ファイルの自動生成やテスト、本番環境向けの最適化など、開発に必要な作業を効率良く行えます。 必要な環境 Node.jsとnpmのバージョン確認 Node.jsのインストール・アップデート Angular CLIのインストール はじめてインストールする場合 古いCLIがインストール済みの場合 動作確認 ヘルプ すべてのコマンドを表示 特定のコマンドを表示 プロジェクトの作成 オプション skip-install source-dir style Webアプリの実行・表示 あると便利なソフト Chrome（Webブラウザ） Visual St

npm install --save-dev coffee-script npm install --save-dev protractor npm install --save-dev grunt-protractor-runner npm install --save-dev protractor-coffee-preprocessor npm install --save-dev grunt-exec coffee-script CoffeeScript のコンパイラ はじめ -g で入れていたのだがプロジェクトの中に入れないと使えなかった protractor angularJS 御用達の E2E テストフレームワーク selenium を angularJS プロジェクトで使えるようによしなにカスタマイズしている grunt-protractor-runner protracto

はじめに Webサービスを開発するにあたり、JavaScriptのフレームワークは今や欠かせないものになりました。 多種多用なフレームワークがある中で、今回は主にwebサービスのフロントエンドで用いられるJavaScriptフレームワークをまとめました。 それぞれのJavaScriptフレームワークの詳しい使い方については、詳細に説明されているサイトが沢山あるので本記事では省略致します。 こんなフレームワークもあるんだなーと軽い感じで眺めていただけると幸いです！ 特徴 Vue.jsは、インタラクティブなWebインターフェイスを構築するためのライブラリで、MVVMアーキテクチャを採用しています。 HTML/JavaScript間の双方向データバインディングに特化していて、極力シンプルに実装できるようになっています。 シンプルに実装できることから、学習コストも低く初心者でも導入しやすいフレーム

2023 2023-07-27 読んだ本 2023-Q2 #日記 #読書 2023-07-19 発表スライド『New in Angular』 #io23jp #presentation #Angular 2023-06-25 PHPカンファレンス福岡遠征を終えて #phpconfuk #日記 2023-06-24 発表スライド『DOMのテストがどんどん書きたくなるTesting Libraryの世界への招待』 #presentation #testing #Testing Library 2023-06-23 Notion AIがslugを作ってくれるらしい #雑記 #Notion 2023-06-22 発表スライド『Signalsとはいったい何なのか』 #presentation #Angular #Signals 2023-06-08 Signals 雑記 (2023-06-21) #

The Problem:When you need to iterate over a collection in Angular 2, you will probably use the ngFor directive that will instantiate a template once per item from the collection. If we need at some point to change the data in the collection, for example as a result of an API request, we have a problem because Angular can’t keep track of items in the collection and has no knowledge of which items h

このポストは以下の記事を、筆者の許諾を得て意訳したものです。 JavaScript Modules: A Beginner’s Guide 何か誤りがありましたら、ご指摘いただけると幸いです。 （以下、意訳） はしがき もしあなたがJavaScriptの初心者だとしたら、以下の言葉は全く意味の分からないものかもしれません。 モジュール管理 vs モジュール読み込み Webpack vs Browserify AMD vs CommonJS 等々…。 それでもJavaScriptのモジュール周りについて、苦手意識を持たないでください。モジュールに関して理解することは、Webエンジニアにとっては必須科目なのです。 このポストでは、カンタンな解説とコードサンプルによって上記のようなバズワードを解説します。このポストがあなたにとってお役に立つものでありますように。 注：簡素化のために、このポストは

Angular2 の実装の方法は記事をよく目にする機会が増えたので、テストについての自分が困らないように調べてみたシリーズ。 今回は XHR が関連するテスト。 （注意）Angular 2.0.0-beta.9 をベースに話しています。 E2E テストは protractor がそのまま利用できると思うので、ここでのテストはユニットテストの話です。 Angular2 Unit Testing 準備 基本 Mock, Spy の基本(TBD) DOM のテスト XHR のテスト Component のテスト(TBD) Service のテスト(TBD) Pipe のテスト Directive のテスト(TBD) カバレッジ XHR のテスト XHR 通信が関連するテストについて紹介します。 Angular1 には XHR 通信を行う$httpサービスがありました。 XHR 通信をテストする場

2023 2023-07-19 発表スライド『New in Angular』 #io23jp #presentation #Angular 2023-06-25 PHPカンファレンス福岡遠征を終えて #phpconfuk #日記 2023-06-24 発表スライド『DOMのテストがどんどん書きたくなるTesting Libraryの世界への招待』 #presentation #testing #Testing Library 2023-06-23 Notion AIがslugを作ってくれるらしい #雑記 #Notion 2023-06-22 発表スライド『Signalsとはいったい何なのか』 #presentation #Angular #Signals 2023-06-08 Signals 雑記 (2023-06-21) #雑記 #Signals #Angular 2023-06-06

この記事はJavaScript Advent Calendar 2014の記事でもなければ、Frontrend Advent Calendar 2014の記事でもありません。 べ、べつに書こうと思ったらすでに埋まってたとかじゃないんだからねっ！ CSSアニメーションやSVGアニメーションなどを抽象的にタイムラインベースで扱うことのできる web-animations-js が便利なので使い方などを書いておきたいと思います。 公式サイト：https://www.polymer-project.org/platform/web-animations.html リポジトリ：https://github.com/web-animations/web-animations-js これは何？ web-animations-jsは、 Web Animations API をJSで実装したPolyfill

前回の投稿Angluar2のクイックスタートとチュートリアルを実施 - その6の続きです。 前回作成したソースを使用します。 本章ではhttpを通してリモートサーバーのweb APIを呼び出し、データの取得・追加・削除する方法を学びます。 本章もかなり長いです... 本投稿の参照元(英語) HTTP - ts 本章で学ぶこと 前述のほか、以下を学びます。 インメモリweb APIの作り方(深入りはしません) Observableの使い方 尚、本章のメインテーマはAngularのHTTPライブラリの紹介ですので、インメモリwebAPIについての説明は主題ではありません。より多くインメモリwebAPIについて学習したい場合、HTTP client chapter(英語)を参照ください。インメモリwebAPIはデモンストレーションのために使用しています。何か替わりになるリモートサーバをお持ちであ

ID: FN1701007 Technique: HTML5 / JavaScript Package: Angular 2.1 「Angular 2入門 05: サービスをつくる」(以下「Angular 2入門 05」)でつくったサンプル「Angular 2 Example - Tour of Heroines: Part 5」は、データをファイル(mock-heroines.ts)から読み込み、オブジェクトのデータを得て、書き替えたりしていました。このデータをHTTPサービスにより、リモートで扱えるようにします。 01 HTTPサービスでデータを読み込む HTTPサービスで使うHttpModuleは、アドオンの@angular/httpモジュールからimportします。コアのモジュールには含まれていないのでご注意ください。もっとも、「Angular 2入門 01」(02「HTMLドキュ

@armorik83です。Angularアドベントカレンダーの4日目となる本日は、かつて好評だった拙記事"AngularJSアンチパターン集"にあやかって、Angular 2（以下、単にAngularと表記したときは2.0以上4未満を指す）について気をつけた方がよい点――アンチパターンをまとめたいと思います。 Angular 2.xでアンチパターンは起こりうるか Angular 1系とは大きくAPIが変わったAngular 2系。APIが大きく変わった理由として、Web標準により近い構成を取れるようにする目的がありました。例えば、angular.module()ではなくTypeScriptのimport fromをベースとするソース分割の仕組みであったり、ES2015 classを標準としたComponentやServiceの定義であったり、$qではなく標準のPromiseを使ったりなどで

どうも @Quramy です。このエントリはAngular Advent Calendar の3日目向けに書いています。 はじめに Angularにおいて、Componentのテストコードは少し癖が強いですね。少なくとも僕はそう感じました。 次のComponentを例としてみましょう。ngModel を使って name プロパティをバインディングしただけのシンプルなComponent です。 import { Component } from '@angular/core'; @Component({ selector: 'app-my-form', template: `<input [(ngModel)]="name">` }) export class MyFormComponent { name: string = ''; } このComponent に対して、「name プロパテ

記事の内容をrc.4に対応しました 動作サンプルについてはまだBeta版のままなのでご了承ください (2016/08/04) Angular2(rc.4)の使い方について簡潔にまとめてみました 細かい部分は省くので、公式サイトやQiita内に素晴らしい記事があるので そちらを参考にしてください インストール npm install @angular/common@2.0.0-rc.4 @angular/compiler@2.0.0-rc.4 @angular/core@2.0.0-rc.4 @angular/platform-browser@2.0.0-rc.4 @angular/platform-browser-dynamic@2.0.0-rc.4

トピック Angular2 CORE DOCUMENTATIONのGUIDEの翻訳です。 DOCUMENTATION OVERVIEW - ドキュメント概要 - ARCHITECTURE OVERVIEW - 構文概要 - DISPLAYING DATA - データ表示 - USER INPUT - ユーザー入力 - FORMS - フォーム - DEPENDENCY INJECTION - 依存性注入 - STYLE GUIDE -　スタイルガイド - 注意1）ここに掲載されていない項目は、Angular2 CORE DOCUMENTATIONのGUIDEを直接参照してください。 注意2）2016年11月22日時点の翻訳です。翻訳者はTOEICで700点くらいの英語力なので、英訳が間違っている可能性があります。しかもかなり意訳している箇所もあります。もし意訳を通り越して、誤訳になっている