AngularDart4.0 英雄之旅-教程-02啓動應用

時間 2019-11-13

標籤 angulardart4.0 angulardart 英雄之旅教程啓動應用简体版

原文原文鏈接

碼雲項目頁：https://gitee.com/scooplolwiki/toh-0css

此教程講解Angular的文件架構，（查看源代碼）查看應用程序。html

建立應用java

開始，建立名爲angular_tour_of_heroes的項目，使用WebStorm或者命令行和GitHub項目：angular-examples/quickstart ，更多介紹查看安裝開發頁中的建立啓動項目。git

運行應用，並使它持續運行github

從IDE或命令行中啓動應用，正如安裝開發頁運行應用部分所述。web

你可能將在本教程以外更改應用，當你準備查看更改時，從新加載瀏覽器窗口，將會從新加載應用，當保存更改時，pub工具將檢測更改和提供新的應用。bootstrap

Angular 應用基礎

Angular應用由組件組成，組件是由控制屏幕局部的一個html模板和組件類的組合，開始應用有一個顯示簡單字符串的組件組成。api

lib/app_component.dart瀏覽器

import 'package:angular/angular.dart';
@Component(
  selector: 'my-app',
  template: '<h1>Hello {{name}}</h1>',
)
class AppComponent {
  var name = 'Angular';
}

每個組件都以@Component註解開始，用以描述HTML模板和組件類如何一塊兒工做。架構

selector屬性告訴Angular在index.html中的用戶自定義標籤<my-app>裏面顯示組件。

web/index.html (inside <body>)

<my-app>Loading...</my-app>

template屬性在<h1>標題裏定義了一個消息，消息以「Hello」開始，以「{{name}}」結束，這是Angular的插值綁定表達式。運行時，Angular將「{{name}}」替換爲組件屬性name的值。

啓動程序代碼

此程序包含如下文件

lib/app_component.dart

import 'package:angular/angular.dart';
@Component(
  selector: 'my-app',
  template: '<h1>Hello {{name}}</h1>',
)
class AppComponent {
  var name = 'Angular';
}

test/app_test.dart

@Tags(const ['aot'])
@TestOn('browser')
import 'package:angular/angular.dart';
import 'package:angular_test/angular_test.dart';
import 'package:test/test.dart';
import 'package:angular_tour_of_heroes/app_component.dart';
@AngularEntrypoint()
void main() {
  final testBed = new NgTestBed<AppComponent>();
  NgTestFixture<AppComponent> fixture;
  setUp(() async {
    fixture = await testBed.create();
  });
  tearDown(disposeAnyRunningTest);
  test('Default greeting', () {
    expect(fixture.text, 'Hello Angular');
  });
  test('Greet world', () async {
    await fixture.update((c) => c.name = 'World');
    expect(fixture.text, 'Hello World');
  });
  test('Greet world HTML', () {
    final html = fixture.rootElement.innerHtml;
    expect(html, '<h1>Hello Angular</h1>');
  });
}

web/main.dart

import 'package:angular/angular.dart';
import 'package:angular_tour_of_heroes/app_component.dart';
void main() {
  bootstrap(AppComponent);
}

web/index.html

<!DOCTYPE html>
<html>
<head>
  <script>
    // WARNING: DO NOT set the <base href> like this in production!
    // Details: https://webdev.dartlang.org/angular/guide/router
    (function () {
      var m = document.location.pathname.match(/^(\/[-\w]+)+\/web($|\/)/);
      document.write('<base href="' + (m ? m[0] : '/') + '" />');
    }());
  </script>
  <title>Angular Tour of Heroes</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" type="image/png" href="favicon.png">
  <script defer src="main.dart" type="application/dart"></script>
  <script defer src="packages/browser/dart.js"></script>
</head>
<body>
  <my-app>Loading...</my-app>
</body>
</html>

web/styles.css

@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://fonts.googleapis.com/css?family=Material+Icons);
/* Master Styles */
h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}
h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}
body {
  margin: 2em;
}

web/pubspec.yaml

name: angular_tour_of_heroes
description: Tour of Heroes
version: 0.0.1
environment:
  sdk: '>=1.24.0 <2.0.0'
dependencies:
  angular: ^4.0.0
dev_dependencies:
  angular_test: ^1.0.0
  browser: ^0.10.0
  dart_to_js_script_rewriter: ^1.0.1
  test: ^0.12.21
transformers:
- angular:
    entry_points:
    - web/main.dart
    - test/**_test.dart
- test/pub_serve:
    $include: test/**_test.dart
- dart_to_js_script_rewriter

這些文件的組織以下：

本文檔中的全部示例至少具備這些核心文件。每一個文件具備獨特的做用，隨着應用程序的發展而獨立發展。

File	Purpose
lib/app_component.dart	定義<my-app>,隨着應用程序的發展將成嵌套樹的根組件
test/app_test.dart	定義AppConponent測試，當本教程未介紹測試時，您能夠從測試頁面中瞭解如何測試「英雄之旅」應用程序。
web/main.dart	驅動應用程序在瀏覽器中運行。
web/index.html	在<body>裏包含<my-app>標籤，應用程序運行的地方
web/styles.css	涵蓋應用程序使用的一組樣式
pubspec.yaml	描述此Dart包（應用程序）的文件及其依賴關係。例如，它將angular和browser 包指定爲依賴關係以及angular編譯器。注意：dart_to_js_script_rewriter編譯器（若是存在）必須在編譯器列表中的angular以後。若是順序錯誤，angular模板將不起做用。

下一步是什麼
在下一個教程頁面中，您將修改起始應用程序以顯示更有趣的數據，並容許用戶編輯該數據。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。