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コンポーネントごとに名前が付けられたファイルが1つ見つかりましindex.tsた。ここでの役割は何ですか?

  2. CLIの前に、gulpタスクを使用してコンパイルを実行しました（* .tsから* .jsへ）、CLIでは、これらのアクションが実行される方法と場所は??

  3. angular-cli.jsonファイルの役割は？

どんな助けでも感謝します、ありがとう。

4

2 に答える 2

1

Angular CLI は、それ自体がかなり大きなプロジェクトであり、レポに次のように記載されています。

プロジェクトはまだ進行中の作業です

Angular CLI 自体は、プロジェクトのブートストラップ、リソースの処理および構築のための多機能ツールであるEmber CLIに基づいています。詳細については、ember cli docs を参照するか、AngularJS YouTube チャンネルのいくつかのセッションをご覧ください。

しかし、あなたの質問のいくつかに答えるために：

  1. index.html で、角度の驚くべき補間構文を見つけました。アプリでのこれらの役割は何ですか?

Angular 補間ではなく、ng cli broccoli プラグインによって処理されるハンドルバーの条件付きブロックが表示されます。この場合、アプリを本番モードで実行していない場合にのみ、ライブ リロード スクリプトが追加されることが保証されます。アプリのエントリ ファイルはindex.htmlコンパイラによって処理され、ember/angular cli によって登録されたプラグインが呼び出されます。そのうちの 1 つは 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. ...compilation(*.ts to *.js) 、CLI では、これらのアクションが実行される方法と場所は?

これは、angular cli で採用されているブロッコリービルダーによって実行されます。基本的に、特定のリソースを処理するさまざまなプラグインを連鎖させます。たとえば、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 に答える
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 に答える