Question

我有一个相当大的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();
}

Answer 1

我和你一样处于同样的境地，我不得不承认关于＆＃34;如何在角度V1＆＃34;中正确地做到这一点的文档。缺乏。

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

<强> 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

从AngularDart 0.14.0迁移到1.0.0

1 个答案: