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

原创
2017/10/19 02:23
阅读数 665

码云项目页: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模板将不起作用。

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

下一节

展开阅读全文
打赏
0
0 收藏
分享
加载中

引用来自“卢林”的评论

Dart...哥们,为什么不是用官方主流的 TS 呢·

angular 分为ts js dart 三个语言版本,这个是针对Dart语系的
2017/10/23 08:19
回复
举报
Dart...哥们,为什么不是用官方主流的 TS 呢·
2017/10/22 22:59
回复
举报

引用来自“红薯”的评论

源码放到码云呗,我们推荐下:)
谢谢😄
2017/10/22 08:59
回复
举报

引用来自“红薯”的评论

引用来自“scooplol”的评论

引用来自“红薯”的评论

源码放到码云呗,我们推荐下:)
君上 源码已通过官方示例同步过来了。

链接是?

引用来自“scooplol”的评论

我又在文章开始处加了个明显的 项目链接

引用来自“红薯”的评论

都是 github 的链接,不是 gitee 哦:)
不好意思 操作失误! 现在可以了! 😅
2017/10/22 08:49
回复
举报

引用来自“红薯”的评论

引用来自“scooplol”的评论

引用来自“红薯”的评论

源码放到码云呗,我们推荐下:)
君上 源码已通过官方示例同步过来了。

链接是?

引用来自“scooplol”的评论

我又在文章开始处加了个明显的 项目链接
都是 github 的链接,不是 gitee 哦:)
2017/10/22 08:42
回复
举报

引用来自“红薯”的评论

引用来自“scooplol”的评论

引用来自“红薯”的评论

源码放到码云呗,我们推荐下:)
君上 源码已通过官方示例同步过来了。

链接是?
我又在文章开始处加了个明显的 项目链接
2017/10/22 08:36
回复
举报

引用来自“红薯”的评论

引用来自“scooplol”的评论

引用来自“红薯”的评论

源码放到码云呗,我们推荐下:)
君上 源码已通过官方示例同步过来了。

链接是?

回复@红薯 : 运行实例(查看源代码)查看应用程序, 点击查看 源代码 即可链接到码云的项目页,
2017/10/22 08:30
回复
举报

引用来自“scooplol”的评论

引用来自“红薯”的评论

源码放到码云呗,我们推荐下:)
君上 源码已通过官方示例同步过来了。

链接是?
2017/10/22 07:27
回复
举报

引用来自“红薯”的评论

源码放到码云呗,我们推荐下:)
君上 源码已通过官方示例同步过来了。
2017/10/22 01:03
回复
举报

引用来自“红薯”的评论

源码放到码云呗,我们推荐下:)
好的! 最近开始整理,一切就绪后再放到码云上。
2017/10/19 22:38
回复
举报
更多评论
打赏
11 评论
0 收藏
0
分享
返回顶部
顶部