Upgrade to Pro — share decks privately, control downloads, hide ads and more …

最新SPA開発を学ぼう! ウェブエンジニアのための AngularJS入門

最新SPA開発を学ぼう! ウェブエンジニアのための AngularJS入門

ウェブアプリケーションのフロントエンドではここ数年、ひとつのページで完結するSPA(Single Page Application)と呼ばれる形式のものがよく開発されるようになってきました。Angular.jsは、そのSPA開発にとてもよく利用されるJavaScriptフレームワークです。

このセッションではまず最初に、なぜ近年SPA開発が増えてきたのか、なぜAngular.jsがSPA開発において多くの開発者に受け入れられているかについて話します。後半では、Angular.jsに備わっているデータバインディング、DIコンテナ、ルーティング機構、ディレクティブなどの便利な機能についてひと通り紹介します。

久保田光則

October 11, 2014
Tweet

More Decks by 久保田光則

Other Decks in Technology

Transcript

  1. +BWB4DSJQUଆ ‣ SPVUF1SPWJEFSܦ༝Ͱઃఆ var module = angular.module('app', [‘ngRoute']); module.config(function($routeProvider) {

    $routeProvider .when('/', { templateUrl: 'views/main.html', }) .when('/settings', { templateUrl: 'views/settings.html', }) .otherwise({ redirectTo: '/' }); });
  2. σʔλόΠϯσΟϯάͷ༝དྷ ‣ ݩʑ͸σεΫτοϓ(6*Ͱ࢖ΘΕ͍ٕͯͨज़ ‣ $PDPB#JOEJOH.BD049 ‣ 81' 4JMWFSMJHIU8JOEPXT ! ‣

    ࠓͰ͸Ϟμϯ+4ϑϨʔϜϫʔΫͰ͸΄΅ඞਢͷػ ೳʹ ‣ ,OPDLPVUKT #BUNBOKT "OHVMBSKT 7VFKT
  3. %*ύλʔϯ ‣ ґଘΛ֎͔Β౉ͯ͠΋Β͏ઃܭύλʔϯ ‣ γεςϜʹॊೈੑΛ༩͑Δ var MyClass = function() {

    this.logger = new MyLogger(); }; var MyClass = function(logger) { this.logger = logger; };
  4. "OHVMBS+4ͷ%*ίϯςφ ‣ ಗ໊ؔ਺ͷԾҾ਺Ͱࢦఆͨ͠ΦϒδΣΫτΛࣗಈ తʹ஫ೖͯ͘͠ΕΔ var module = angular.module(‘app’, []); !

    module.factory('Hoge', function() { return new Hoge(); }); module.factory('MyClass', function(Hoge) { ... return MyClass; });
  5. <body ng-controller=“MyCtrl”> <div ng-show=“visible”> HTML Contents </div> <footer ng-bind=“message”> </footer>

    <my-element></my-element> </body> σΟϨΫςΟϒͷ࢓૊Έ ‣ ॳظԽ࣌ʹ%0.πϦʔͷཁૉ΍ଐੑΛશͯḷͬͯߦ͖ɺ
 ରԠ͢ΔσΟϨΫςΟϒ͕ଘࡏ͢Ε͹ͦͷॳظԽ"1*Λݺͼग़͢ OH$POUSPMMFSىಈ OH4IPXىಈ OH#JOEىಈ NZ&MFNFOUىಈ
  6. એݴͯ͠ΈΔ ‣ IPHFཁૉʹରԠͯ͠ಈ࡞͢ΔσΟϨΫςΟϒΛએݴ var module = angular.module('app'); ! module.directive(‘hoge’, function()

    { return { restrict: ‘E’, link: function(scope, element, attrs) { // σΟϨΫςΟϒͷॳظԽॲཧΛॻ͘ element.css({color: ‘red’}); } }; });