首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >AngularDart4.0 英雄之旅-教程-02启动应用

AngularDart4.0 英雄之旅-教程-02启动应用

作者头像
南郭先生
发布2018-08-14 15:29:17
1.8K0
发布2018-08-14 15:29:17
举报
文章被收录于专栏:Google DartGoogle Dart

码云项目页:https://gitee.com/scooplolwiki/toh-0

此教程讲解Angular的文件架构,(查看源代码)查看应用程序。

创建应用

开始,创建名为angular_tour_of_heroes的项目,使用WebStorm或者命令行和GitHub项目:angular-examples/quickstart ,更多介绍查看安装开发页中的创建启动项目

运行应用,并使它持续运行

从IDE或命令行中启动应用,正如安装开发页运行应用部分所述。

你可能将在本教程之外更改应用,当你准备查看更改时,重新加载浏览器窗口,将会重新加载应用,当保存更改时,pub工具将检测更改和提供新的应用。

Angular 应用基础

Angular应用由组件组成,组件是由控制屏幕局部的一个html模板和组件类的组合,开始应用有一个显示简单字符串的组件组成。

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模板将不起作用。

下一步是什么 在下一个教程页面中,您将修改起始应用程序以显示更有趣的数据,并允许用户编辑该数据。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017/10/19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Angular 应用基础
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档