Question

在发布角度CLI之后，我决定使用角度CLI，但从一开始就如此导致一些未被清除的混乱，所以希望在这里帮助我： -

在index.html我找到了一些神奇的插值语法角色，这些在我们的应用中是什么角色？

语法如 -

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

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

当我运行命令ng g component demo时，它以完整的方式创建组件，但在创建找到一个文件之后每个组件的名称为index.ts，index.ts的角色是什么？
在CLI之前，我使用gulp任务来执行编译（* .ts到* .js），在CLI中如何以及在何处执行这些操作？
了angular-cli.json档案的作用是什么？

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

Answer 1

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

有用的资源：

https://github.com/angular/angular-cli
Slack-Channel：http://www.angularbuddies.com/
关于Angular-CLI的播客：https://devchat.tv/adv-in-angular/089-aia-angular-cli-with-ciro-nunes

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

Answer 2

Angular CLI本身就是一个相当大的项目，并且它们的回购说明如下：

项目仍然是一项正在进行中的工作

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

但要回答你的一些问题：

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

你看到的不是角度插值，而是由ng cli broccoli插件处理的handlebars conditional block。在这种情况下，它确保仅在我们未在生产模式下运行我们的应用程序时才添加实时重新加载脚本。您的应用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>

这里有index.ts的作用吗？

这类似于在文件夹中包含index.html - 它是该文件夹的默认入口点。在我们的例子中，我们将其用于模块解析。如果我们想在其他地方使用我们的任何组件，我们需要导出它们。在导入文件中，我们必须明确要求/导入它们。现在，如果文件夹中有许多组件，并且您想要全部导入它们，那么您的import语句很快就会失控。因此，我们可以在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'是等效的。

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

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

是什么角色-cli.json文件？

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

目前，角度cli文档在许多主题上都相当薄弱，特别是在工具本身的架构上。存在大量依赖关系，并且随着angular2的发展，某些集成无法按预期工作（例如，新的路由器......）。如果你真的不需要发电机，你可以探索其他选项，因为github上有很多初学者包（有角度的webpack，有角度的gulp等）

祝你好运＆amp;快乐的黑客攻击。

Angular2 CLI工作

2 个答案: