コードをプレビューしてアプリを生成する

    アプリ コードのプレビューと生成


    生成されたコードをプレビューし、Angular アプリとして作業をダウンロードすることは、1 つのアプリケーションをデザインした後の最後のステップです。すべてのスタイリングおよびレイアウト プロパティを使用してアプリケーションが生成されると、デザインおよび開発のユーザー ストーリーが完成します。

    コードをプレビューする

    プレビュー モードでは、実行中のアプリであるかのようにデザインを操作できます。たとえば、Viewport のサイズを変更して、コンポーネントの配置がどのように動作するかを確認できます。しかし、開発者に提供する真の価値は、生成されようとしているアプリ コードをプレビューすることです。これを確認するには、[コード ビュー] をオンに切り替えて、デザインと並べて表示します。読み取り専用モードですが、生成されたコードの品質を確認するのに役立ちます。

    プレビュー モードでコードを表示する

    コード ビューでは、HTML、CSS、および TS を個別に表示できます。また、これにより、マークアップと CSS を記述してピクセル パーフェクトなものを作成する手間が省けるため、時間を節約できます。生成されたコードは、実際の開発者コンポーネント (この場合は Ignite UI for Angular) を使用するため、バックアップするための包括的な開発者向けドキュメントがあることを確認できます。 さらに、開発者がビジュアル資産を検査してビジュアル仕様を抽出する必要があるハンドオフをスキップしています。これには通常、デザイナーと開発者の間で多くのコミュニケーションが必要であり、1 つのデザインを複数回研磨する必要があります。

    プレビュー モードで HTML、CSS、Typescript ファイルを表示する

    アプリを実行する

    最終的にアプリを開発するために、コードを貼り付ける必要はありません。代わりに、ツールバーの [アプリの生成] ボタンを使用してください。これにより、ダウンロード可能な Angular アプリケーションを含むパッケージがすばやく作成されます。このアプリを実行するには、Visual Studio Code のような IDE でフォルダーを開きます。

    • Node.js がインストールされていることを確認してください。
    • 次に、コンソールで npm install と入力して依存関係をインストールします。 インストールには時間がかかりますが、これは製品の管理する部分ではありません。
    • それが完了したら、npm start と入力して、アプリをコンパイルして起動します。

    VS Code で実行されるアプリケーション

    エディターでプロ級のコンポーネントを使用して視覚的にデザインを作成し、IDE で自由に拡張できる Angular アプリを生成できることで、両方の長所を提供します。最終的に、デザインしたものが、アプリの構築時の外観とまったく同じであることが保証されます。フィードバック ボタンを使用してフィードバックをお気軽にお知らせください。今後数か月の次のリリース マイルストーンに向けて、お客様の経験と、お客様にとって価値のある機能についてお聞かせください。