AngularJS

for
Beginners




Why Angular?

他のフレームワークと比較して、知識ゼロから始めてもとりあえず動くものが作れるというところがオススメです。このスライドでは主な特徴を4つご紹介します。

やってみよう！と思った方、まずはチュートリアルをどうぞ。

4 Hearts of AngularJS

  • Declarative APIs
  • 2 way bindings (MDV)
  • DOM tree alignment
  • Extensibilities

Declarative APIs

  • Declarative Programming: 宣言的プログラミング
  • Imperative Programming: 命令的プログラミング

Imperative Programming

<!DOCTYPE html>
<html>
  <head>
    <title>Angular Example</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="styles/style.css">
    <script>
      window.onload = function() {
        var input = document.querySelector('#input');
        var span  = document.querySelector('#name');

        input.addEventListener('keyup', function() {
          span.innerHTML = input.value;
        });
      }
    </script>
  </head>
  <body>
    <section>
      <p>Hello <span id="name">World</span>!</p>
      <input type="text" value="World" id="input" />
    </section>
    <footer>
    </footer>
  </body>
</html>

Declarative Programming

<!DOCTYPE html>
<html ng-app>
  <head>
    <title>Angular Example</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="styles/style.css">
    <script src="scripts/angular.min.js"></script>
  </head>
  <body>
    <section>
      <p>Hello {{name}}!</p>
      <input type="text" ng-model="name"/>
    </section>
    <footer>
    </footer>
  </body>
</html>

2 Way Bindings

  • モデルの変更が双方向に反映される

View <=> Model

<!DOCTYPE html>
<html ng-app>
  <head>
    <title>Angular Example</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="styles/style.css">
    <script src="scripts/angular.min.js"></script>
    <script>
      // Controller can be any object
      // Notice "$scope" object as an argument
      var HelloWorldCtrl = function($scope) {
        // Any properties under $scope will be "Model"
        $scope.name = 'World';
      };
    </script>
  </head>
  <body>
    <section ng-controller="HelloWorldCtrl">
      <p>Hello {{name}}!</p>
      <input type="text" ng-model="name"/>
    </section>
    <footer>
    </footer>
  </body>
</html>

DOM tree alignment

  • ControllerがDOM treeに沿って継承される

ItemCtrl inherits ListCtrl

<!DOCTYPE html>
<html ng-app>
  <head>
    <title>Angular Example</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="styles/style.css">
    <script src="scripts/angular.min.js"></script>
    <script>
      var ListCtrl = function($scope) {
        $scope.list = [
          {
            name: 'agektmr',
            count: 0
          },
          {
            name: 'vvakame',
            count: 0
          },
          {
            name: 'teyosh',
            count: 0
          },
          {
            name: 'can_i_do_web',
            count: 0
          }
        ];
      };
      var ItemCtrl = function($scope) {
        $scope.increase = function() {
          $scope.item.count++;
        }
      }
    </script>
  </head>
  <body>
    <section ng-controller="ListCtrl">
      <ul>
          <!-- ItemCtrl inherits ListCtrl -->
          <li ng-repeat="item in list" ng-controller="ItemCtrl">
          <p>{{item.name}}: {{item.count}} <button ng-click="increase()">+</button></p>
        </li>
      </ul>
    </section>
    <footer>
    </footer>
  </body>
</html>

Extensibilities

  • AngularJSの提供する様々な機能は
    自分自身で拡張できる

Directives

 var myModule = angular.module(...);
 
myModule.directive('directiveName', function factory(injectables) {
  var directiveDefinitionObject = {
    priority: 0,
    template: '<div></div>',
    templateUrl: 'directive.html',
    replace: false,
    transclude: false,
    restrict: 'A',
    scope: false,
    controller: function($scope, $element, $attrs, $transclude, otherInjectables) { ... },
    compile: function compile(tElement, tAttrs, transclude) {
      return {
        pre: function preLink(scope, iElement, iAttrs, controller) { ... },
        post: function postLink(scope, iElement, iAttrs, controller) { ... }
      }
    },
    link: function postLink(scope, iElement, iAttrs) { ... }
  };
  return directiveDefinitionObject;
});

Future of AngularJS

Tools

公式

日本語ドキュメント

(このURLからアクセスする必要があります。必ずリンクを辿って下さい。協力者募集中)


AngularJS Batarang

Good AngularJS Example

拙作の Flexbox Please! というサイトのソースコード
ですが、AngularJS 開発者である Igor Minor に
手伝ってもらったので、参考になると思います。
特に module.value() の使い方とか。

flexbox-experiment




THanks!

AngularJS for Beginners

By agektmr

Made with Slides.com

AngularJS for Beginners

[This deck is intended for Japanese developers.] Get to know the very basic idea of AngularJS.

  • 9,601

More from agektmr