dart - 从 AngularDart 0.14.0 迁移到 1.0.0-6ren

dart - 从 AngularDart 0.14.0 迁移到 1.0.0

转载作者：行者123 更新时间：2023-12-04 18:33:38

24

4

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

最佳答案

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

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

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 应答器中添加任何内容即可实现此功能。

信息: 我知道在迁移过程中你不能允许大的重构，但是对于你 future 的开发，Angular 建议将你的代码拆分成更多的组件。

rootContextType

关于dart - 从 AngularDart 0.14.0 迁移到 1.0.0，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26791055/

24

4

0

文章推荐： qt - 为什么 qbs 无视我的规则？

文章推荐： pytorch - 为什么多层感知器在 CartPole 中优于 RNN？

文章推荐： ruby-on-rails - puma服务器死机

文章推荐： ubuntu - ffmpeg:视频编解码器 ansi 与 flv 不兼容

AngularDart 中是否需要转义字符？
人们是否需要担心 AngularDart 中的字符转义？我认为 mustache 渲染总是安全的；例如 {{ctrl.recipe.name}} 有人可以证实这一点吗？新手需要注意的其他情况吗？最佳
dart - Angulardart 不应重新加载链接
在 angularjs 中，您可以禁止在使用时重新加载页面。 text 在 angulardart 中，链接实际上是导航到 href。这是故意的吗？ angularjs 行为的 Goog 示例:htt
dart - AngularDART 组件
我在学习 AngularDART 组件时编写了以下简单代码，但没有显示任何内容，任何人都可以帮助我知道我犯了什么错误: 我的 html 主文件:
dart - AngularDart 如何创建组件
我刚开始从本教程中学习: https://github.com/angular/angular.dart.tutorial/wiki/Creating-a-Custom-Component 我只是遇到
web - AngularDart-将静态定义的子组件与动态组件聚合一次的方法
我想将静态定义的子组件与动态集合在一起，而这些子组件可能来自流。我想要一种通用的方式来定义该轮播中的轮播，在那里我可以有一组类型化的组件。可以静态或动态定义集合。下面是一个示例: import 'pa
dart - Angulardart Markdown指令不起作用
我正在尝试执行以下操作: import 'dart:html'; import 'package:angular/angular.dart'; import 'package:markdown/mar
angularjs - AngularDart Scope对象用于什么
有时我会尝试找到有关AngularDart的信息，并最终出现在AngularJs文档/ SO问题和帖子中... 因此，我经常遇到在AngularJs中提到$scope对象的帖子和答案。我不太确定它的用
firebase - AngularDart 5和Firebase部署
我正在尝试将AngularDart 5网络应用程序部署到Firebase。这些是我遵循的步骤: 我使用pub run build_runner build --output build命令构建了我的应
angular - AngularDart-如何在AppLayout中替换组件
我想在单击“应用布局”的component-a内的component-b项时，从component-c和material-navigation替换material-content。 app_layou
dart - AngularDart:文件输入模型指令
我正在尝试制定类似于ng-model的指令来处理文件输入。我是AngularDart的新手，所以真的不知道该怎么做。这是我通过查看ng-model源文件成功编写的一些代码，但是(显然)它不起作用。
server - AngularDart-上传到共享托管服务器
因此我在机器上启动并运行了AngularDart应用程序(我使用了stagehand)。现在是我要将其上传到共享托管服务器的时间。我的问题是:这样做的正确程序是什么？因为显然Dart不能在本地运行，并
angularjs - AngularDart:组件属性
我是Angular的新手，但遇到以下问题。我正在尝试创建一个可以为active的组件。我目前对其进行设置，以便它检测是否存在名为active的属性，并相应地设置其内部状态。当我想删除 Activ
dart - AngularDart 中的模板中是否有可用的预定义变量？
Dart文档目前缺少“少量”详细信息，Google也没有帮助我。 angulardart模板中是否有任何预定义的变量或类似的东西？为了阐明我的意思: 像{{baseURL}}之类的东西。简而言之:角
AngularDart 依赖注入(inject)
我正在使用 AngularDart，但我不知道如何注入(inject)我的入口点依赖项。主要 Dart : import 'package:angular/angular.dart'; import
AngularDart 和 AppModule
我正在尝试将 AngularDart 应用程序放在一起，并且我会在文档中来回切换。在 AngularDart 官方网站架构页面中，它谈到了最重要的 AppModule AngularDart Arc
dart - AngularDart 可以直接路由到组件吗？
我正在使用 AngularDart 和路由。我的观点是包含单个组件的单行代码。我觉得这些观点没有分量。我可以直接路由到组件吗？示例: router.root ..addRoute(
dart - AngularDart 指令列表？
AngularDart 指令的完整列表是否记录在某处？据我所知，鉴于 AngularDart 的快速发展，此列表可能会发生变化。最佳答案这是我发现的: 实现这些指令的类列于 angular.dir
dart - AngularDart 动态改变页面标题
我的一个组件根据路由从 MongoDB 中提取页面标题(和内容)，并将标题存储在该组件类的实例变量中。在中留 mustache 的最佳方式是什么？标记要显示的变量，例如 Site Title |
css - AngularDart 从包中指定字体
如何指定 @fontface字体在包中时的 URL？使用后webdev build字体位于 build/packages//font.ttf ，但在此之前我不确定如何定义它。最佳答案原来只是从 p
angular - AngularDart 中有反应形式吗？
在官方 AngularDart 指南中(https://webdev.dartlang.org/angular/guide/forms)有一种方法可以通过模板驱动的方式构建表单。我想在 Angular

首页

博学

6Ren·AI

商城

dart - 从 AngularDart 0.14.0 迁移到 1.0.0