AngularDart 入门指南（0）双向绑定和组件

2 年 ago
清, 扬
3 minutes

最近，AngularDart终于发布了1.0版的重要版本。但是官方的教程和示例代码仅限于0.10版本（在1.0版本之前有0.14版本）。因此，部分代码无法运行或已经过时（虽然称其为部分有些宽泛）。因此，我们将依赖API文档，尽量以符合AngularDart 1.x的示例代码来介绍基本用法。

1、已添加对1.1.0的支持。
虽然官方教程已经写明适用于1.*系列，但其中部分陈旧的描述仍然存在，因此只能将API参考文档和其他信息一并写入。

这里是概括了这些内容的样本项目，请随意使用。

步骤0：设置

在编写代码之前，我们需要准备一个可以使用AngularDart的项目。这次我们将使用ShadowDOM，所以还需要将web_components添加到依赖包中。

name: angular_sample
dependencies:
  browser: any
  angular: ">=1.1.0 <1.2.0"
  web_components: any
transformers:
- angular

追加说明：由于1.0到1.1的变化也很大，所以为了安全起见，我认为应该将其固定在1.1版本。

请在编写完pubspec后不要忘记运行”pub get”。

步骤1：创建入口点

为了在网页上运行AngularDart，我们需要创建一个入口点。与AngularJS不同，AngularDart需要在入口点明确地执行应用程序才能运行。

首先是从HTML文件开始。web/index.html的代码如下所示。

<!DOCTYPE html>
<html ng-app>
<head lang="ja">
    <meta charset="UTF-8">
    <title></title>
    <script src="packages/web_components/webcomponents.min.js"></script>
    <script src="packages/web_components/dart_support.js"></script>
</head>
<body>
<h3>Hello {{name}}!</h3>
Name: <input type="text" ng-model="name">
<script type="application/dart" src="index.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>

【追記】
web_components/platform.js已更名为web_components/webcomponents.js。这样做使其功能更加明确和改善，但在Dartium和Chrome中，它们原本就支持Web组件，因此更改可能不容易被注意到带来的错误。请注意。

中的两个脚本是用于WebComponents的polyfill。中的一个是自己的脚本，另一个是用于Dart2JS的polyfill。请不要忘记在中添加ng-app。

接下来，我们将编写index.dart。

import "package:angular/angular.dart";
import "package:angular/application_factory.dart";

void main() {
  applicationFactory().run();
}

在这里要注意的是，请务必同时导入 angular/angular.dart 和 angular/application_factory.dart 这两个文件。如果不同时导入这两个文件，AngularDart将无法正常运行。

如果能够做到这一点，那就使用pub serve在Dartium或Chrome等浏览器上预览一下吧。输入的文本应该已经绑定了。

Angular的基本已经完成了。我认为AngularJS的ng-*系列功能例如ng-repeat和ng-if等有很多相关文章，所以在这里略去了。

步骤2：使用组件

在Google I/O上被称为AngularComponent的这个功能是在AngularDart中实现的WebComponents。得益于Angular强大的注入功能，与另一个WebComponents实现Polymer相比，可以更轻松地编写代码。

WebComponents的四个重要组成部分（实际上是五个，但是）是：

    • Custom Elements (独自elementの定義)

 

    • HTML Import (外部htmlのインポート)

 

    • Templates (Stylingのスコープ化)

 

    ShadowDOM (DOMの隠蔽)

好的，我将使用这些来重新编写一个简单的应用程序，步骤1。

首先，在”lib/name_component.dart”中定义作为独立的元素。

library angular_sample.name_component;

import "package:angular/angular.dart";

@Component(
  selector: 'name',
  templateUrl: 'packages/angular_sample/name.html',
  useShadowDom: true,
  map: const {
    'name-attr': '@name',
    'color': '@color'
  },
  cssUrl: 'packages/angular_sample/name_component.css'
)
class NameComponent {

  String name;
  String color;
}

附有@Component注释的类将成为一个独立的组件。

    • selector : 要素名(name)

 

    • templateUrl : テンプレートのHTML(packages/angular_sample/name.html)

 

    • useShadowDom : ShadowDomを使うかどうか(true)

 

    • publishAs : テンプレート内でのインスタンス名(self)

 

    • map : Domでの属性とクラスメンバとのマッピング(name-attrをnameに関連付け)

 

    cssUrl : テンプレートに適用するCSS(packages/angular_sample/name_component.css)

在中文中进行释义时，我们可以将其翻译成：无论是否存在 publishAs，都可以，但如果存在会使情况更清楚。然而，在使用时必须在类中创建一个返回this的getter。

【追记】
publishAs目前已被弃用。为了向后兼容而保留，但实际上不执行任何操作。现在，即使不做任何操作，@Component对象仍然成为隐式根作用域。

以下是中文的翻译：map的@name写法有多种绑定形式，例如<=>和=>等，但本次省略。详细信息请查阅此文档。

下一个是模板`lib/name.html`。

<h3 ng-class="color">Hello {{name}}!</h3>
Name: <input type="text" ng-model="name">

新增了ng-class属性

CSS的书写方式如下。本次有黑色和红色两种。

.black {
    color: #000000;
}
.red {
    color: #fa000f;
}

可以用以下方式进行本地化：
已经定义了自定义元素name。需要将其注册到AngularDart中，但不能直接注册组件，而是需要绑定到一个模块中，然后将该模块添加到应用程序中。

在主要模块文件”lib/main_module.dart”中，可以如下编写：

library angular_sample.main_module;

import "package:angular/angular.dart";

import "package:angular_sample/name_component.dart";

class MainModule extends Module {

  MainModule() {
    bind(NameComponent);
  }
}

模块继承自Module类。在构造函数中通过bind()方法注册想要绑定的类。

在应用程序中添加模块。

import "package:angular/angular.dart";
import "package:angular/application_factory.dart";

import "package:angular_sample/main_module.dart";

void main() {
  applicationFactory()
  .addModule(new MainModule())
  .run();
}

一旦到这一步，接下来只需要在HTML中放置一个自定义的元素名“name”。

<!DOCTYPE html>
<html ng-app>
<head lang="ja">
    <meta charset="UTF-8">
    <title></title>
    <script src="packages/web_components/webcomponents.min.js"></script>
    <script src="packages/web_components/dart_support.js"></script>
</head>
<body>
<name name-attr="Angular" color="black"></name>
<name name-attr="Dart" color="red"></name>
<script type="application/dart" src="index.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>

在HTML的一侧，您只需放置自定义的元素，无需像Polymer那样在head中编写导入语句。AngularDart会处理一切。

当您在浏览器上显示此页面时，您应该可以看到两个名称以独立的样式显示。在Chrome浏览器的开发者控制台等工具中查看时，DOM应该是被隐藏的。

Imgur

关于基本的绑定和Component的用法，以上就是全部内容。我不知道是先创建官方文档还是先理解API文档，但下一步我打算写关于自定义属性和Template（旧装饰器）的内容。

如果有关于错误指正、问题等的评论，请随时提出。