3

在发布 Angular CLI 之后，我决定使用 Angular CLI，但从一开始就导致了一些尚未清除的混乱，所以希望这里的某个地方帮助我：-

  1. 在index.html我发现了一些惊人的角度插值语法，这些在我们的应用程序中的作用是什么？

语法如 -

{{#unless environment.production}}
{{/unless}}
{{#each scripts.polyfills}}
<script src="{{.}}"></script>{{/each}}

what does `/` this mean in {{/unless}}
and here `#` in the {{#each ...}} ??

  1. 当我运行命令时ng g component demo，它以完美的方式创建组件，但是在创建找到一个index.ts为每个组件命名的文件之后，index.ts这里的作用是什么？

  2. 在 CLI 之前，我使用gulp任务来执行编译（*.ts 到 *.js），在 CLI 中如何以及在何处执行这些操作？

  3. 文件的作用是angular-cli.json什么？

任何帮助都会得到帮助，谢谢。

4

2 回答 2

1
  1. 此命令将重要的脚本导入（例如 SystemJS）添加到最终“编译”的 index.html（您将在 dist 文件夹中看到）
  2. 该文件是为了让 src/system-config.ts 可以轻松访问您生成的 TS 文件而创建的，而无需知道它的名称。当您查看生成的 index.ts 时，它只是对实际类名的引用。
  3. 构建由 NPM 处理，查看 package.json > scripts-section ( https://docs.npmjs.com/misc/scripts )
  4. angular-cli.json 为 angular-cli 提供元数据。通常你不必在那里改变任何东西

有用的资源：

请注意，cli-Tool 仍处于测试阶段，因此请仔细查看 github 上的未解决问题

于 2016-06-02T11:03:52.910 回答
1

Angular CLI 本身就是一个相当大的项目，正如他们的仓库所述：

项目仍在进行中

Angular CLI 本身基于Ember CLI——一个用于引导项目、处理和构建资源的多功能工具。有关更多信息，请查看 ember cli 文档或查看AngularJS youtube 频道上的一些会话

但要回答你的一些问题：

  1. 在 index.html 中，我发现了一些惊人的 angular 插值语法，这些在我们的应用程序中的作用是什么？

您看到的不是 Angular 插值，而是由 ng cli broccoli 插件处理的车把条件块。在这种情况下，它确保仅当我们没有在生产模式下运行我们的应用程序时才添加实时重新加载脚本。您的应用程序的入口文件index.html将由编译器处理，进而调用 ember/angular cli 注册的任何插件。其中之一将调用 Handlebars 编译器 - 如果您想向模板添加一些逻辑，这很有用。例如，您可以在页脚中显示舞台，如下所示：

<footer>
  {{#if environment.production}}
    <span>We are in production</span>
  {{/if}}
  {{#unless environment.production}}
    <span>We are in development</span>
  {{/unless}}
</footer>
  1. index.ts 在这里的作用是什么？

这类似于在文件夹中有 index.html - 它是该文件夹的默认入口点。在我们的例子中，我们将它用于模块解析。如果我们想在其他地方使用我们的任何组件，我们需要将它们导出。在导入文件中，我们必须明确要求/导入它们。现在，如果您在一个文件夹中有许多组件，并且您想将它们全部导入，那么您的导入语句将很快失控。所以我们可以在一个里面提到我们文件夹的所有导出组件，index.ts这样导入组件就可以做import {Comp1, Comp2, Comp3} from './app'而不是

import { Comp1 } from './app/comp1';
import { Comp2 } from './app/comp2';
import { Comp3 } from './app/comp3';

注意import {*} from './app'和import {*} from './app/index'是等价的。

  1. ...编译（*.ts 到 *.js），在 CLI 中如何以及在何处执行这些操作？

这是由 angular cli 使用的broccoli builder 执行的。它本质上将处理特定资源的不同插件链接在一起，例如 typescript 插件将处理所有命名的文件*.ts，而这些文件*.js又可以由另一个插件处理，例如缩小它们。如果您正在使用ng serve，则每次资源更改时都会进行编译。

  1. angular-cli.json 文件的作用是什么？

它存储了 Angular cli 本身的配置——你的应用程序的名称是什么，你的源代码在哪里，如何命名你的惰性模块等。在大多数情况下，你不需要手动修改它。

目前，Angular cli 文档在许多主题上都相当不稳定，尤其是在工具本身的架构上。存在大量依赖项，并且随着 angular2 仍在发展，一些集成无法按预期工作（例如新路由器......）。如果您真的不需要生成器，您可以探索其他选项，因为 github 上有许多可用的入门包（angular webpack、angular gulp 等）

祝你好运，黑客攻击愉快。

于 2016-07-31T10:54:24.473 回答