dart のインストール
asdf plugin add dart
asdf list all dart
asdf install dart 2.13.4
asdf global dart 2.13.4
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.
dart pub global activate で
webdev に必要なライブラリを取ってきて、有効化し
dart pub global activate ngdart
ngdart も同様に有効化する[
これで webdev と ngdart がこのプロジェクトで有効になった。
もうひとつ、PATH を通す必要が有る。
export PATH="$PATH":"$HOME/.pub-cache/bin"
これを .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!
これで 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)
起動に 55 秒かかって
デフォルトの 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.
}
css と html が記載されている Component と
ロジックを書く クラスが入っている
<h1>My First AngularDart App</h1>
<h2> {{ message }} </h2>
<todo-list></todo-list>
html に message を付け足し
class AppComponent {
var message = "Hello Angular Dart";
}
dart に定義する
これで Hello World できた！！！
まとめ
Angular Dart でのフロントエンド環境を作るためには
Dart をインストールして、
dart コマンドで ngdart, webdev をインストールして
ngdart でプロジェクトを作り
webdev でプロジェクトを起動する。
Hello World は React の App.js のように
app_component.{dart,html} に書く。
Top comments (0)