标签: single-page-application

我尝试开始使用MVC SPA应用程序,我在BundleConfig中注意到以下内容:

 ScriptBundle("~/scripts/jquery-{version}.js")

这是怎么回事？什么是{version}以及它取自何处？

哪里可以找到更多信息,B​​undleConfig如何工作以及如何定制它？

谢谢

对Durandal js和html文件进行版本控制的好策略是什么？

我注意到,在开发过程中,必须禁用浏览器缓存,以便在每次刷新时接收最新文件.这是开发过程中必须的.

但是,我担心的是,当我使用我的持续部署策略(每天多次部署)进行生产时,用户的浏览器将缓存我的应用程序的旧版本,这可能会导致不可预测的行为.

想到的方法是以某种方式对js和html url进行版本化,以便在每个请求中嵌入版本号.但我不确定如何在Durandal框架内部进行这项工作.

我正在构建单页面应用程序,我想知道用户的身份.我们的内联网中有Active Directory,但我对此并不了解.我可以使用这样的代码来验证用户名和密码.

using(PrincipalContext pc = new PrincipalContext(ContextType.Domain, "YOURDOMAIN"))
{
  bool isValid = pc.ValidateCredentials("myuser", "mypassword");
}

事实上,这就是我从Active Directory方面需要的一切.所以我可以使用此代码创建一些AuthorizationFilter,但这意味着用户名和密码必须在每个请求中.我只想发送一次用户名和密码,然后使用一些令牌进行授权.所以在我的服务器端应用程序中应该有一些令牌提供程序.

我从头开始构建这个应用程序,所以我可以使用最新的.net技术.我发现有一些Owin中间件正在处理令牌,cookie和OAuth.这有什么可以帮助我吗？

关于从Grails(REST-API,AngularJS,MongoDB,Tomcat,Spock,几个插件的部分)到Node.js + Angular.js的迁移,我有几个(软件)架构问题.我可能要解释Grails项目拳头的结构,所以我们在这里:

有一个主要的Grails应用程序(旁边的几个其他应用程序),它建立在几个插件上.这些插件中的每一个都能够自行执行 - 这意味着它有自己的UI,单独的模板,服务,控制器,路由,测试等.它也托管在不同的存储库中.这是由Grails插件机制完成的.其好处是减少了测试工作量,减少了编译时间,模块化,单一职责等等.

但是,编译和测试的时间太贵了.此外,我不喜欢API提供部分模板/视图的事实.我想让后端API"只是作为后端API"和前端"只是作为前端".因此,每个AngularJS应用程序/插件都将提供自己的视图,路由,服务等.但它们也可能依赖于其他插件.

所以我想要实现的目标如下:

• 一个主要的AngularJS应用程序,包括几个插件(一个插件可以是类似报表生成器,留言簿或任何东西,说到应用程序的单个独立部分,具有特定路径,或只是页面的一小部分) ).
• 每个插件必须是一个独立的AngularJS应用程序(可能在开发期间通过grunt等执行).因此,UI开发人员不需要启动整个后端应用程序,因此我们可以仅使用JavaScript运行功能测试
• 仅通过REST进行通信,前端必须从API检索所有数据
• 每个插件必须可以单独测试
• 插件可能需要其他插件才能工作
• 主要的index.html(和app.js？)可能由Nginx服务器提供,该服务器与后端的其余部分(API)分离

虽然我脑子里有一张特定的图片,但我正在努力设置这个架构.

在Grails中,插件机制以某种方式将插件依赖设置(如URL映射,依赖关系等)合并到包含/注入它们的主应用程序中 - 这也是我想用AngularJS实现的.所以:

• AngularJS是否有某种相同的机制？
• 如何将每个插件的路由提供/合并到主应用程序中？
• 如何声明应用程序和插件依赖项？
• 哪些工具可能对构建过程有用？
• 如何建立插件资源(css/less文件,视图,服务等)的延迟检索？
• 阻止应用程序在启动时提供插件的所有资源(我想在启动时需要路由)

因为这不仅仅是一个怎么做这个或那个问题,如果我错过了重要的部分,或者某些部分不够清楚,我会原谅自己.请问我,我将深入回答每个问题.

我正在研究我的AngularUI项目教程.我阅读了有关状态,嵌套状态和抽象状态的所有内容.问题是我无法理解为什么以及何时应该使用抽象状态？  

我一直在评估许多SPA框架.我坚持以下两个,无法决定我应该使用哪一个项目:

1. Angular 2
2. 奥里利亚

这两个框架都承诺进行大量的操作.我非常为角度2感到兴奋,因为它得到了Google的支持,并且已被许多大公司采用.所以我做了一些比较我自己(手指交叉)的借口给Angular粉丝;).我也是粉丝,但.....

这是我做的:

Angular 2

1. 从https://github.com/angular/quickstart/archive/master.zip下载QuickStart
2. 按照快速启动和运行应用程序的指示,到目前为止一切顺利
3. 现在来看看chrome Developer工具中的Network选项卡.哇,我看到至少36个http请求和这个简单应用程序的总大小约为1.4MB缩小.
4. 谷歌搜索了一下,发现我们可以通过遵循AOT,treeshaking,gzip等很多其他方法来减小大小并最小化直到50k和http请求到10.很公平.
5. 最后比较编码风格:为了只显示Hello Angular,我们需要创建main.ts,app.module.ts,app.component.ts.每个文件必须包含@Component()装饰器,因此几乎需要在每个模块上导入角度核心.然后将该组件导入module.ts,然后引导main.ts.

奥里利亚

1. 从http://aurelia.io/downloads/basic-aurelia-project.zip下载
2. 按照快速启动的说明进行操作.
3. 添加了两个带有hello world的app.ts和main.ts文件.
4. 到目前为止运行它运行的应用程序非常好.
5. 检查开发人员工具中的网络选项卡,它显示0.9MB并发出9个http请求.
6. 按照相同的步骤使用gzip和捆绑最小化大小后,它会产生大约170kb的5个http请求.

最后比较了两种框架的编码风格.显然,Aurelia有一个易于理解的清晰代码.

我在Aurelia看到的唯一的缺点是它是一个相当新的,几乎不为许多JS开发人员所知,并且到目前为止社区也很差.

我将它们视为Microsoft Windows(Angular 2)和Apple(Aurelia).另一方面,Apple更稳定并且具有特定范围的用户Microsoft Windows几乎每个地方都有.

我该怎么办？请帮忙.

谢谢

Microsoft提供了一个很棒的模板,用于在ASP.NET Core中开发Angular(而不是AngularJS),如他们的文章" 使用JavaScriptServices在ASP.NET Core上构建单页应用程序 "中所述.

虽然它非常简单,但模板中有一部分让我措手不及:而不是仅仅存在一个app.module.ts文件,它既有一个app.module.client.ts也有一个app.module.server.ts.

有人可以用外行的术语向我解释 FormControl 提供什么功能，以及为什么/如何使用它？

我在 React 中使用 Material-UI，我看到的许多表单示例都使用了 FormControl，但我很难理解它的作用，以及我的项目是否有必要。

现在我只有一个名为 Form.js 的组件，我将所有表单元素包含在一个 div 中，如下所示：

return (
<div>
  <FormControl className={classes.formControl}>
    <InputLabel htmlFor="select-multiple-accounts">Account</InputLabel>
    <Select
      multiple
      value={accountName}
      onChange={handleAccountChange}
      input={<Input id="select-multiple-accounts" />}
      renderValue={
        selected => (
        <div className={classes.chips}>
          {
            selected.map(value => (
            <Chip key={value} label={value} className={classes.chip} />
          ))}
        </div>
      )}
      MenuProps={MenuProps}
    >
      {accountNames.map(name => (
        <MenuItem key={name.label} value={name.label} style={getStyles(name.label, accountName, theme)}>
          {name.label}
        </MenuItem>
      ))}
    </Select>
  </FormControl>
  <br /><br />
  <TextField
    id="job-number"
    label="Job #"
    className={classes.textField}
    value={props.jobNumber}
    onChange={handleJobNumberChange}
    fullWidth
  />
  <br /><br /><br />
  <TextField
    id="project-description"
    label="Project …

我们有一个使用Knockout和Backbone构建的单页面应用程序,它使Ajax调用服务器并执行一些复杂的数据缓存和DOM渲染.我们非常想测量用户看到的性能(并将其记录回服务器).我似乎无法理解浏览器Navigation Timing API是否会对此有用.从我在示例中看到的,导航时序API与之相关,window.performance并且这仅限于页面加载,不适合监视Ajax行为.对或错？如果不对,我还能使用什么？

我喜欢设置自定义检测点,在这些点之间测量时间,例如,对于使用服务器结果进行DOM渲染的Ajax调用.

试图学习ReactJS ..但令我困惑的是组件的渲染.我见过的每个例子都定义了一个React组件类,最后有类似的东西:

React.renderComponent(
  <comp attr="value"" />,
  document.getElementById('comp')
);

我知道它用我的组件替换'comp'元素..这太棒了.但似乎我加载了20个组件,所有20个渲染.但是,我只想呈现一些而不是全部,但在整个SPA中使用所有内容.我正在使用DirectorJS路由器,并且取决于用户是否登录,和/或转到某些链接,我想只显示一个或多个组件.我似乎无法找到有关如何动态管理显示或隐藏反应组件的任何信息/示例/教程.更重要的是,我真正想要做的是根据点击的链接加载部分,在那些部分中他们会使用反应组件,所以只有在那时加载/使用组件.这有可能..如此,我该如何处理？我可以在第一次加载应用程序时一次加载20多个组件,但我更愿意只在加载显示部分组件时才加载它们.