AngularJSリファレンス

AngularJSリファレンス

¥3,800+税

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

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

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

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

アンケートに答える

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

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

一括購入窓口

詳細

著者プロフィール

池添 明宏(いけぞえ・あきひろ)
中堅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

関連書籍

好評発売中

スラスラ読める Rubyふりがなプログラミング

コードを読む力でレールを乗りこなそう!

好評発売中

できるキッズ 子どもと学ぶJavaScriptプログラミング入門

キーボードを使ったプログラミングが楽しく身につく!

好評発売中

改訂4版 基礎Ruby on Rails

Webアプリケーション開発の実際を学ぶ定番

ダウンロード

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

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

お詫びと訂正

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

  • 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刷にて修正 】

お問い合わせ

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

お問い合わせフォーム