Dart2×AngularDart5 チュートリアル Part1. The Hero Editor

この記事は「Webアプリ入門しようよ! in AngularDart」の続きです。

目次
Part1:The Hero Editor ←イマココ!
Part2:Master/Detail
Part3:Multiple Components/Services
Part4:Routing
Part5:HTTP

参考

とりあえず起動!

  1. 以下のコマンドでサンプルプログラム(雛形)をクローンする!

        git clone https://github.com/angular-examples/quickstart.git
    
  2. 以下のコマンドで実行する!

        pub get
        webdev serve
    

    pub getは初回のみでOK!
    またwebdev serveは、一度実行したらソースファイルを編集して保存するたびに自動で再実行?される!
    だからこれ以降は基本的にはコマンドをいじる必要が無いよ!

  3. http://localhost:8080/をブラウザで開いて実行結果を確認する!

    こんなのが表示されたらOK!

    dart_1

ちょっと脇道
lib/app_component.dart{{name}}は、AppComponentクラス内のnameの値に置換される!
nameの値を変更したら、ブラウザに反映されるか確認してみよう!

ついてこれているかい?

ネクストッ!

Heroを表示!

  1. lib/app_component.dartを編集してとりあえず表示!

    • @Componentアノテーション
      • ''''に変更し、複数行の文字列に変更する!
      • {{name}}の行を削除し、{{title}}{{hero}}を追加する!
    • AppComponentクラス
      • titleheroを追加!
      • nameを削除!
        import 'package:angular/angular.dart';
    
        @Component(
          selector: 'my-app',
          template: '''
            <h1>{{title}}</h1>
            <h2>{{hero}}</h2>
          ''',
        )
        class AppComponent {
          final title = 'Tour of Heroes';
          var hero = 'Windstorm';
        }
    

    ブラウザを更新して確認!

    dart_2

    ネクストッ!

  2. Heroクラスを作って表示!

    • 新しいファイルlib/hero.dartを作る!

      • Heroはidnameを持つぞ!
          class Hero {
            final int id;
            String name;
      
            Hero(this.id, this.name);
          }
      
    • lib/app_component.dartを編集!

      • WindstormをHeroクラス化!
      • Windstormのidnameを表示!
      import 'package:angular/angular.dart';
      
      // ↓インポート文を追加!
      import 'hero.dart';
      
      @Component(
        selector: 'my-app',
        // ↓heroクラスのプロパティを表示するように変更!
        template: '''
          <h1>{{title}}</h1>
          <h2>{{hero.name}}</h2>
          <div><label>id: </label>{{hero.id}}</div>
          <div><label>name: </label>{{hero.name}}</div>
        ''',
      )
      class AppComponent {
        final title = 'Tour of Heroes';
        // ↓Heroクラスを使うように変更!
        var hero = Hero(1, 'Windstorm');
      }
      

ブラウザを更新して確認!

dart_3

ネクストッ!

templateを別ファイルに!

そろそろHTMLをDart内の文字列として記述するのが面倒になってきた頃合いでしょう。
実はtemplateは別のHTMLファイルで定義することが可能です!Cool!

  1. app_component.htmlを作成!

        <h1>{{title}}</h1>
        <h2>{{hero.name}}</h2>
        <div><label>id: </label>{{hero.id}}</div>
        <div><label>name: </label>{{hero.name}}</div>
    
  2. app_component.dartを修正!

        @Component(
          selector: 'my-app',
          // ↓URLで指定する方法に変更!
          templateUrl: 'app_component.html',
        )
    

ブラウザを更新して確認!
同じように表示されたらOK!

Heroを編集できるように!

  1. pubspec.yamlを編集してパッケージを追加!

        dependencies:
          angular: ^5.0.0
          # ↓追加!
          angular_forms: ^2.0.0
    
  2. パッケージを更新!

    1. コマンドライン上でCtrl + Cwebdev serveを中止!
    2. pub getコマンドでパッケージを取得!
    3. wevdev serveコマンドで再開!
  3. app_component.dartを修正!

        import 'package:angular/angular.dart';
    
        // ↓angular_formsをインポート!
        import 'package:angular_forms/angular_forms.dart';
    
        import 'hero.dart';
    
        @Component(
          selector: 'my-app',
          templateUrl: 'app_component.html',
          // ↓追加!
          directives: [formDirectives],
        )
    

    direcitivesについて
    template内で使用するディレクティブは、すべてここに追加する必要があるよ!
    なので、ここではangular_formsのディレクティブであるfromDirectivesを追加している!

  4. app_component.htmlを修正!

        <h1>{{title}}</h1>
        <h2>{{hero.name}}</h2>
        <div><label>id:</label>{{hero.id}}</div>
        <!-- ↓nameを表示する部分を修正! -->
        <div>
            <label>name:</label>
            <input [(ngModel)]="hero.name" placeholder="name">
        </div>
    

    [(ngModel)]は、テキストボックス<input>AppComponenthero.nameを双方向に紐付けるための構文!これによりテキストボックスの値が<h2>要素のhero.nameに反映されるよ!

    ブラウザを更新して確認!
    dart_4

    ネクストッ

ひと休み

ここまでいかがだったでしょうか。

説明が雑すぎですって?ごめんなさい!(素直)

気にせずどんどんいきましょう!!←

ネクストッ! → Part2:Master/Detail