标签: angular-dart

我在Angular中编写单页应用程序,特别是angular.dart,但我假设这个问题仍然适用于AngularJS.

例如,以下路线:

/ login - 预计没有人登录.如果某人经过身份验证但未注册,则重定向到"注册"路由,如果已注册,则重定向到"主页"路由.

/ register - 期待尚未完成注册过程的经过身份验证的用户.如果未经过身份验证,请重定向到登录.如果已通过身份验证,请重定向到主页.

/ home - 期待经过身份验证和注册的用户.如果未经过身份验证,则重定向到"登录"路由,如果未注册,则重定向到"注册"路由.

我已经完成了相当多的搜索,但是在加载与特定路径关联的控制器之前无法找到内置或惯用的方法来确保满足某些先决条件,并且在不满足这些前提条件时适当地重定向.

任何帮助将不胜感激!

此问题与此问题有关
路由:在不重新加载视图的情况下获得有关参数更新的通知

我有一个带有网格视图的视图(使用生成ng-repeat).
routing参数recId指定最初使哪一行成为当前行.

视图具有导航按钮(向前向后)以选择当前记录.单击一行也会使该行成为当前行.

在初始加载视图后,这种(视图内部)导航不会使用AngularDarts路由功能.
后退/前进按钮不反映视图内的导航.
一旦我更改了视图中的当前记录,浏览器URL就会不同步.

如果我在每次用户使用导航操作时更改浏览器URL,则会重新加载视图.这使得开发变得更加复杂并导致视图的重新加载(这是WIP - 参见链接问题).

保持应用程序状态和浏览器URL(历史记录)同步的最佳/正确方法是什么.

更新

如何配置路由器,以便单击其中一个生成的链接更新浏览器中的URL,但不重新加载视图.(应该可以为当前选定的记录创建书签.)

代码有点过时但是我问这个问题后我没有在这个项目上工作.

路由器配置

library my_prototype.routing;

import 'package:angular/angular.dart';
import '../services/injectable.dart';

@InjectableService()
class AppRouteInitializer {


  call(Router router, ViewFactory views) {
    router.root
    ..addRoute(
        name: 'table',
        path: '/:entityId/table/:recId',
        enter: views('view/dynamic_table.html')
        )
    ..addRoute(
        name: 'default_view',
        defaultRoute: true,
        enter: (_) =>
            router.go('form',
                {
                  'entityId': '',
                  'rec': '-1'
                },
                replace: true));
  }
}

index.html仅包含Dart/AngularDart样板旁边

<ng-view></ng-view>

视图组件包含此构造函数

@NgComponent(
  selector: 'dynamic-table',
  publishAs: 'ctrl',
  template: r'''  
    <div ng-repeat="rec in ctrl.records">
      <a href="/{{entityId}}/table/{{rec.id}}">{{rec.name}}</a>
    <div>''') …

我有两个顶级控制器,现在Controller已经弃用了,我想知道如何将它们转换为它们需要的任何东西.

我最近遇到了一些使用抽象类作为接口的例子，但也向抽象接口添加了工厂构造函数，因此它可以在某种意义上被“更新”。例如：

abstract class WidgetService {
    factory WidgetService() = ConcreteWidgetService;

    Widget getWidget();
    void saveWidget(Widget widget);
}

class ConcreteWidgetService extends BaseWidgetService implements WidgetService {

    WidgetService();

    Widget getWidget() {
        // code to get widget here
    }

    void saveWidget(Widget widget) {
        // code to save widget here
    }
}

此服务的使用将在其他一些服务或组件中，如下所示：

WidgetService _service = new WidgetService();

根据我对这个示例的理解，上面的行基本上会“新建”一个 WidgetService，它通常会从 Dart 分析器中产生一个警告，并且所说的服务变量实际上是一个基于 ConcreateWidgetService 分配给WidgetService 的工厂构造函数。

这种方法有好处吗？根据我的 OOP 经验，当我不知道我将获得的具体类型时，我使用抽象类/接口进行编程。在这里，我们似乎立即将具体类型分配给抽象工厂构造函数。我想我的第二个问题是在这种情况下为什么不直接在这里使用 ConcreteWidgetService 而不是重复所有方法签名？

假设有一个简单的框架来显示弹出窗口：

@Component(
  selector: 'popup-host',
  template: '''
      <div class="popup-container">
        <ng-template #popupRef></ng-template>
      </div>
  ''',
  styles: ['.popup-container { position: absolute; top: 100; left: 100; z-index: 100; }'],
)
class PopupContainerComponent {
  final PopupController _controller;
  final ComponentLoader _loader;

  PopupContainerComponent(this._controller, this._loader);

  void ngOnInit() {
    _controller.container = this;
  }

  @ViewChild('popupRef', read: ComponentRef)
  ComponentRef popupRef;

  void render(PopupConfig config) {
    final componentRef = _loader.loadNextTo(config.factory, popupRef);
    if (componentRef.instance is HasValueSetter) {
      componentRef.instance.value = config.value;
    }
  }
}

@Injectable()
class PopupController {
  PopupContainerComponent _container;
  set container(PopupContainerComponent container) => _container = …

我有关于angulardart和登录流程的结构问题.我有一个服务,它与服务器进行通信,并具有login(),logout(),loggedIn()等方法.这一切都在角度很好地工作,但我正在寻找一种最佳实践方式将登录流程合并到我的应用程序中.

该应用程序要求用户登录.因此,当用户未登录时,我是否会在启动时重新路由到自定义"登录"视图？我还没有登录时切换主index.html的部分内容吗？我会创建一个处理登录的自定义组件吗？

对于这种情况,是否存在共同的角度模式？

我正在将我的应用程序切换到新的路由DSL.具体来说,我想做这样的事情preEnter:

final RouteInitializerFn routes =(Router router, ViewFactory views) {
  views.configure({
   'chat': ngRoute(
     path: '/chat',
     // authService.requireState returns a Future<bool>, and may invoke an HttpRequest
     preEnter: (RoutePreEnterEvent e) => e.allowEnter(authService.requireState(LOGGED_IN)),
     view: 'views/chat.html'),

   'login': ngRoute(
     path: '',
     defaultRoute: true,
     view: 'views/login.html')
  });
}

这将在模块中配置如下:

value(RouteInitializerFn, routes);

如果你错过了它,我引用一个注射authService内RouteInitializerFn.这是不可能的,因为它RouteInitializerFn是一个函数而不是一个类,所以不能注入任何东西.如果我routes在一个类中封装了这个函数,我不知道如何配置RouteInitializerFn,所以我有点陷入困境.

我正在使用最新版本的 angular.dart，我的pubspec.yaml外观有点像这样：

name: angularApp
dependencies:
  angular:
    git:  'git@github.com:angular/angular.dart'
  third_party_angular_plugin: any

问题是third_party_angular_plugin取决于angular.dart. 我试图指定如下：

name: angularApp
dependencies:
  angular:
    git:  'git@github.com:angular/angular.dart'
  third_party_angular_plugin: any
dependency_overrides:
  angular:
    version: ">=0.9.10"

但它抛出一个奇怪的错误说 Bad State: No elements dart:core List.single ....

如何覆盖third_party_angular_plugin我的应用程序对 angular 的依赖？

我是 Dart 的初学者，我不知道如何访问下一组的值

Set mySet = Set.from(['Please', 'Help', 'Me']);

我正在使用 Angular dart 开发一个 Web 应用程序。

我正在尝试使用 document.querySelector() 在组件内查找“div”元素，并且我正在尝试修改（添加一些内容）其主体。

但它似乎没有找到“div”元素。

这是我的html：

<ng-container *ngFor="let item of list">
  <ng-container *ngIf="item.canShowChart">
    <div [id]="item.elementID" class="chart"></div>
  </ng-container>
</ng-container>

这是我的组件方法，它尝试修改“div”：

  void drawChart() {
    for (final item in list) {
      if (!item.canShowChart) {
        continue;
      }
      final DivElement _container = document.querySelector('#' + item.elementID);
      print(_container);
    }
  }

它总是将“_container”打印为“null”

我尝试删除 ng-container 并在页面中仅包含“div”，如下所示，它似乎有效！

<div [id]="item.elementID" class="chart"></div>

问题是什么？

TIA。