Dart和Angular2:快速入门

本文的目的是在Dart中,构建和运行一个超级简单的Angular2应用,并针对其它的文档实例建立开发环境。当然,也可以作为现实应用的基础。

先试试看!

尝试一下在线实例live example源码quickstart),它会加载示例应用,并显示简单的信息:

构建应用

  • 前提:安装Dart SDK
  • 步骤1:创建应用的项目文件夹,定义包依赖和针对Angular2的项目设置
  • 步骤2:创建应用的Angular根组件(root component)
  • 步骤3:添加main.dart,识别Angular的根组件
  • 步骤4:添加index.html,托管的应用的Web页面
  • 步骤5:构建和运行应用
  • 收工,下一步

前提:Dart SDK

如果还没有安装Dart SDK,论坛中有下载地址。Dart SDK包含有Pub包管理等工具。IDE推荐WebStorm或Atom,WebStorm功能强大,Atom简洁,至于以前教程中提到的DartEditor,放弃吧!官方已经停止更新,过时了。

步骤1:创建和配置应用

创建项目文件夹

mkdir angular2_quickstart
cd    angular2_quickstart

添加pubspec.yaml

在刚才创建的文件夹中,以下面的内容创建pubspec.yaml文件。该文件必须指定依赖angular2browser包,并设置angular2以及其它包(如dart_to_js_script_rewriter)的transformer。前不久,Angular2已经发布了2.0.0正式版,源码中使用的是2.0.0-beta.22测试版,可以自行修改。

name: angular2_quickstart
description: QuickStart
version: 0.0.1
environment:
  sdk: '>=1.19.0 <2.0.0'
dependencies:
  angular2: 2.0.0-beta.22
  browser: ^0.10.0
  dart_to_js_script_rewriter: ^1.0.1
transformers:
- angular2:
    platform_directives:
    - 'package:angular2/common.dart#COMMON_DIRECTIVES'
    platform_pipes:
    - 'package:angular2/common.dart#COMMON_PIPES'
    entry_points: web/main.dart
- dart_to_js_script_rewriter

获取包

进入项目文件夹根目录,运行pub get命令安装依赖的包。如果网络访问官网Pub服务器超时,可以设置本社区的Pub镜像服务器(暂时停用)

pub get
Resolving dependencies...

所有都设置好以后,我们开始编写代码。

步骤2:我们的第一个组件

创建一个文件夹保存应用,并添加一个超级简单的Angular组件。在项目的根目录创建lib文件夹:

mkdir lib

在新建的lib文件夹中,创建组件文件lib/app_component.dart,内容如下:

import 'package:angular2/core.dart';
@Component(
    selector: 'my-app',
    template: '<h1>My First Angular App</h1>')
class AppComponent {}

AppComponent是应用的root

所有的Angular应用只有一个根组件,通常命名为AppComponent。组件是构建Angular过程中,最基础的块。组件通过它关联的模板来控制视图的一部分。

《快速入门》只有一个非常简单的组件,但它有所有组件最基本的结构。编写组件时:

  • 用一个或多个import声明来导入我们需要的文件
  • 注解@Component会告诉Angular,使用什么模板,怎样创建组件
  • 组件类通过模板来控制视图的外观和行为

import

Angular App是模块化的。它包含许多文件,并且每个文件都有专门的作用。Angular自身也是模块化的。它是库模块的集合,每个模块有数个相关的功能,我们使用这些功能来构建应用。

当我们需要一个模块或库中的东西时,需要import导入它。这里,我们导入Angular2 core,以便我们的组件代码可以使用注解@Component

import 'package:angular2/core.dart';

注解@Component

@Component允许我们将元数据与组件类关联起来。而元数据会告诉Angular怎样创建和使用这个组件。

@Component(
    selector: 'my-app',
    template: '<h1>My First Angular App</h1>')

调用的@Component构造函数有两个命名参数:selectortemplate

selector会针对HTML元素(表示组件)指定一个简单的CSS选择器。对于这个组件表示的元素,被命名为my-app。在HTML中遇到my-app元素的时候,Angular会创建并显示一个AppComponent实例。

template指定组件对应的模板,写入一个增强形式的HTML中,告诉Angular怎样渲染组件的视图。示例的模板只是简单的一行HTML信息“My First Angular App”。更高级的模板包含有组件属性的数据绑定,并且可能识别另一个有自己模板的应用组件。这些模板可能又会识别其它组件。通过这种方式,Angular应用成为一个组件数。

组件类

组件类名为AppComponent,当我们准备构建一个真实的应用时,我们可以通过属性和应用逻辑来扩展这个类。这里AppComponent是空的,因为我们在《快速入门》中什么也不用做。

class AppComponent {}

步骤3:添加main.dart

现在我们需要告诉Angular加载根组件,创建:

  • web文件夹
  • web/main.dart文件,内容如下:
    import 'package:angular2/platform/browser.dart';
    import 'package:angular2_quickstart/app_component.dart';
    void main() {
      bootstrap(AppComponent);
    }

我们导入了两个功能:

  • Angular的浏览器bootstrap函数
  • 应用的根组件,AppComponent

Bootstrapping(引导程序)是和平台相关的

注意,我们从angular2/platform/browser.dart导入bootstrap函数,而不是angular2/core.dart。引导程序并不是核心,因为这并不是唯一的引导程序的方法。当然,大多运行在浏览器中的应用,是从这个库中调用bootstrap函数的。

但是也有可能在不同的环境中加载组件。我们可能在移动设备上,使用Apache Cordova或NativeScript加载它。我们可能希望在服务器上渲染应用的第一个页面,以提高启动性能或有利于SEO。这些目的需要一个不同类型的引导函数,而我们可以从不同的库中导入。

为什么要创建单独的main.dart和应用组件文件?

main.dart和应用组件文件都很小。这仅仅是快速入门。我们可以把这些文件合并成一个,自身没有一定的复杂性。

但我们希望演示构建一个Angular应用正确的方法。App引导程序和视图是不同的关系。混合不同的关系在将来会出现很多麻烦。例如,我们希望用不同的引导程序在多个环境中启动AppComponent。或者,如果并不想尝试运行整个应用,如测试组件的时候,会更加容易。让我们做点小小的额外工作,以正确的方法来进行吧!

步骤4:添加index.html

web文件夹中创建index.html,内容如下:

<!DOCTYPE html>
<html>
  <head>
    <title>Getting Started</title>
    <link rel="stylesheet" href="styles.css">
    <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>

index.html文件定义了托管的应用程序的Web页面。

当Angular在main.dart中调用bootstrap函数的时候,它会读取AppComponent元数据,查找my-app选择器,定位一个名为my-app的元素标签,并在标签之间渲染我们应用的视图。

添加样式

样式并不是必需的,但却是很友好的,假设我们有一个名为styles.css的样式表。在web文件夹中创建styles.css,可能是如下所示使用最小的样式。至于文档实例所使用的完整的样式,可以查看源码。

/* 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;
}

步骤5:构建和运行应用

对于运行App,我们有几个选择。一个是启动一个本地HTTP服务器,然后在Dartium中观察App。我们可以使用任何Web服务器,例如WebStorm的服务器或Python的SimpleHTTPServer。

另一种选择是使用pub serve构建并启动App,然后通过在任何现代浏览器中访问http://localhost:8080运行它。Pub serve会动态的生成JavaScript,第一次访问页面的时候可能需要一点时间。Pub serve也能在watch mode(监视模式)中运行,在预编译后会接着动态加载修改的资源。

App开始运行后,浏览器窗口应该显示如下(如果未显示,请确保代码正确,并在适当的目录执行pub get):

构建应用(生成JavaScript)

在部署应用之前,我们需要通过pub build命令生成JavaScript文件。

pub build
Loading source assets...

生成的JavaScript文件,以及支持的文件,位于build目录中。

使用Angular转换器

当为Angular App生成JavaScript时,确保应用了Angular transformer。它的作用是分析Dart代码,将使用了反射的代码转换为静态代码。Dart的构建工具可以编译出更快、更小的JavaScript。

transformers:
- angular2:
    ...
    entry_points: web/main.dart

entry_points项用于确认App中有main()函数的Dart文件。

性能,转换器和Angular2库

当App导入bootstrap.dart时,会使用反射库dart:mirrors,并在编译为JavaScript时产生性能问题。不用担心,Angular transformer会转换应用的入口点(pubspec.yaml中的entry_points),以便它们不使用Mirror。

使用dart_to_js_script_rewriter

为提高App的性能,需要将HTML文件转换成直接包含生成的JavaScript。方法之一是使用dart_to_js_script_rewriter。使用重写的时候,只需在pubspec.yaml中设置好dependenciestransformers即可。

dependencies:
  ...
  dart_to_js_script_rewriter: ^1.0.1
transformers:
...
- dart_to_js_script_rewriter

注:dart_to_js_script_rewriter转换器必须在angular2转换器后面。

收工,下一步

最终,项目的目录结构如下图所示:

上图并未显示生成的文件和目录。例如,pubspec.lock文件指定了包的版本,以及应用依赖的其它包的识别信息。pub build命令会创建一个包含了我们的应用的JavaScript版本的build目录。Pub、IDE以及其它工具,常常会创建其它目录和dot文件(如.packages)。

下一步做什么?

我们的第一个应用所做不多,它只是“Hello world”的Angular2版本。

我们编写了一个很小的Angular组件,创建了一个简单的index.html,并使用静态文件服务器启动应用。这就是我们所做的,一个“Hello world”App。

我们有更大的野心!

下一步,我们将使用Angular2构建一个小应用,演示一些得意的功能。

加入我们的《英雄之旅》教程吧!

本文出自“Dart语言中文社区”,允许转载,转载时请务必以超链接形式标明文章原始出处
本文地址:
http://www.cndartlang.com/876.html

发表评论

登录后才能评论