文档章节

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

scooplol
 scooplol
发布于 2017/10/19 02:23
字数 969
阅读 159
收藏 0

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

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

下一节

© 著作权归作者所有

scooplol
粉丝 17
博文 103
码字总数 205785
作品 0
南充
程序员
私信 提问
加载中

评论(11)

scooplol
scooplol 博主

引用来自“卢林”的评论

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

angular 分为ts js dart 三个语言版本,这个是针对Dart语系的
卢林
卢林
Dart...哥们,为什么不是用官方主流的 TS 呢·
scooplol
scooplol 博主

引用来自“红薯”的评论

源码放到码云呗,我们推荐下:)
谢谢😄
scooplol
scooplol 博主

引用来自“红薯”的评论

引用来自“scooplol”的评论

引用来自“红薯”的评论

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

链接是?

引用来自“scooplol”的评论

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

引用来自“红薯”的评论

都是 github 的链接,不是 gitee 哦:)
不好意思 操作失误! 现在可以了! 😅
红薯
红薯

引用来自“红薯”的评论

引用来自“scooplol”的评论

引用来自“红薯”的评论

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

链接是?

引用来自“scooplol”的评论

我又在文章开始处加了个明显的 项目链接
都是 github 的链接,不是 gitee 哦:)
scooplol
scooplol 博主

引用来自“红薯”的评论

引用来自“scooplol”的评论

引用来自“红薯”的评论

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

链接是?
我又在文章开始处加了个明显的 项目链接
scooplol
scooplol 博主

引用来自“红薯”的评论

引用来自“scooplol”的评论

引用来自“红薯”的评论

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

链接是?

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

引用来自“scooplol”的评论

引用来自“红薯”的评论

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

链接是?
scooplol
scooplol 博主

引用来自“红薯”的评论

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

引用来自“红薯”的评论

源码放到码云呗,我们推荐下:)
好的! 最近开始整理,一切就绪后再放到码云上。
AngularDart4.0 英雄之旅-教程-04明细

在此页面中,您将扩展“Tour of Heroes”应用程序,以显示英雄列表,并允许用户选择英雄并显示英雄的详细信息。 完成此页面后,该应用应该看起来像这个实例(查看源代码)。 必备条件 在继续...

scooplol
2017/10/24
66
0
AngularDart4.0 英雄之旅-教程-05多组件

AppComponent正在做所有的事情。 一开始,它展示了一个英雄的细节。 然后,它成为一个英雄和英雄细节列表的主/细节形式。 很快就会有新的要求和能力。 您不能在一个组件之上填充所有功能; 这...

scooplol
2017/11/08
61
0
AngularDart4.0 英雄之旅-教程-03英雄编辑器

码云项目页:https://gitee.com/scooplolwiki/toh-1 在这一部分,您将修改起始应用程序以显示有关英雄的信息。 然后,您将添加编辑英雄信息的功能。 完成后,应用程序应该看起来像这个实例(...

scooplol
2017/10/22
81
0
会议纪要-07.07.2015

祁博: 01换物品icon 02英雄属性栏增加描述 03装备获取途径 04装备信息上加上附魔信息 小贱: 01登录系统 02修改UI字体 艳明: 01聊天系统 雷鹏: 01调场景数据与战斗流程 晓秋: 01测试游戏...

索亚之息
2015/07/07
1
0
Centos7下安装Docker(详细的新手装逼教程)

一,Docker简介 百科说:Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器上,也可以实现虚拟化,容器是完全使...

xiaomin0322
02/15
47
0

没有更多内容

加载失败,请刷新页面

加载更多

面向海量数据的极致成本优化-云HBase的一体化冷热分离

前言 随着业务的持续发展,业务数据库存储量会持续增长。通常数据量过亿时,就需要考虑做分库分表,或者选择扩展能力更好的NOSQL/NewSQL数据库,如HBase就可以单表支持PB级数据,足够满足大多...

阿里云官方博客
35分钟前
4
0
最新最全国内外架构开源技术干货资料

大家好,废话不多说,整理了精心收集了各类资源。 声明,如侵犯个人利益,请联系小编,会立即删除相关资料。 领取方式在文末 求转发列表 好了,由于资源太多啦,就不一一列举了。 大家按照下...

泥瓦匠BYSocket
37分钟前
6
0
springmvc jsp访问不了css

在jsp中引入css,一直报404错误,直接访问css,也无法访问 将css文件移出WEB-INF,因为处于安全性考虑,这个目录禁止外部访问。 当引用css时,可以直接用绝对路径${pageContext.request.conte...

沉迷于编程的小菜菜
39分钟前
4
0
android 系统版本 9.1网络请求遇到坑

网络请求异常: E/http: CLEARTEXT communication to plat.xunlinkeji.cn not permitted by network security policy 在res下新建一个xml目录 创建名为network_security_config.xml 文件 ,该......

MrLins
57分钟前
5
0
Istio 1.3 发布,HTTP 遥测不再需要 Mixer

> 原文链接:Istio 1.3 发布,HTTP 遥测不再需要 Mixer Istio 是 Google、IBM 和 Lyft 联合开源的服务网格(Service Mesh)框架,旨在解决大量微服务的发现、连接、管理、监控以及安全等问题...

米开朗基杨
今天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部