我正在研究如何将巨大的单页整体分解为微前端架构.

想法:

• 该页面由几个可自主运行的组件组成
• 每个组件由一个开发团队管理
• 每个团队都可以更改,更新和部署他们的组件,而不会破坏其他团队的组件
• 每个团队都选择自己的工具堆栈

原因

要有效地开发大型应用程序,您需要让很多人参与其中.但是,每个应用程序/团队的开发人员数量不能很好地扩展.然而,独立团队并行开发多个独立应用程序可以任意缩放

考虑到这一点,团队必须选择自己的工具堆栈,特别是执行第三方库的独立版本升级(如角度,反应,jquery).如果不是这种情况,框架更新需要与每个组件兼容,然后才能将其部署到生产环境中.

这适用于Angular吗？

虽然需要进行独立的版本升级,但将团队限制在一些支持的框架(Angular,React,Vue,Polymer ......)是合理的,现在我尝试构建一个纯粹由Angular-Apps组成的演示.

然而,即使Angular 5被认为是支持大型多模块应用程序的平台框架,但在同一浏览器窗口中运行几个独立的角度应用程序几乎是不可能的.

我设法通过利用HTML-Imports在单个webapp上引导几个Angular-Apps(不同的版本,每个版本都在自己的服务器上托管).但是,有几个global依赖项需要在应用程序之间共享

• zone.js只能启动一次
• 路由需要URL更改
• 浏览器 - 像cookies,sessionstorage等...

网上有几篇关于如何引导多个角度模块的文章,但它们都引用同一个核心应用程序中的多个模块,这反过来意味着它们都在相同的框架版本上运行,并且更新意味着你必须重建和部署整个巨石.

除了" iframes" 之外是否有任何解决方案可以在同一个页面上运行多个Angular(5)应用程序？

当我取消,内容如下异步方法调用Cancel()我的方法CancellationTokenSource,它最终会停下来.但是由于该行Console.WriteLine(await reader.ReadLineAsync());需要相当多的时间来完成,我还尝试将CancellationToken传递给ReadLineAsync()它(期望它返回一个空字符串),以使该方法对我的Cancel()调用更具响应性.但是我不能错过一个CancellationToken到ReadLineAsync().

我可以取消打电话给Console.WriteLine()或Streamreader.ReadLineAsync()如果是,我该怎么办？

为什么ReadLineAsync()不接受CancellationToken？我认为将Async方法赋予可选CancellationToken参数是一个好习惯,即使该方法在取消后仍然完成.

StreamReader reader = new StreamReader(dataStream);
while (!reader.EndOfStream)
{
    if (ct.IsCancellationRequested){
        ct.ThrowIfCancellationRequested();
        break;
    }
    else
    {
        Console.WriteLine(await reader.ReadLineAsync());
    }
}

更新 如下面的评论中所述,Console.WriteLine()由于每行40.000个字符的输入字符串格式不正确,单独调用已占用几秒钟.打破这个问题可以解决我的响应时间问题,但是我仍然对如何取消这个长时间运行的语句的任何建议或解决方法感兴趣,如果由于某种原因打算将40.000个字符写入一行(例如将整个字符串转储到一份文件).

显然我还没有理解背后的机制ng-repeat,$$hashKeys而且track by.

我目前在我的项目中使用AngularJS 1.6.

问题:

我有一个复杂的对象数组,我想用它来渲染我的视图中的列表.但要获得所需的结果,我需要首先修改(或映射/增强/更改)这些对象:

const sourceArray = [{id: 1, name: 'Dave'}, {id:2, name: Steve}]

const persons = sourceArray.map((e) => ({enhancedName: e.name + e.id})) 

//Thus the content of persons is:
//[{enhancedName: 'Dave_1'}, {enhancedName: 'Steve_2'}]

将此绑定到视图应该像这样工作:

<div ng-repeat="person in ctrl.getPersons()">
    {{person.enhancedName}}
</div>

然而,这显然会进入$digest()-loop,因为.map每次调用它都会返回新的对象实例.由于我通过函数将其绑定到ng-repeat,因此它会在每个函数中重新评估$digest,模型不会稳定,Angular会保持重新$digest循环 - 因为这些对象被标记为$dirty.

为什么我很困惑

现在这不是一个新问题,有几个解决方案:

在2012年的Angular-Issue中, Igor Minar自己建议手动设置$$ hashKey-Property以告知angular生成的对象是相同的.这是他的工作小提琴,但是因为即使这个非常简单的例子$digest在我的项目中使用它时仍然遇到了-loop,我尝试在小提琴中升级Angular-Version.由于某种原因它崩溃了.

好的......从Angular 1.3开始,我们track by …

给定一个数组sourceArray我想创建一个targetArray取决于第一个的条目.这意味着创建的Array应包含每个源条目的条目,并在sourceArray更改时更新.但是,修改targetArray应该永远不会更新源.

这种Plunker的工作方式只要sourceArray是静态的.一旦你开始修改源条目,它显然不会正确更新目标,因为我缺乏适当的数据绑定机制.

我是否需要targetArray通过观察手动更新sourceArray或者是否有任何由Angular实现的单向数据绑定机制,我可以使用它来保持两个数组同步？

题:

如何防止类似HTML模板中的代码复制？

描述

我有相同的视图/指令的几个不同的模板,我想根据环境改变.模板大部分相同,但包含一些需要根据环境进行更改的部分.

例:

输入userdata的视图对于管理员可能如下所示:

<p> Username: </p>
<input ng-model="ctrl.username"></input>

<p> Firstname: </p>
<input ng-model="ctrl.firstname"></input>

<p> Lastname: </p>
<input ng-model="ctrl.lastname"></input>

<p> Authorization-level: </p>
<input ng-model="ctrl.authlevel"></input>

但是,我需要向用户显示基本相同的视图,而不允许他更改其授权级别:

<p> Username: </p>
<input ng-model="ctrl.username"></input>

<p> Firstname: </p>
<input ng-model="ctrl.firstname"></input>

<p> Lastname: </p>
<input ng-model="ctrl.lastname"></input>

<p> Authorization-level: </p>
{{ctrl.authlevel}}

我想防止重复两个模板的代码.

可能的解决方案:

NG-如果

显然,我可以ng-if根据条件在模板中交换html块.但是,这不能很好地扩展.上面的例子很简单,但想象一下我有5-10个不同版本的模板.使用此模板的版本数量,代码变得越来越难以阅读.另外,我希望阻止将admin-view的代码发送给用户,如果它包含在同一个html文件中,我就不能这样做.

自定义指令

我可以将每个需要在其自己的指令中替换的HTML节点包装起来.这将保持主模板清洁,我可以根据环境交换指令的HTML模板.但是,所有这些附加指令都会导致大量的样板代码.

(这似乎最接近Angular2的组件)

第三方库角度块

我发现角度块似乎正在解决我想要解决的问题.但是,它看起来并不是很受欢迎,并且在查看实现时我担心这可能会导致大型应用程序出现性能问题(由于多个嵌套$compile调用).

我有什么选择吗？你知道任何最佳实践或风格指南吗？

看起来我对指令中孤立的范围感到困惑,希望你能帮助我.

我试图将一段代码(包含一些自定义指令)包装到一个新指令中以减少代码重复.显然,我需要将一些属性ng-model作为我的新指令作为参数来使指令可重用.ng-model虽然不喜欢表达式(我ng-model="{{myVariableWhichContainsDesiredNgModelString}}"最初尝试过)因此我最终得到了这篇文章:AngularJS - 创建一个使用ng-model的指令.

虽然接受的答案似乎适用于简单的设置,但我从接受的答案编辑了plunker以测试它是否也适用于嵌套指令:(在我的应用程序中,我需要包装来自第三方库的指令,我无法编辑)Plunker.在我的代码中,每个指令似乎都生成了自己的作用域,并且=在作用域定义中使用的双向数据绑定似乎并没有按照需要进行.

编辑:因为我不知道我在问什么我编辑上面的Plunker并将重新解释这个问题:在Plunker中我有三个输入字段,它们应该绑定到相同的模型值.这最初是有效的,但是一旦我编辑第三个输入字段,它就会在其隔离的范围内生成自己的变量,而不是更新初始值.显然,第三个输入字段是指从该点开始的新变量.如何避免这种行为并保持输入链接$scope.model.name？

观察:从模板中删除isolated-scope-directive使一切按预期工作......

template: '<div><my-input ng-model="myDirectiveVar"></my-input></div>',

代替

template: '<div><my-isolated-scope-directive><my-input ng-model="myDirectiveVar"></my-input></my-isolated-scope-directive></div>',

Plunker

HTML:

<!-- this binds to the model which i would like all my inputs to bind to.-->
<input ng-model="name">

<!-- Example 1: This seems to generate a new modelvalue in the isolated-scope directive. Can I avoid this without modifying that directive?-->
<my-isolated-scope-directive><my-input ng-model="name"></my-input></my-isolated-scope-directive>

<!-- Example 2: This is what …

如何访问 Apache Camel Rest 模块中的 PathVariables？

我定义了这样的路线（遵循文档中的“使用基本路径” ）：

rest("/customers/")
.get("/{id}").to("direct:customerDetail")

如何{id}在以下路线中控制 -Parameter？

基本上我想知道骆驼提供什么而不是@PathVariable（见下面的例子）

@RequestMapping(value="/customers/{id}", method = RequestMethod.GET)
public Customer customerDetail(@PathVariable String cId) {
    return getCustomer(cId);
}

题:

是否有一种"简单"的方法来取消AngularJS中的($q- /$http- )承诺或确定承诺得到解决的顺序？

例

我有一个长时间运行的计算,我通过请求结果$http.某些操作或事件要求我在$http解决初始承诺之前重新开始计算(从而发送新请求).因此,我想我不能使用像这样的简单实现

$http.post().then(function(){
    //apply data to view
})

因为我无法确保响应按照我发送请求的顺序返回 - 毕竟我想在所有承诺得到妥善解决时显示最新计算的结果.

但是我想避免等待第一个响应,直到我发送这样的新请求:

const timeExpensiveCalculation = function(){
    return $http.post().then(function(response){
        if (isNewCalculationChained) {return timeExpensiveCalculation();}            
        else {return response.data;}
    })
}

思考:

使用时,$http我可以访问响应上的config-object,使用一些时间戳或其他标识符来手动排序传入的响应.但是我希望我能以某种方式告诉角度取消过时的承诺,因此在解决时不会运行.then()函数.

如果没有$q-promises的手动实现,这不起作用$http.

也许只是拒绝承诺就是要走的路？但在这两种情况下,它可能需要永远,直到最终在生成下一个请求之前解决了一个promise(在此期间导致一个空视图).

是否存在一些我缺少的角度API函数,或者是否存在强大的设计模式或带有promise链接的"技巧"或$ q.all来处理返回"相同"数据的多个promise？

显然我还不明白async/await,以下基本的例子已经引起了一些麻烦:

出于测试目的,我创建了一个代表我的UI的窗口,我想要启动一个异步方法,该方法在窗口打开时在后台运行.我Listview在我的窗口添加了一个来测试UI是否响应.

当我执行以下代码时,发生了两件我不理解的事情:

1. 我ListView展示了CustomObjects我在构造函数中定义的内容.因为我无法在构造函数中使用await关键字,所以我期望调用GetWebResponseAsync().ConfigureAwait(false)会阻塞我的UI-Thread并产生死锁(就像用GetWebResponseAsync().Wait()正在进行的替换调用一样).似乎ConfigureAwait(false)已经让我的方法在另一个线程上运行,即使我没有将它作为任务运行或等待它？
2. UI显示,但在Async方法运行时冻结.这实际上并不意外,但如果我考虑先前的观察结果,当我执行我的异步方法时,Listview显然可以从代码中访问,这会让我感到困惑.这是不是意味着我的UI-Thread没有被阻止,因此我应该能够与UI进行交互？

由于我被困在这里,我还想知道如何在构造函数中正确调用我的异步方法.如果我使用await GetWebResponseAsync().ConfigureAwait(false);它不编译,因为我的构造函数没有async关键字.但是我现在知道我不应该使用async void(即使我尝试使我的构造函数成为一个async void方法,它也不会编译因为member names can not be the same as their enclosing type).

public partial class TitleWindow : Window
{
    public TitleWindow()
    {
        InitializeComponent();

        // I can not use this because the constructor is not async.
        //Task tempTask = await GetWebResponseAsync().ConfigureAwait(false);

        GetWebResponseAsync().ConfigureAwait(false);

        //This should in theory test if …

在（Android）应用中，在用户与界面交互时加载和构建ListView是很常见的。但是，在Winforms中，趋势似乎是单击按钮并等待结果完全加载，然后用户才能继续浏览应用程序。

由于我当前正在使用的数据库访问速度很慢，因此我想在异步方法中使用数据库，以使用户能够在数据未完全加载和显示的同时继续与接口进行交互。

例如，我想在我的Form_Load事件中启动一个异步方法以保持收集数据。此方法完成后，我想将数据绑定到某些控件-暂时不会更改任何功能。因此，我希望用户在处理应用程序时不要注意到任何区别（除了显示的数据与否）。

我应该在哪里放置await关键字来完成此操作？我无法将其放在Load事件中，因为这需要完成，应用程序才能“正常”运行。

甚至有可能使用异步方法使Windows窗体完全反作用而并非所有方法都完成，或者我是否出于自己的目的考虑“错误”功能？

先感谢您。

编辑：按照Srirams提示，我使load-event本身成为一个异步子程序，效果很好。这是一些简单的示例代码，显示了所需的行为：

Public Class DelayedLoadingWindow

    Private Async Sub DelayedLoadingWindow_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        Dim awaitedResultOne As Task(Of String) = GetDataOneAsync()
        Label1.Text = Await awaitedResultOne
        Dim awaitedResultTwo As Task(Of String) = GetDataTwoAsync()
        Label2.Text = Await GetDataTwoAsync()
        Dim awaitedResultThree As Task(Of String) = GetDataThreeAsync()
        Label3.Text = Await GetDataThreeAsync()
        Me.Text = "DONE"
    End Sub

    Public Async Function GetDataOneAsync() As Task(Of String)
        Await Task.Delay(2000)
        Return "Async Methods"
    End Function

    Public Async Function GetDataTwoAsync() As Task(Of String) …