Angular 5.0.0がリリースされました
この記事は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つ
【新刊紹介】『Angularアプリケーションプログラミング』8月4日発売、定番JavaScriptのフレームワークを徹底解説
CodeZineに記事を寄稿していただいている、WINGSプロジェクト代表 山田祥寛さんの新刊『Angularアプリケーションプログラミング』が8月4日に技術評論社より刊行されました。 本書は、JavaScriptフレームワーク「Angular」の解説書です。データバインディング、コンポーネント、依存性注入などの基本から、ディレクティブ／パイプ／サービスの自作やテスト、さらに、Angular CLIやngx-bootstrapなど関連ツール、ライブラリといった応用分野まで網羅しています。 最新Angular 4に対応し、今後のアップグレードも考慮した内容になっており、これまでになく広い領域をカバーしています。これから始める方も、新しくなったAngularが気になる方も、必見の一冊です。 担当編集者からのコメント Google開発のJavaScriptアプリケーションフレームワーク「Angu
AngularでEnvironmentを使って複数環境のアプリをデプロイする - Qiita
Help us understand the problem. What are the problem?
【Angular】開発環境の構築（Angular 4対応） - STDIO
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
Angular Router: Empty Paths, Componentless Routes, and Redirects
At the core of the Angular router lies a powerful URL matching engine, which transforms URLs and converts them into router states. In this article I will show how to use three of the engine’s features: empty-path routes, componentless routes, and redirects. And how using them together, we can implement advanced patterns in just a few lines of code. Empty-Path RoutesLet’s start with this configurat
【2016年夏】個人的に注目なフロントエンドで使えるJavaScriptフレームワークまとめ - Qiita
特徴 Vue.jsは、インタラクティブなWebインターフェイスを構築するためのライブラリで、MVVMアーキテクチャを採用しています。 HTML/JavaScript間の双方向データバインディングに特化していて、極力シンプルに実装できるようになっています。 シンプルに実装できることから、学習コストも低く初心者でも導入しやすいフレームワークです。 その一方で、コンポーネント間を親から子へと流れる単方向のデータフローを使用することで、データの流れがより簡潔になり大規模なアプリケーションに対して用いることも可能になります。 jp.vuejs.orgではざっくりと以下のようにまとめられています。 シンプル: いくつかHTMLを書いて、いくつかJSONを持ってきて、Vueインスタンスを作って、それでおしまいです。 リアクティブ: 式(expression)と透過依存性トラッキングによる算出プロパティ(
[日本語訳] ViewChildren and ContentChildren in Angular 2 | <output type="laco">
Original: ViewChildren and ContentChildren in Angular 2 Written by: Minko Gechev Translated at: 04/16/2016 この記事ではAngular 2の View Children と Content Children の違いについて解説します。 それぞれの子要素に対して、親コンポーネントからどのようにアクセスするのかを理解し、 そして@Componentデコレータの providers と viewProviders の2つのプロパティの違いについても述べていきます。 プリミティブの合成 まず初めに、Angular 2のコンポーネントとディレクティブの関係についておさらいしましょう。 ユーザーインタフェースを作るのに一般的なデザインはCompositeパターンです。 このデザインパターンは異なる
![[日本語訳] ViewChildren and ContentChildren in Angular 2 | <output type="laco">](https://cdn-ak-scissors.b.st-hatena.com/image/square/161e689c07a03651eb2eddae36fa4617baf54c6c/height=288;version=1;width=512/https%3A%2F%2Fblog.lacolaco.net%2Fimg%2Ficon.png)
Angular 2 — Improve Performance with trackBy
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モジュール講座 Part1 - Qiita
このポストは以下の記事を、筆者の許諾を得て意訳したものです。 JavaScript Modules: A Beginner’s Guide 何か誤りがありましたら、ご指摘いただけると幸いです。 （以下、意訳） はしがき もしあなたがJavaScriptの初心者だとしたら、以下の言葉は全く意味の分からないものかもしれません。 モジュール管理 vs モジュール読み込み Webpack vs Browserify AMD vs CommonJS 等々…。 それでもJavaScriptのモジュール周りについて、苦手意識を持たないでください。モジュールに関して理解することは、Webエンジニアにとっては必須科目なのです。 このポストでは、カンタンな解説とコードサンプルによって上記のようなバズワードを解説します。このポストがあなたにとってお役に立つものでありますように。 注：簡素化のために、このポストは
![[意訳]初学者のためのJavaScriptモジュール講座 Part1 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/d3cb4e29ff53a96cafac0549350570fcfb250eb1/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JTVCJUU2JTg0JThGJUU4JUE4JUIzJTVEJUU1JTg4JTlEJUU1JUFEJUE2JUU4JTgwJTg1JUUzJTgxJUFFJUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJUFFSmF2YVNjcmlwdCVFMyU4MyVBMiVFMyU4MiVCOCVFMyU4MyVBNSVFMyU4MyVCQyVFMyU4MyVBQiVFOCVBQyU5QiVFNSVCQSVBNyUyMFBhcnQxJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1mMWMwNDVlNTE2ZjQ4MDVkNTk5NTY3ZWNkYWI3NjU5NA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwY2h1Y2swNTIzJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wYmU4Nzk0Mzg4MjBiNjRhMWVlMGFkNmI1NTI5MTg5ZA%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D869925ae4c8adde2c69d417970def85c)
Angular2 Unit Testing - XHRのテスト
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通信をテストする場合は、$httpをMockする$http
Simple Observable Unit Testing in Angular2
When you’re writing unit tests for your angular2 components, and you throw observables into the mix, things can get complicated fast. Some people go the more complicated route, faking responses from the actual service itself — but on the component level I feel this can get overly complicated. I prefer to test my services themselves, rather then writing fake responses with fake data for every compo
[Angular 4.0] formsモジュールの更新について | <output type="laco">
Angular 4.0ではformsモジュールにいくつかの変更が入っています。 追加された新機能と、新しいNgFormの挙動について解説します。 emailバリデータの追加 新たに組み込みのemailバリデータが追加され、input[type=email]要素の値が正しくメールアドレスの文字列になっているかどうか、NgFormがチェックするようになります。 組み込みバリデータなのでこの機能を使うために特別な記述は必要ありません。 equalsToバリデータの追加 こちらが目玉の機能です。 equalsToバリデータは、入力された値が特定のコントロールの値と同じかどうかを検査してくれるものです。 メールアドレスの確認など、同じ内容を2回入力させるようなフォームで有用です。 使い方は次のようになります。equalsTo属性の右辺には一致させたいコントロールの 絶対パス を設定します。 <for
web-animations-jsで策定中のAPIを先取りする - Qiita
この記事は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のクイックスタートとチュートリアルを実施 - その7 - Qiita
前回の投稿Angluar2のクイックスタートとチュートリアルを実施 - その6の続きです。 前回作成したソースを使用します。 本章ではhttpを通してリモートサーバーのweb APIを呼び出し、データの取得・追加・削除する方法を学びます。 本章もかなり長いです... 本投稿の参照元(英語) HTTP - ts 本章で学ぶこと 前述のほか、以下を学びます。 インメモリweb APIの作り方(深入りはしません) Observableの使い方 尚、本章のメインテーマはAngularのHTTPライブラリの紹介ですので、インメモリwebAPIについての説明は主題ではありません。より多くインメモリwebAPIについて学習したい場合、HTTP client chapter(英語)を参照ください。インメモリwebAPIはデモンストレーションのために使用しています。何か替わりになるリモートサーバをお持ちであ
FN1701007 | Angular 2入門 06: HTTPサービスでデータを取得・保存する | HTML5 : テクニカルノート
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ドキュ
Angular 2アンチパターン集 - Qiita
@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を使ったりなどで
AngularとZone.jsとテストの話 - Qiita
/* tslint:disable:no-unused-variable */ import { inject, async, ComponentFixture, TestBed } from '@angular/core/testing'; import { FormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { DebugElement } from '@angular/core'; import { MyFormComponent } from './my-form.component'; describe('MyFormComponent', () => { let component: MyFormComponent; let fixture: Co
Angular2の使い方 - Qiita
Help us understand the problem. What are the problem?
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/c0a32ddcea35ebd547d96f17bcd29391d125302a/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9QW5ndWxhcjIlMjBET0MlMjBHVUlERSVFMyU4MiU5MiVFNyVCRiVCQiVFOCVBOCVCMyVFMyU4MSU5OSVFMyU4MiU4QiU1QkRFUEVOREVOQ1klMjBJTkpFQ1RJT04lNUQmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTU0NmY4NmU3MTY1YWZkZGY1MWQ3MjM2Mjk1MTVlZTE0%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwWWFtYW1vdG8wNTI1JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz00Y2I5NTAwMWU5YzRiYjI3MDk3NjUyNWI5YWQ2YTEzNA%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D605cb634980d8308eef0a06e32fa3171)
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Protractor × CoffeeScript × AngularJS （導入編） - Qiita
