DEV Community

kaede
kaede

Posted on

Angular Dart 基礎 -- Part 00 環境構築と Hello World

#angulardart #dart

dart のインストール 

asdf plugin add dart
asdf list all dart
asdf install dart 2.13.4
asdf global dart 2.13.4
Enter fullscreen mode Exit fullscreen mode

asdf で dart 2.13.4 は取ってきて、
グローバルでのデフォルトにしてある

webdev と ngdart を有効化。

https://angulardart.xyz/guide/setup#create-a-starter-project

angular dart の公式の doc を参考に

dart pub global activate webdev

Package webdev is currently active at version 2.7.5.                                                        
Resolving dependencies... (2.3s) 

+ args 2.3.1                                                                                                
+ async 2.8.2 (2.9.0 available)                                                                             
+ browser_launcher 1.1.1 

Activated webdev 2.7.5.
Enter fullscreen mode Exit fullscreen mode

dart pub global activate で
webdev に必要なライブラリを取ってきて、有効化し

dart pub global activate ngdart
Enter fullscreen mode Exit fullscreen mode

ngdart も同様に有効化する[

これで webdev と ngdart がこのプロジェクトで有効になった。

もうひとつ、PATH を通す必要が有る。

  export PATH="$PATH":"$HOME/.pub-cache/bin"
Enter fullscreen mode Exit fullscreen mode

これを .zshrc などに入れることで、2つのコマンドが使えるようになる。

ngdart でプロジェクト作成 

ngdart create testApp

[Info] Creating project...
[SUCCESS] Created project "testapp"

[Info] Running 'pub get' in the project folder... 6.0s
[SUCCESS] Completed!
Enter fullscreen mode Exit fullscreen mode

Image description

これで Angular Dart のアプリが作成される。

webdev でプロジェクト起動 

❯ webdev serve 
[INFO] Building new asset graph completed, took 2.0s
[INFO] Checking for unexpected pre-existing outputs. completed, took 2ms
[INFO] Serving `web` on http://127.0.0.1:8080
...
[INFO] Succeeded after 55.4s with 6322 outputs (13311 actions)
Enter fullscreen mode Exit fullscreen mode

起動に 55 秒かかって

Image description

デフォルトの TODO アプリが起動した。

App Component の中身を付け足す 

@Component(
  selector: 'my-app',
  styleUrls: ['app_component.css'],
  templateUrl: 'app_component.html',
  directives: [TodoListComponent],
)
class AppComponent {
  // Nothing here yet. All logic is in TodoListComponent.
}
Enter fullscreen mode Exit fullscreen mode

css と html が記載されている Component と

ロジックを書く クラスが入っている

<h1>My First AngularDart App</h1>

<h2> {{ message }} </h2>

<todo-list></todo-list>
Enter fullscreen mode Exit fullscreen mode

html に message を付け足し

class AppComponent {
  var message = "Hello Angular Dart";
}
Enter fullscreen mode Exit fullscreen mode

dart に定義する

Image description

これで Hello World できた！！！

まとめ

Angular Dart でのフロントエンド環境を作るためには

Dart をインストールして、
dart コマンドで ngdart, webdev をインストールして
ngdart でプロジェクトを作り
webdev でプロジェクトを起動する。

Hello World は React の App.js のように
app_component.{dart,html} に書く。

Top comments (0)

Read next

trailsofink profile image

Ruby Expressions as D&D Actions

Joel Hunt -

richirrim profile image

Previniendo olores raros 🫢 en Javascript

Ricardo Ortega Chap -

rafaelogic profile image

Essential Layout Considerations for Web Pages Using Tailwind CSS

Rafa Rafael -

094459 profile image

How I built an arcade scrolling game in one day

Ricardo Sueiras -