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

다트 인스톨

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 는 ,
gro-barlでのデフォルトにしてある

webdev 와 ngdart を有効化.

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

각도 다트 の公式の 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.

다트펍 글로벌 액티베이트 で
webdev に必要なライブラリを取ってきて、有効化し

dart pub global activate ngdart

ngdart も同様に有効化する[

これで webdev 와 ngdart が このproject で 有効になった.

もうひとつ, PATH を通す必要が有る.

  export PATH="$PATH":"$HOME/.pub-cache/bin"

これを .zshrc などに入れることで、2つのcomandが使えるようになる.

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 apri が起動した.

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 が記載されている 컴포넌트 와

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

<h1>My First AngularDart App</h1>

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

<todo-list></todo-list>

html に 메시지 を付け足し

class AppComponent {
  var message = "Hello Angular Dart";
}

다트 に定義する



これで Hello World できた!!!

まとめ

Angular Dart로 인해 전면엔드를 생성할 수 있습니다.

Dart をinstorshiて、
다트 코만드로 ngdart, webdev をinstorlして
ngdart로 프로제크트を作り
webdev でprocateを起動する.

Hello World は React の App.js のように
app_component.{dart,html} 에 기록할 수 있습니다.