Angular 2.0 在使用 NativeScript 的原生移动应用程序中运行
重要提示：这篇文章是在 2015 年初撰写的，当时我们刚刚开始与 Angular 团队合作，使 Angular 在 NativeScript 中成为现实。如今，NativeScript 允许您使用 Angular 构建生产就绪的 iOS 和 Android 应用程序。如果您想了解如何操作，请查看我们的NativeScript & Angular 入门指南。
如果您是一位拥有 Web 背景的开发者，那么您一定知道 AngularJS。AngularJS 是 Web 上以及混合移动应用程序中最流行的库之一。Angular 团队已经开发了大约一年的时间，发布了他们的下一个主要版本 - Angular 2.0。此版本的其中一个主要目标是使 AngularJS 成为移动开发者的首选框架。
实现这一点面临着巨大挑战。AngularJS 的当前版本 - 1.x 是为了在浏览器内部工作而实现的，并且在很大程度上依赖于浏览器的 DOM 实现。为了支持浏览器和非浏览器环境（例如原生移动 iOS、Android 或 NativeScript 应用程序），必须更改 AngularJS 的内部工作方式。这就是 Angular 2.0 中引入许多新接口和抽象的原因，以实现此转变。
Angular 2.0 中的这些新抽象使 NativeScript 团队能够开始在兼容性层面上进行工作，这将允许想要使用 AngularJS 的开发者将其简单地添加到他们的 NativeScript 应用程序中，并开始使用他们已经掌握的知识。
NativeScript 的主要目标之一是让开发者尽可能多地重用现有代码和技能。我们相信，添加 AngularJS 库作为一种选择，是我们努力支持 CSS、JavaScript 和 TypeScript 的良好延续。通过能够重用原生 iOS 和 Android 库，我认为 NativeScript 开发者可以使用的一系列工具是我们框架的最大优势。
如果您是 NativeScript 的新手，请阅读我们的 NativeScript 入门文章。
不仅如此，通过使用 Angular 指令，您可以在移动应用程序和网站之间共享大部分代码。整个业务逻辑是用兼容 ECMAScript 的 JavaScript（如果您喜欢，也可以使用 TypeScript）编写的，样式是 CSS，并且如果您在移动应用程序和网站上使用 Angular 2.0，许多 UI 声明可以共享。想象一下 NativeScript 和 Kendo UI 之间的共享 UI！
现在让我们看看这种集成目前的进展情况。
我们创建了一个非常简单的应用程序，它展示了 UI 是如何构建的，以及属性和事件绑定是如何使用 Angular 2.0 完成的。示例应用程序源代码发布在 GitHub 上。该存储库在这里 - https://github.com/NativeScript/sample-Angular2。好消息是，您不需要使用不同的 NativeScript 版本来运行它。借助今天的 NativeScript v1 版本，您可以运行示例，并体验在原生应用程序中运行 Angular 2.0 的乐趣！
现在让我们深入研究一下代码。应用程序的起始页面是 main-page.js。在那里，您可以看到 Angular 2.0 应用程序是如何引导的
var TodoApp = (function () {
/*
执行 Label 元素的初始绑定。绑定以如下方式指定
<Label [text]="message" />
*/
function TodoApp() {
console.log("TodoApp constructor");
this.message = "NativeScript <3 AngularJS 2!!";
}
/*
此函数绑定到 Button 的点击事件，如下所示
<Button text="TAP" (tap)="onTap()" />
*/
TodoApp.prototype.onTap = function () {
console.log("onTap");
this.message = "AngularJS <3 {N} on " + new Date();
};
TodoApp = __decorate([
Component({ selector: 'Todo-App' }),
Template({ inline: '<Label [text]="message" /><Button text="TAP" (tap)="onTap()" />' })
], TodoApp);
return TodoApp;
})();
如您所见，我们有一个Label 和一个Button 元素。Label 元素绑定到数据模型的“message”属性，使用以下语法
<Label [text]="message" />
Button 的点击事件绑定到onTap() 函数，使用以下语法
<Button text="TAP" (tap)="onTap()" />
在onTap() 函数中，“message”属性会更新，Label 的Text 属性会自动更新，无需任何额外的管道。您可以在这里查看正在运行的应用程序的视频这里。
Angular 和 {N} 之间的这种集成胶水在 NativeScriptDOMAdapter.js 中实现，在这里我们“桥接”了 AngularJS 执行到底层 NativeScript 逻辑的调用。
总之，这是我们第一次尝试在 NativeScript 应用程序中展示 Angular 2.0，我们希望听到您的反馈。我们非常期待看到 Angular 2.0 的发展，我们相信您会发现将 AngularJS 与 NativeScript 结合起来会有很多价值。
请在我们的 GitHub 讨论 中留下有关 Angular2.0 支持的评论，如果您有兴趣与我们合作进行这种集成，请告诉我们！