从 AngularDart 0.14.0 迁移到 1.0.0答案

【问题标题】：Migrating from AngularDart 0.14.0 to 1.0.0从 AngularDart 0.14.0 迁移到 1.0.0
【发布时间】：2014-11-06 23:01:07
【问题描述】：

我有一个相当大的 Web 应用程序，它是使用 AngularDart 0.14.0 中的 @Controller 注释构建的。 @Controller 注释已被删除，所以我需要迁移到其他东西。所以我的问题是我要迁移到什么，以及如何迁移。我查看了 @Component 注释的文档，但我没有看到不需要大量返工就可以迁移到它的方法。我希望我错过了一些东西。我查看了其他类似的问题，但没有一个能引导我找到解决方案。

这是我如何使用@Controller 的简化示例。

pubspec.yaml

name: Admin
description: Server Admin Page
dependencies:
  angular: 0.14.0
transformers:
- angular:
    html_files: web/index.html

index.html

<!DOCTYPE html>
<html ng-app>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" >
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Server Configuration</title>
</head>
<body>
  <div admin id="container">
    <div id="header">
      <div id="app-header"><span id="app-name">Server Configuration</span></div>
      <div class="tab-panel ng-cloak" >
        <div class="{{ctrl.selectedTab != null && tab.name == ctrl.selectedTab.name ? 'tab-selected' : 'tab'}}" ng-repeat="tab in ctrl.tabs">
          <div class='tab-inner' ng-click='ctrl.selectTab(tab)'>{{tab.name}}</div>
        </div>
      </div>
    </div>
    <div id="body">
    <div class="ng-cloak" ng-if="ctrl.selectedTab != null" >
      <div>{{ctrl.selectedTab.name}} Content</div>
    </div>
    </div>
</div>
<script type="application/dart" src="index.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>

index.dart

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

@Controller(
    selector: '[admin]',
    publishAs: 'ctrl')
class AdminPage{
  AbstractTab selectedTab;
  List<AbstractTab> tabs = new List<AbstractTab>();

  AdminPage()
  {   
    tabs.add(new AbstractTab("tab1","tab"));
    tabs.add(new AbstractTab("tab2","tab"));

    this.selectTab(tabs.first);
  }

  void selectTab(AbstractTab tab)
  {
    this.selectedTab = tab;
    this.selectedTab.load();
  } 
}

class AbstractTab{
  String name;
  String type;

  AbstractTab(this.name,this.type);

  load()
  {
    print("loading $name");
  }
}

class MyAppModule extends Module {
  MyAppModule() {
    bind(AdminPage);
  }
}

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

更新：

我更新后的 index.dart 文件现在看起来像这样，并且在 AngularDart 1.0.0 中一切正常。感谢您的帮助。

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

class AdminPage{
  AbstractTab selectedTab;
  List<AbstractTab> tabs = new List<AbstractTab>();

  AdminPage()
  {   
    tabs.add(new AbstractTab("tab1","tab"));
    tabs.add(new AbstractTab("tab2","tab"));

    this.selectTab(tabs.first);
  }

  void selectTab(AbstractTab tab)
  {
    this.selectedTab = tab;
    this.selectedTab.load();
  } 
}

class AbstractTab{
  String name;
  String type;

  AbstractTab(this.name,this.type);

  load()
  {
    print("loading $name");
  }
}

@Injectable() // don't forget that
class GlobalController {
  AdminPage ctrl;

  GlobalController() {
    ctrl = new AdminPage();
  }
}

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

【问题讨论】：

标签： dart angular-dart

【解决方案1】：

我也遇到过和你一样的情况，我不得不承认缺少关于“如何在 Angular V1 中正确执行”的文档。

所以实际上，我发现最好的方法是使用全局控制器

main.dart

@Injectable() // don't forget that
class GlobalController {
  final Logger log = new Logger("GlobalController");
  AdminPage ctrl;
  OtherCtrl otherCtrl

  GlobalController() {
    ctrl = new AdminPage();
    otherCtrl = new OtherCtrl();
  }
}

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

index.html

<!DOCTYPE html>
<html ng-app>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" >
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Server Configuration</title>
</head>
<body>
  <div admin id="container">
    <div id="header">
      <div id="app-header"><span id="app-name">Server Configuration</span></div>
      <div class="tab-panel ng-cloak" >
        <div class="{{ctrl.selectedTab != null && tab.name == ctrl.selectedTab.name ? 'tab-selected' : 'tab'}}" ng-repeat="tab in ctrl.tabs">
          <div class='tab-inner' ng-click='ctrl.selectTab(tab)'>{{tab.name}}</div>
        </div>
      </div>
    </div>
    <div id="body">
    <div class="ng-cloak" ng-if="ctrl.selectedTab != null" >
      <div>{{ctrl.selectedTab.name}} Content</div>
    </div>
    </div>
</div>
<script type="application/dart" src="index.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>

它非常适合我。

注意：请注意，您的GlobalController 的所有方法和字段都可以直接访问。在本例中，如果您想访问 otherCtrl，只需在 HTML 文件中使用 otherCtrl。

注意 2：您无需在 HTML 应答器中添加任何内容即可完成这项工作。

信息：我知道在迁移中你不能允许大的重构，但是为了你未来的发展，Angular 建议将你的代码拆分成更多的组件。

rootContextType

【讨论】：