AngularJSリファレンス

4,180円（本体 3,800円＋税10%）

品種名: 書籍
発売日: 2014/9/5
ページ数: 400
サイズ: B5変形判
著者: 池添明宏　著/金井健一　著/吉田徹生　著
ISBN: 9784844336686

試し読み
ダウンロード

Google発の人気JavaScriptフレームワークを徹底詳解！

Web開発者界隈で非常に注目度が上がっているAngularJSは、フルスタックであることを特長としています。クライアントサイドで必要な機能がひと通り揃っているため、不足機能を補おうと思い悩む必要がありません。また、Google社が注力して開発を進めている安心感もあります。さらに、ECMAScript 6やWebComponentsの仕様を視野に入れているなど、将来性も大変期待できます。本書はそのAngularJSの最新バージョン（1.2系／1.3系）について詳細に解説した技術書です。

目次を見る

紙の本を買う

電子版を買う

3,850円
（本体 3,500円＋税10%）

PDF / 9.68MB / 印刷可

直販電子版ご利用ガイド

インプレスで電子版を買う（カートに入ります）

「読者アンケートに答える」「読者プレゼントに応募」の場合もこちらをご利用ください。

アンケートに答える

書籍の内容に関するお問い合わせはこちら。お答えできるのは本書に記載の内容に関することに限ります。

お問い合わせフォーム

お詫びと訂正

学校・法人一括購入に関するお問い合わせはこちらへ。

一括購入窓口

詳細

著者プロフィール

池添明宏（いけぞえ・あきひろ）

中堅SIerでロボットソフトウェアの研究開発に従事、2012年以降はアリエル・ネットワーク株式会社にてグループウェア開発を担当。Webアプリケーションのフロントエンド・サーバーサイド開発からWindows GUIアプリ、画像処理や組み込みソフトウェアなど幅広い分野に精通。最近はAngularJSはもちろん、TypeScriptやWebComponentsなどフロントエンドよりの技術に注目している。

金井健一（かない・けんいち）

SIer、Web制作会社を経て現在はフリーランスとして活動。AngularJS Japan User Group管理人やhtml5j Web先端技術味見部部長を務め、多彩な勉強会やイベントなどの主催、セミナー講師や各種メディアへの寄稿などもおこなっている。
・AngularJS Japan User Group
https://groups.google.com/forum/#!forum/angularjs-jp
・html5j Web先端技術味見部
https://www.facebook.com/ajimibu/

吉田徹生（よしだ・てっせい）

JavaScriptに魅せられてWEB業界に参入しフロントエンドを主に開発。現在はEラーニングの開発をメインにサーバーサイドからフロントエンドまでを担当。サーバーサイドにNode.jsを利用するなど生粋のJavaScript愛好家であり、WebRTCやWeb Audio APIなどの先端技術をどうやってAngularJSと繋げるか、日々考えている。

Chapter 01　基本機能の概要
1-1　AngularJSとは？
1-2　AngularJSのダウンロード
1-3　AngularJSの基本機能紹介

Chapter 02　ビルトインディレクティブ
2-1　DOM操作
2-2　イベント
2-3　form・input
2-4　その他

Chapter 03　フィルター・サービス・フォームバリデーション
3-1　フィルター
3-2　サービス
3-3　フォームバリデーション

Chapter 04　グローバルAPI
4-1　オブジェクト操作
4-2　汎用メソッド
4-3　DOM操作

Chapter 05　モジュールとDI
5-1　モジュール
5-2　DI（Dependency Injection）
5-3　AngularJSの起動

Chapter 06　スコープとコントローラ
6-1　スコープとコントローラの基本
6-2　スコープの適用範囲とインスタンス
6-3　スコープの監視と反映
6-4　AngularJSアプリケーションのアーキテクチャ

Chapter 07　ルーティングと通信
7-1　プロミス
7-2　ルーティング
7-3　サーバとの通信

Chapter 08　カスタムフィルター
8-1　フィルターの作成
8-2　フィルター実装時の注意点

Chapter 09　カスタムサービス
9-1　サービスの登録
9-2　サービス実装のコツと例

Chapter 10　カスタムディレクティブ
10-1　ディレクティブの仕組み
10-2　API仕様
10-3　ディレクティブの開発に利用可能なサービス
10-4　ディレクティブ実装例

Chapter 11　テスト
11-1　自動テストの基本
11-2　ユニットテスト
11-3　インテグレーションテスト

Chapter 12　セキュリティ
12-1　Webアプリケーションの脆弱性
12-2　XSSの基本対策
12-3　サニタイズ
12-4　SCE（Strict Contextual Escaping）
12-5　CSP（Content Security Policy）
12-6　HttpProvider

Chapter 13 ツール
13-1　開発ツール
13-2　UIコンポーネント
13-3　AngularJS Batarang

ダウンロード

本書で掲載しているサンプルコードです。
ダウンロードしてご利用下さい。

※Chapter 7のサンプルコード提供を開始しました。
- angularjs_book_sample_20150323.zip

お詫びと訂正

誤記のためにご迷惑をおかけし、誠に申し訳ございません。

27ページ図2.6のキャプション
- [誤]
  ng-switchでフォルト
- [正]
  ng-switchデフォルト
- 【第2刷にて修正】
32ページ 2-2-1　2行目
- [誤]
  右のボタンで+2
- [正]
  右のボタンで*2
- 【第2刷にて修正】
38ページリスト2.26のキャプション
- [誤]
  ngnFocus
- [正]
  ngFocus
- 【第2刷にて修正】
50ページ本文2行目の中程
- [誤]
  $event.x と $event.y から
- [正]
  $event.pageX と $event.pageY から
50ページページ下のリスト2.39のキャプション
- [誤]
  リスト 2.39: $event.x, $event.y
- [正]
  リスト 2.39: $event.pageX, $event.pageY
51ページリスト2.39の下から13行目以降の8行分
- [誤]
  　　　$scope.over = function($event){
  　　　　$scope.ev.mo = { x: $event.x, y: $event.y };
  　　　}
  　　　$scope.move = function($event){
  　　　　$scope.ev.mm = { x: $event.x, y: $event.y };
  　　　}
  　　　$scope.leave = function($event){
  　　　　$scope.ev.ml = { x: $event.x, y: $event.y };
  　　　}
- [正]
  　　　$scope.over = function($event){
  　　　　$scope.ev.mo = { x: $event.pageX, y: $event.pageY };
  　　　}
  　　　$scope.move = function($event){
  　　　　$scope.ev.mm = { x: $event.pageX, y: $event.pageY };
  　　　}
  　　　$scope.leave = function($event){
  　　　　$scope.ev.ml = { x: $event.pageX, y: $event.pageY };
  　　　}
- 【第2刷にて修正】
56ページリスト2.47の12行目
- [誤]
  ng-true-value="On" ng-false-value="Off"
- [正]
  ng-true-value="'On'" ng-false-value="'Off'"
- 【第2刷にて修正】
57ページリスト2.50の内容
- [誤]
  <input type="radio"
  　　　　　　　ng-model=""
  　　　　　　　name=""
  　　　　　　　value=""
  　　　　　　　ng-value=""
  　　　　　　　ng-change="">
- [正]
  <input type="dateTimeLocal"
  　　　　　　　ng-model=""
  　　　　　　　name=""
  　　　　　　　min=""
  　　　　　　　max=""
  　　　　　　　required=""
  　　　　　　　ng-required=""
  　　　　　　　ng-change="">
- 【第2刷にて修正】
68ページ 2つ目の項目タイトル名
- [誤]
  機能追加
- [正]
  仕様追加
- 【第2刷にて修正】
72ページ表3.1の4行目
- [誤]
  AD 2010 => 1000
- [正]
  AD 2010 => 10
- 【第2刷にて修正】
94ページリスト 3.24の上。本文の末尾行から2～3行目
- [誤]
  ng-minlengthが最小文字列長、ng-minlengthが最大文字列長です。
- [正]
  ng-minlengthが最小文字列長、ng-maxlengthが最大文字列長です。
107ページ表4.6　「引数」行の「名前」列の3行目
- [誤]
  args
- [正]
  context
- 【第2刷にて修正】
130ページリスト5.11のコード下の本文1行目
- [誤]
  factoryメソッドでは、足し算をするadd関数を直接サービスとして登録するのではなく、「createAdditionService関数を返す」関数を登録します。
- [正]
  factoryメソッドでは、足し算をするadd関数を直接サービスとして登録するのではなく、「add関数を返す」関数を登録します。
- 【第2刷にて修正】
137ページ最終行
- [誤]
  $injector#inokeメソッドの
- [正]
  $injector#invokeメソッドの
- 【第2刷にて修正】
138ページリスト 5.22
- [誤]
  var app = angular.module('app', []);
  app.value('myValue', 1234);
  
  var injector = angular.injector(['ng', 'app']);
  
  injector.invoke(function (myValue) {
  　console.log(myValue);
  });
  
  injector.invoke(function (myValue) {
  　console.log(myValue);
  });
  
  injector.invoke(function (myValue) {
  　console.log(myValue);
  }, injector, {myValue: 5678});
- [正]
  var app = angular.module('app', []);
  app.value('myValue', 1234);
  
  var injector = angular.injector(['ng', 'app']);
  
  injector.invoke(function (myValue) {
  　console.log(myValue);
  });
  
  var myContext = {config: 9999};
  
  injector.invoke(function (myValue) {
  　console.log(myValue);
  　console.log(this.config);
  }, myContext);
  
  injector.invoke(function (myValue) {
  　console.log(myValue);
  　console.log(this.config);
  }, myContext, {myValue: 5678});
- 【第3刷にて修正】
148ページ図6.3の左側のコード
- [誤]
  <input type=text" "ng-model= "message">
  …
  <p> <{{message}}</p>
- [正]
  <input type="text" ng-model= "message">
  …
  <p> {{message}}</p>
- 【第2刷にて修正】
149ページ図6.4の左側のコード
- [誤]
  <input type=text" "ng-model= "message">
  …
  <p> <{{message}}</p>
- [正]
  <input type="text" ng-model= "message">
  …
  <p> {{message}}</p>
- 【第2刷にて修正】
179ページリスト7.11　このページの下から2行目
- [誤]
  .otherWise({
- [正]
  .otherwise({
184ページリスト7.21
- [誤]
  $http.defaults.transformResponse.push([function(data){
  　data.hello = "world";
  　return data;
  });
- [正]
  $http.get('/api/get', {transformResponse: [function(data){
  　data.hello = "world";
  　return data;
  }]});
- 【第2刷にて修正】
184ページリスト7.20のコード直下の本文
- [誤]
  　また、限定したい場合は、$http.defaults.transformRequest、$http.defaults.transformResponseで設定します。
- [正]
  　また、限定したい場合は、$httpのconfigにてtransformResuest、transformResponseで設定します。
- 【第3刷にて修正】
188ページ表7.8の直下の本文2～3行目
- [誤]
  データをPOSTで送りパラメータにbirthday-trueを付与します（リスト7.24）。データ更新に関する処理はPUTメソッドを利用したいと思いますが、
- [正]
  データをPOSTで送りパラメータにyear-trueを付与します（リスト7.24）。データ更新に関する処理はPUTメソッドを利用したいかもしれませんが、
- 【第2刷にて修正】
189ページリスト7.26の前半
- [誤]
  var app = angular('app',[]);
  app.controller('WebsocketCtrl', ['$scope', '$rootScope', function($scope, $rootScope){
  　var ws = WebSocket('ws://example.jp/websocket');
  　ws.onmessage = function(event){
  　　$scope.data = event.data;
  　　if(!$rootScope.$$phase) $scope.$apply();
  　};
- [正]
  var app = angular.module('app',[]);
  app.controller('WebsocketCtrl', ['$scope', '$rootScope', '$timeout',
  　　　　　　　　　　　　　　　　 function($scope, $rootScope, $timeout){
  　var ws = new WebSocket('ws://example.jp/', 'websocket');
  　ws.onmessage = function(event){
  　　$scope.data = event.data;
  　　$timeout(function(){$scope.$apply();});
  　};
- 【第3刷にて修正】
190ページ上から2つ目の段落
- [誤]
  　また、画面更新など重い処理を実行している際、$apply処理が終わる前に次のmessageが来てしまうとエラーとなります。それを防ぐため、$$phaseをチェックして現在実行されている処理を取得し、$$phaseがnullの場合に$applyを実行するようにしましょう。
- [正]
  　また、画面更新など重い処理を実行している際に、$apply処理が終わる前に次のmessageが届くとエラーとなります。これを回避するため$timeoutで$applyを実行することで、仮に処理が実行されている途中であっても、その後に実行されます。
- 【第3刷にて修正】
190ページ本文の後半
- [誤]
  したがって、onmessasge
- [正]
  したがって、onmessage
- 【第3刷にて修正】
220ページ表9.6の5列目の見出し
- [誤]
  Module#decoratorによる書き換え
- [正]
  $provide.decoratorによる書き換え
- 【第2刷にて修正】
227ページページ上のリストの上から2行目（コメント）
- [誤]
  // コンパイル処理: preタグ内の…
- [正]
  // コンパイル処理: divタグ内の…
227ページページ上のリストの上から5行目（コメント）
- [誤]
  … preタグ内のテキストを変更する
- [正]
  … divタグ内のテキストを変更する
228ページ図10.1内の真ん中の囲み
- [誤]
  This is may favorite directive!
- [正]
  This is my favorite directive!
- 【第3刷にて修正】
229ページ図10.2中央の長方形の上部
- [誤]
  SasyncQueue
- [正]
  $asyncQueue
- 【第2刷にて修正】
234ページ本文の末尾
- [誤]
  次の指定も可能ですリスト10.5）
- [正]
  次の指定も可能です（リスト10.5）。
- 【第2刷にて修正】
261ページリスト10.52　ページ上から3行目～11行目
- [誤]
  　}])
  　.directive('tabSet', function () {
  　　return {
  　　　restrict: 'E',
  　　　scope: {},
  　　　template: '<select ng-model="selectedTab"
  　　　　　　　　　　　　 ng-options="tab.header for tab in tabs" >' +
  　　　　'</select>' +
  　　　　'<div ng-transclude></div>',
- [正]
  }]).directive('tabSet', function () {
  　return {
  　　restrict: 'E',
  　　scope: {},
  　　template: '<select ng-model="selectedTab"' +
  　　　　　　　' ng-options="tab.header for tab in tabs" >' +
  　　　　　　　'</select><div ng-transclude></div>',
- 【第3刷にて修正】
261ページリスト10.52　下から3行目～11行目
- [誤]
  　})
  　.directive('tab', function () {
  　　return {
  　　　restrict: 'E',
  　　　scope: {},
  　　　template: '<div ng-show="isActive"><div ng-transclude></div></div>',
  　　　require: '^tabSet',
  　　　transclude: true,
  　　　link: function (scope, element, attrs, tabSetCtrl) {
  　　　　scope.header = attrs.header;
  　　　　// tabSetController に scope を追加
  　　　　tabSetCtrl.addTab(scope);
  　　　}
  　　}
  　});
- [正]
  }).directive('tab', function () {
  　return {
  　　restrict: 'E',
  　　scope: {},
  　　template: '<div ng-show="tab.isActive"><div ng-transclude></div></div>',
  　　require: '^tabSet',
  　　transclude: true,
  　　link: function (scope, element, attrs, tabSetCtrl) {
  　　　scope.tab = {
  　　　isActive: false,
  　　　header: attrs.header
  　　};
  　　tabSetCtrl.addTab(scope.tab);
  　　}
  　}
  });
- 【第3刷にて修正】
262ページ本文2行目
- [誤]
  「Knockout.js」や「Ember.j」sでは
- [正]
  「Knockout.js」や「Ember.js」では
- 【第2刷にて修正】
304ページ表11.1の「関数名」列の1～3行目、9行目
- [誤]
  toBe/toNotBe
  toEqual/toNotEqual
  toMatch/toNotMatch
  …
  toContain/toNotContain
- [正]
  toBe/not.toBe
  toEqual/not.toEqual
  toMatch/not.toMatch
  …
  toContain/not.toContain
- 【第2刷にて修正】
312ページ表11.3の「引数」行の1行目、「説明」列の内容
- [誤]
  デコレートしたいサービスの名前の名前
- [正]
  デコレートしたいサービスの名前
- 【第2刷にて修正】
319ページリスト11.21の9行目
- [誤]
  input = element(by.input('inputText'));
- [正]
  input = element(by.model('inputText'));
- 【第2刷にて修正】
324ページページ上の表の下。本文2行目
- [誤]
  では、by.input('inputText')
- [正]
  では、by.model('inputText')
- 【第2刷にて修正】
324ページリスト11.25
- [誤]
  input = element(by.input('inputText'));
- [正]
  input = element(by.model('inputText'));
- 【第2刷にて修正】
329ページコードの上から17行目（リスト11.31）
- [誤]
  input = element(by.input('inputText'));
- [正]
  input = element(by.model('inputText'));
- 【第2刷にて修正】
329ページコードの下から7行目（リスト11.31）
- [誤]
  var done = element(by.repeater('todo in todos').row(0))
  　.element(by.input('todo.done'));
- [正]
  var done = element(by.repeater('todo in todos').row(0))
  　.element(by.model('todo.done'));
- 【第2刷にて修正】
356ページ本文のページ下から4行目
- [誤]
  　なお、bower.initを用意しておくと、
- [正]
  　なお、bower.jsonを用意しておくと、
- 【第2刷にて修正】

お問い合わせ

書籍の内容に関するお問い合わせはこちら。お答えできるのは本書に記載の内容に関することに限ります。

お問い合わせフォーム