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 不兼容

sails.js - 迁移 Sequelize 迁移
我最近开始从事一个 Sails 项目。它目前在迁移表下具有以下格式的迁移。 20160826122004-create_users_table.js 'use strict'; module.expo
symfony - Doctrine :迁移:迁移。元数据存储不是最新的，请运行sync-metadata-storage命令解决这个问题
当我尝试迁移时 doctrine:migrations:migrate ，我收到此异常:“元数据存储不是最新的，请运行 sync-metadata-storage 命令来解决此问题。”。这仅在尝试在生
MarkLogic 迁移
我在 ec2 linux 7 上有一个 MarkLogic 服务器。我想将它迁移到 linux 6。我将 ebs 移动到新的 linux 6 并将其安装在 /var/opt/MarkLogic . 我
OpenID 迁移
我对 OpenID 很好奇。虽然我同意统一凭证的想法很棒，但我有一些保留意见。什么是防止 OpenID 提供商发疯并持有他们拥有的 OpenID 帐户直到您支付 n 美元？如果我决定不喜欢这个提供商，
迁移:在特定列之后添加一列
使用 SQL 很容易做到这一点，但我需要编写一个我不熟悉的 Knex 迁移脚本。以下代码在 order 表中行的末尾添加了 order_id 列。我想在 id 之后添加 order_id。我该怎么做？
迁移:在特定列之后添加一列
使用 SQL 很容易做到这一点，但我需要编写一个我不熟悉的 Knex 迁移脚本。以下代码在 order 表中行的末尾添加了 order_id 列。我想在 id 之后添加 order_id。我该怎么做？
Yii2 迁移 - 在另一列之后添加列
我想通过在 Yii2 中的迁移添加一个新列，使用以下代码: public function up() { $this->addColumn('news', 'priority', $this-
android - SQLDelight 迁移
我正在尝试在 SQLDelight 的表中添加更多列。我做了一个迁移文件 1.sqm .在迁移文件中，它给出了找不到表的错误。我的 build.gradle.kts: sqldelight {
使用单一架构和多个项目进行 Flyway 迁移
我有一个与 Flyway DB 迁移相关的问题。通常如何管理处理相同 DB 模式的多个项目(微服务)。每个项目中的 Flyway 迁移脚本如果被其他项目修改，则不允许启动。他们是否有任何文档或最佳实践
php - 迁移 - 自动创建数据库
我是 Laravel 的新手。我做了一份待办事项申请作为一项学校作业。我们必须使用迁移来创建我们的数据库。我使用迁移创建了 2 个表。我的问题是:如果你第一次在你的电脑上运行这个项目，有没有办法自动
laravel - 迁移:无法添加外键约束
我正在尝试在 Laravel 中创建外键，但是当我使用 artisan 迁移表时，出现以下错误: [Illuminate\Database\QueryException] SQLSTATE[HY000
Django 迁移 - 禁用系统检查
我从 Django 1.7 升级到 Django 1.9。我有多次迁移。升级后我无法再创建新的数据库。问题是“django manage.py migrate”运行检查。检查导入应用程序 URL。这
具有多个数据库的 Django 迁移
我在创建数据迁移方面遇到了困难。我的应用程序使用两个数据库。我在 settings.py 中配置了数据库，并创建了一个像 Django docs 中一样的路由器. # settings.py DB_H
postgresql - 努力与gorm手动创建关系/迁移
我有一个像这样的sql结构: CREATE TABLE resources ( id SERIAL PRIMARY KEY, title TEXT NOT NULL, created_at
Laravel 迁移 - 更新枚举选项
我正在尝试使用模式构建器向表添加枚举选项(不丢失当前数据集)。我真正能够找到的关于列更改的唯一信息是 http://www.flipflops.org/2013/05/25/modify-an-ex
c++ - 迁移 am2cmake
我尝试转移到一些 CMake 程序中，并且有一个从 xml 生成头文件的函数。生成文件.am adaptor_glue.hpp: dbus_introspect.xml $(DBUSXX_X
ios - 迁移 NSPersistentStore
我想将文件移至我的 iOS 应用程序的 CoreData 存储 ../Library/Application Support/MyApp/ 至 ../Documents/Stores/ 我可以使用 N
mysql - NetSuite 迁移
有没有人对数据迁移进出 NetSuite 有丰富的经验？我必须将 DB2 表导出到 MySQL，处理数据，然后导出到一个 CSV 文件中。然后获取帐户的 CSV 文件并再次操作数据以使帐户从我们的旧系
python - Django 迁移
我正在尝试在 Django 上建立一个博客。我已经走到了创建模型的地步。他们在这里: from django.db import models import uuid class Users(mode
html - HTTPS 迁移
我最近使用 bluehost 上的 AutoSSL 工具将网站迁移到 HTTPS。我在内容中看到一些失真，例如缺少背景颜色、表格位移、缺少_logos 等。有谁知道 HTTPS 迁移效果如何影响样式

首页

博学

6Ren·AI

商城

dart - 从 AngularDart 0.14.0 迁移到 1.0.0