Subscribed unsubscribe Subscribe Subscribe

AngularJSハンズオンに参加してみる

AngularJS WS samples - Google ドキュメント

$scopeは使わない

コントローラー内では
var vm = this;
とする。

※ng-controllerがネストする際にCtrl as nameを使用することで、変数名の名前空間を分けることができます。 ※詳細はスタイルガイドをご覧ください

AngularのDI

XxxxxxController.$inject = ['$timeout'];

※XxxxxxControllerに$timeoutがDIされます

$q(キーワードはdefer,promise)

$interval,$http,$resource,$timeoutは内部的に$qを使用していて、
$qはPromiseオブジェクトを返すようです。

Promiseとは

img1.ready().then(function() {
  // loaded
}, function() {
  // failed
});

// and…
Promise.all([img1.ready(), img2.ready()]).then(function() {
  // all loaded
}, function() {
  // one or more failed
});

At their most basic, promises are a bit like event listeners except:

A promise can only succeed or fail once. It cannot succeed or fail twice, neither can it switch from success to failure or vice versa
If a promise has succeeded or failed and you later add a success/failure callback, the correct callback will be called, even though the event took place earlier
This is extremely useful for async success/failure, because you're less interested in the exact time something became available, and more interested in reacting to the outcome.

複数の非同期処理が全てうまくいった場合 or notで処理を分けるためにあるようです。

ルーティング($routeProviderよりui-routerを使う)

myApp.config(function($stateProvider, $urlRouterProvider) {
  //
  // For any unmatched url, redirect to /state1
  $urlRouterProvider.otherwise("/state1");
  //
  // Now set up the states
  $stateProvider
    .state('state1', {
      url: "/state1",
      templateUrl: "partials/state1.html"
    })
    .state('state1.list', {
      url: "/list",
      templateUrl: "partials/state1.list.html",
      controller: function($scope) {
        $scope.items = ["A", "List", "Of", "Items"];
      }
    })
    .state('state2', {
      url: "/state2",
      templateUrl: "partials/state2.html"
    })
    .state('state2.list', {
      url: "/list",
      templateUrl: "partials/state2.list.html",
      controller: function($scope) {
        $scope.things = ["A", "Set", "Of", "Things"];
      }
    });
});

※なるほど、全てのルーティングをそれぞれ書くのではなく、詳細なページについては追加部分だけで済むと。
※個人的にはどのURLなら、これと明示的に書きたいので$routeProviderの方がいいような。

directive

カスタムタグが設定できるようなものです

serviceとprovider

serviceの上位概念であるprovider

なるほど。

その他、参考になるURLは以下とのことです。

いま一番気に入っているAngularJSのプロジェクト構成 - I am mitsuruog

johnpapa/angularjs-styleguide · GitHub