ホームページ >ウェブフロントエンド >jsチュートリアル >EmberとEmber CLIを始めましょう

EmberとEmber CLIを始めましょう

William Shakespeareオリジナル: 2025-02-19 11:56:10747ブラウズ

Getting started with Ember and Ember CLI

コアポイント

Ember CLIは、Ember向けに構築されたコマンドラインツールであり、ジェネレーター、コンプレッサー、CSSプリプロセッサコンパイラ、自動リロード、ES6モジュールローダーなどのさまざまな機能を組み合わせています。新しいエンバープロジェクトを設定するために、GruntやGulpなどのツールの代替品として使用できます。
Emberは、コンベンションが構成よりも優れているという概念に従います。つまり、開発プロセスを簡素化する多くのデフォルト設定があります。重要な要素には、ルーティング、コントローラー、テンプレート、コンポーネント、およびエンバーデータが含まれます。
このチュートリアルは、Ember CLIを使用してシンプルな連絡先マネージャーアプリケーションを構築する方法に関する段階的なガイドを提供します。新しいEmberプロジェクトの作成、固定データの設定、ユーザーモデルの生成とルーティング、ユーザーテンプレートの作成、表示および編集の追加機能をカバーしています。
Emberは、大規模なWebアプリケーションを構築するための強力なJavaScriptフレームワークです。 Ember CLIを使用すると、依存関係の管理、タスクの自動化、ベストプラクティスの実行を容易にする標準化された開発環境を提供します。

エンバーは長年にわたって多くの変更を受けてきました。最大の変更は、Ember用に構築されたコマンドラインツールであるEmber CLIの導入です。発電機、コンプレッサー、CSSプリプロセッサコンパイラ、自動リロード、ES6モジュールローダーなどのさまざまな機能を組み合わせています。このコマンドラインツールは、GruntやGulpなどのツールのセットアップに費やす時間を短縮するのに役立ちます。これは間違いなく、新しいEmberプロジェクトのこれらのツールに代わる良い選択肢です。この記事では、Ember CLIを使用してSimple Contact Managerアプリケーションを構築する方法を学びます。このチュートリアルは、Ember CLIに付属していないため、SitePointに投稿したEmberに関する他の記事とはわずかに異なります。ただし、これらの概念のほとんどは引き続き適用されるため、チェックアウトして学習を続けることをお勧めします。この記事の完全なコードは、GitHubで見つけることができます。

Ember Cli Ember CLIをインストールするには、最初にいくつかの依存関係をインストールする必要があります。最初のものはnode.jsです。少なくともバージョン0.12.xが必要です。次に、Bowerをインストールする必要があります。これは、次のコマンドを実行することで実行できます。

次に、Ember CLIをインストールするには、次のコマンドを実行します。

<code class="language-bash">npm install -g bower</code>

新しいEmberプロジェクトを作成する方法

素晴らしい操作を開始する前に、ContactManagerと呼ばれる新しいプロジェクトフォルダーを作成するには、端末を開き、次のコマンドを実行する必要があります：

<code class="language-bash">npm install -g ember-cli</code>

2番目のステップ、ディレクトリに移動して、次のコマンドを使用してすべてのNPMとBowerの依存関係をインストールします。

この時点で、次のコマンドを実行して、内蔵エンバーサーバーを開始します。

URL LocalHost：4200で新しいアプリケーションにアクセスできるようになりました。これは、ローカルコンピューターで実行されているEmberアプリケーションのデフォルトポートですが、好きなように変更できます。指示されたすべての手順に従うと、ブラウザに「Emberへようこそ」と書かれたタイトルが表示されるようになりました。

<code class="language-bash">ember new contactmanager</code>

エンバーの慣習と構造

アプリケーションに飛び込む前に、エンバーの慣習のいくつかをレビューしましょう。

ルーターとルーター

ルーティングは、Emberアプリケーションのエントリポイントです。ルーターの定義は、App/router.jsファイルで使用されます。アプリケーションのさまざまな部分にアクセスできます。たとえば、アプリケーションでユーザーを管理する必要があると判断した場合は、ユーザールートを定義する必要があります。これは、次の構文を使用して行うことができます

<code class="language-bash">npm install -g bower</code>

これにより、次のURLが作成されます

/users/

/users/index/
/users/loading/

コントローラー

コントローラーは、アプリ/コントローラーフォルダーにあるView Stateを保存するために使用されるタイプです。彼らはルーティングと組み合わせて動作します。この場合、上記のURLは /user /に対応し、 /users /users /。また、ここでは、自分で定義するかどうかを自由に選択できます。コントローラーは、ビュー操作（クリック、ホーバーなど）のイベントハンドラーも定義します。

テンプレート

テンプレートはEmberの表現部分です。純粋なHTMLにコンパイルするハンドルバーと呼ばれるテンプレート言語で書きます。テンプレートは、アプリ/テンプレートフォルダーにあります。

コンポーネント

コンポーネントは、小さな自己完結型の機能ブロックです。それらを表現と特徴の組み合わせと考えることができますが、それらは再利用可能で、メンテナンスが簡単です。

ember-data

これは、Ember Coreを補完し、データモデルを管理するためのフロントエンドORMとして機能するEmber Coreチームが維持するライブラリです。 Ember-Dataを使用するため、私がこれまで使用したことがなく、この記事の範囲外である他の選択肢があります。

app

私たちが構築する連絡先管理アプリケーションには、ユーザーのリストとその利用可能な連絡先情報が含まれます。アプリケーションを使用すると、ユーザーを作成、編集、削除、表示できます。アプリケーションを簡潔かつ明確にするために、Ember CLIに付属の固定アダプターを使用します。これは、ページが更新されたときにデータが持続しないことを除いて、バックエンドとして機能します。まず、作成していない場合は、Ember New ContactManagerを使用して新しいEmberプロジェクトを作成します。

ユーザーモデルを生成

プロジェクトフォルダーに移動し、次のコマンドを使用してユーザーモデルを生成します。

これにより、アプリ/モデルでuser.jsという名前のファイルが作成され、次のコンテンツがあります。

<code class="language-bash">npm install -g bower</code>

エクスポートステートメントが次のようになるように必要な変更を加えてください。

<code class="language-bash">npm install -g ember-cli</code>

これは、ユーザーモデルが持つプロパティを定義します。

ユーザールートを生成します

さあ、次の行をrouter.jsファイルに追加して、利用可能なURLをいくつか提供します。

3つの新しいURLがあります。 1つはユーザーをリストすること、もう1つは個々のユーザーを表示することであり、最後はユーザー情報を編集することです。次に、次のコマンドを使用してユーザールートを作成しましょう。

<code class="language-bash">ember new contactmanager</code>

このルートは、ユーザーリストを取得するために使用されます。次のコードスニペットを使用してコンテンツを変更します：

<code class="language-bash">cd contactmanager
npm install
bower install</code>

固定データを設定して、ユーザーテンプレートを生成

この時点で、アプリケーションに一時的なデータを追加しましょう。これを行うには、次のコマンドを実行します

<code class="language-bash">ember serve</code>

これにより、アプリ/アダプター/フォルダーにapplication.jsという名前のファイルが生成されます。デフォルトでは、EmberはRestadapterを使用してモデルを照会します。このアダプターは、EmberクライアントアプリケーションにJSONデータを提供するバックエンドシステムがあることを前提としています。バックエンドはないので、この場合、代わりに固定データを使用する必要があります。したがって、次のようにアダプターコードを更新します。

>次をユーザーモデルに追加して、いくつかのフィクスチャーを作成します。

<code class="language-javascript">Router.map(function() {
  this.resource('users', function() {});
});</code>

url localhost：4200/usersに移動すると、古い挨拶メッセージのみが表示され、追加したユーザーのピン留めデータは表示されません。ユーザーデータを表示するには、次のコマンドを使用してユーザーのテンプレートを作成する必要があります。

<code class="language-bash">ember generate model user</code>

これにより、アプリ/テンプレート/フォルダーにusers.hbsという名前のファイルが作成されます。このファイルを開き、次のようにその内容を更新します。

ユーザーのリストが表示されます。それぞれの編集テキストが隣にあります。固定データには1人のユーザーのみがいるため、1人のユーザーのみが表示されます。必要に応じて、ユーザーオブジェクトをユーザーフィクスチャに追加できます。各オブジェクトに一意のIDがあることを確認してください。

<code class="language-javascript">import DS from 'ember-data';

export default DS.Model.extend({
});</code>

個々のユーザーを表示

<code class="language-javascript">export default DS.Model.extend({
  firstName: DS.attr(),
  lastName: DS.attr(),
  addressLine: DS.attr(),
  postCode: DS.attr(),
  country: DS.attr()
});</code>

ユーザーをリストしたので、ユーザーの完全な情報を表示する方法を見てみましょう。初め。リンクを使用して各ユーザー名の横にある「編集」テキストを囲むことにより、ユーザーテンプレートのコードを変更します。次に、「編集」を次のように変更します

次に、次のコマンドを使用してユーザーコントローラーを生成しましょう。

<code class="language-javascript">Router.map(function() {
  this.resource('users', function() {
    this.route('show',{path: '/:user_id'});
    this.route('edit',{path: '/:user_id/edit'});
  });
});</code>

内部（ユーザーコントローラー）、コンテンツを次のように変更します。

終了後、次のコマンドを使用して、ユーザーを編集するためのテンプレートを生成します。

現在、作成されたテンプレート（App/Templates/Users/show.hbs）は空です。それを開いて、次のコードを追加します：

<code class="language-bash">ember generate route users</code>

これを行うと、クリックする各ユーザーの完全な情報を見ることができるはずです。

シングルユーザーの編集

単一のユーザーを編集する場合は、簡単な手順に従う必要があります。まず、リンクを使用して各ユーザー名の横にある「編集」テキストを囲むことにより、ユーザー編集ルートへのリンク。次に、「編集」を次のように変更します

<code class="language-bash">npm install -g bower</code>

次に、次のコマンドを使用してユーザーコントローラーを生成しましょう。

内部（ユーザーコントローラー）、コンテンツを次のように変更します。

<code class="language-bash">npm install -g ember-cli</code>

終了後、次のコマンドを使用して、ユーザーを編集するためのテンプレートを生成します。

<code class="language-bash">ember new contactmanager</code>

新しいテンプレートアプリ/テンプレート/ユーザー/編集で、次のコードを貼り付けます。

このコードは、フォームを送信するときにコントローラーのSaveUSER（）関数を呼び出します。この関数は、編集中のユーザーに合格し、変更された情報を保存します。この変更を使用すると、ユーザーの編集リンクをクリックすると、ユーザーの詳細を編集できます。 [保存]ボタンをクリックすると、それらを保存できます。その後、ユーザーリストにリダイレクトされます。ロングライブ！これで、簡単な連絡先リストマネージャーができました。ページがリフレッシュされたときにデータを持続するために、実際のバックエンドに接続することにより、完全なアプリケーションに変換できます。また、不要なユーザーをいつでも削除できるように、アプリに削除機能を追加することもお勧めします。

<code class="language-bash">cd contactmanager
npm install
bower install</code>

結論

ember

<code class="language-bash">ember serve</code>

https://www.php.cn/link/0e0f9e664029e8912996d65c1cf09761

は、大規模なWebアプリケーションを構築するためのフレームワークです。コンベンションは構成よりも優れているという考えがあります。つまり、いくつかの一般的な決定に基づいており、開発プロセスを容易にする多くのデフォルト（規則）があります。これにより、開発プロセス中に多くの些細な決定を下す必要はありません。このチュートリアルを読んで、プロジェクトでこのような強力でシンプルなJavaScriptフレームワークをどのように使用するかについての新しいことを学んでいただければ幸いです。以下のコメントであなたの考えを教えてください。 GitHubでアプリケーションのコードを見つけることができます。

EmberとEmber Cliの始めることについてのよくある質問エンバーとエンバーCLIの違いは何ですか？ Emberは、Webアプリケーションを構築するためのJavaScriptフレームワークであり、Ember CLIは、Emberアプリケーションの作成、開発、構築に役立つコマンドラインツールです。 Ember CLIは、依存関係の管理、タスクの自動化、ベストプラクティスの実行を容易にする標準化された開発環境を提供します。

Ember CLIをインストールする方法は？ Ember CLIをインストールするには、システムにnode.jsとnpmをインストールする必要があります。これらの前提条件をインストールした後、端末に次のコマンドを使用してEmber CLIをインストールできます：

。

「サーブコマンドを使用するには、Ember CLIプロジェクトの中にいる必要があります」というエラーメッセージが表示されます。これはどういう意味ですか？

このエラーは、Ember CLIプロジェクトディレクトリの外側で

コマンドを実行しようとすると発生します。この問題を解決するには、

コマンドを使用してプロジェクトのルートディレクトリに移動してから

を実行します。

コマンドを使用して、アプリケーションの名前を使用して、新しいEmberアプリケーションを作成できます。たとえば、ember newは「My-App」と呼ばれる新しいEmberアプリケーションを作成します。 ember new my-app

どのような基本的なEmber CLIコマンドを知っておくべきですか？

知っておくべきいくつかの基本的なEmber CLIコマンドには、

（新しいアプリケーションの作成）、ember new（開発サーバーを開始）、ember serve（新しいファイルを生成）、ember generate（アプリケーションの構築展開のためのプログラム）。 ember build

コマンドを使用して、オプションを「生産」に設定して、生産のアプリケーションを構築できます。コマンドは次のようになります：
。 `ember build` `--environment` Ember CLIを使用してEmberアプリケーションで新しいファイルを生成する方法は？ `ember build --environment production`
コマンドを使用して、ファイルタイプとその名前を使用して、Emberアプリケーションで新しいファイルを生成できます。たとえば、
は「About」という新しいルートを生成します。
`ember generateember generate route about`コマンドを使用して開発サーバーを起動できます。これにより、サーバーが起動し、http：// localhost：4200でアプリケーションにアクセスできます。

エンバーCLIを更新する方法は？

コマンドを使用して古いバージョンをアンインストールしてから、コマンドember serveを使用して新しいバージョンをインストールしてEmber CLIを更新できます。

ember-cliファイルの目的は何ですか？

npm uninstall -g ember-cliファイルは、Ember CLIの構成ファイルです。 Ember CLIプロジェクトの動作をカスタマイズできます。たとえば、開発サーバーのデフォルトポートを指定し、特定の機能を有効または無効にするなどします。 npm install -g ember-cli

以上がEmberとEmber CLIを始めましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript json css gulp html es6 npm 预处理器 JS 对象事件 github http 自动化 router

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：AngularJSでフォームベースのディレクティブを作成する方法次の記事：AngularJSでフォームベースのディレクティブを作成する方法

続きを見る