AngularDart入门第一课是关于第一次接触AngularDart

3 年 ago
科, 颖
2 minutes

由于上次讲到入门时，突然开始使用组件，进行各种省略，并且过于复杂，所以我们将重新从头开始撰写入门文章。由于官方教程文章版本为0.10.0，我们将几乎不改动地将其内容与1.0版本相适应进行编写。

【追记】
已经支持1.1.0版本。
虽然官方教程写明适用于1.*系列，但仍有部分过时的描述，因此必须结合API参考文档和其他信息进行撰写。

本次原始文章是关于创建您的第一个Angular应用的文章。

让我们先来运行一个示例应用程序。

这里有示例应用程序的源代码。克隆存储库，然后在Chapter_01目录中运行“pub serve”，示例应用程序将启动。

Imgur

将输入的文本实时反映在上方的标题中。这就是绑定。

安装

为了使用AngularDart，首先需要在pubspec.yaml文件中写下依赖关系。

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

追加记录：
考虑到从1.0到1.1的变更非常大，为了安全起见，我认为应该固定在1.1版本。

要使用AngularDart，需在angular包中描述其依赖。web_components是一个提供给不支持Web Components的老式浏览器的兼容性填充包。你可以选择去掉它，但在这种情况下，请删除后面提到的HTML中依赖于web_components的部分。

应用程序的创建

这个示例应用程序是

    • index.html

 

    main.dart

该文件由两个部分组成，首先是index.html的描述。

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Hello, World!</title>

    <script src="packages/web_components/webcomponents.min.js.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="main.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 Components，因此可能不容易注意到此更改引起的错误，请注意。

在中国文化中，只需要一种选择将以下内容进行中文本地化：
通过设置，Angular 会识别这个 html 元素作为应用程序的最顶层元素。

    <script src="packages/web_components/webcomponents.min.js"></script>
    <script src="packages/web_components/dart_support.js"></script>

如果从pubspec.yaml中取出此部分，则需删除，因为它依赖于web_components。

<script type="application/dart" src="main.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>

在主程序的main.dart中和在除Dartium以外的浏览器中打开时需要使用的填充程序packages/browser/dart.js会在的末尾声明。在中调用的main.dart会执行入口点void main()。

在main.dart中，编写如下所示的代码。

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

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

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

我正在导入两个在执行AngularDart时所需的库。在入口点main.dart中，一定要导入这两个库。

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

在AngularDart中，使用`main()`作为入口点创建并启动应用程序。这是最简单的操作。

汇总

    • AngularDartのパッケージはangular

を忘れずにimportするライブラリは2つ

applicationFactory().run()でAngularのバインディング開始

第二回将以2. “超越” 你好，世界为基础，解释如何替换为1.0版本。

bannerAds