AngularJSデモプロジェクト:AngularJSを使用してアプリを構築する方法

公開: 2020-09-10

フルスタック開発を学習している場合は、「AngularJSプロジェクトを実行する方法」という質問に直面している必要があります。 この記事では、AngularJSを使用したアプリの構築に関する詳細なチュートリアルを共有するため、心配する必要はありません。

このプロジェクトを完了すると、AngularJSの基本とその実装に精通し、友達に見せびらかすことができる実用的なアプリを手に入れることができます。 コードとともにさまざまな開発段階の手順をリストしたので、このチュートリアルをブックマークできます。

コードを実装する前に、コードを理解する必要があることに注意してください。 そのため、コードをコピーして貼り付けることはお勧めしません。 ただし、コードのすべての行がどのように機能するかを知っている場合は、自由にコピーして貼り付けることができます。 コードがどのように機能するかを理解することで、最も効率的に学習できるようになります。

目次

AngularJSとは何ですか? 簡単な紹介

AngularJSプロジェクトについて説明する前に、まずテクノロジーについて少し説明しましょう。 AngularJSを使用すると、ユーザーはアプリケーションのHTMLを拡張できます。 これは、JavaScriptに基づくフロントエンドのWebフレームワークです。 HTMLはWebアプリの動的ビューで遅れ、Angularはその問題を解決します。

AngularJSには、ユーザーと開発者の活発なコミュニティがあり、質問をしたり、混乱を解消したりできます。 Angularは、Webページのフロントエンドを強化するためのデータバインディング、コントローラー、およびその他の多くの強力なツールをユーザーに提供します。 チュートリアルで実装するときに、プロジェクトで多くの概念を発見できます。

初心者向けのAngularJSプロジェクトの前提条件

AngularJSプロジェクトの作業を開始する前に、次の概念に精通している必要があります。

HTML

HTMLはハイパーテキストマークアップ言語の略です。 これは、Webページの構造を担当し、Web開発の最初の構成要素です。 このプロジェクトで作業を開始する前に、HTMLの構文、その要素、および実装に精通している必要があります。

CSS

CSSはCascadingStyleSheetsの略で、Webページにビジュアルを追加するための主要な言語です。 Webページの見栄えが良くなり、アクセスしやすくなるため、HTMLと同じくらい重要です。 AngularJSプロジェクトの最初の段階ではHTMLが必要ですが、後でCSSを追加する必要があります。 そのため、初心者向けのAngularJSプロジェクトに取り掛かる前に、これに精通している必要があります。

JavaScript

AngularJSはJavaScriptに基づいています。 JSの構文、コード、およびその実装に精通していると、AngularJSの多くの技術的側面も簡素化されます。 このタスクに取り掛かる前に、JSの基本を十分に理解していることを確認してください。

これらの前提条件とは別に、AngularJSの基本にも精通している必要があります。 このプロジェクトは、HTML、CSS、JS、およびAngularJSの実用的な知識があることを前提としています。 それが邪魔になったので、始めましょう。

AngularJSプロジェクトを実行する方法–チュートリアル

このチュートリアルでは、AngularJSスポーツフィードアプリを作成します。 スポーツフィードアプリは、試合やイベントの統計を表示します。 たとえば、試合のスコアカードやIPLチームのスコアテーブルを表示するアプリを作成できます。 多くのバックエンド開発を必要としないため、スポーツフィードアプリで作業することを選択しました。

HTML

まず、アプリケーションのHTMLを作成することから始めます。 これがHTMLコードのテンプレートです。

<body ng-app =” F1FeederApp” ng-controller =” driversController”>

<表>

<thead>

<tr> <th colspan =” 4″>ドライバーズチャンピオンシップの順位</ th> </ tr>

</ thead>

<tbody>

<tr ng-repeat =” drivers in driversList”>

<td> {{$ index + 1}} </ td>

<td>

<img src =” img / flags / {{driver.Driver.nationality}}。png” />

{{driver.Driver.givenName}}&nbsp; {{driver.Driver.familyName}}

</ td>

<td> {{driver.Constructors [0] .name}} </ td>

<td> {{driver.points}} </ td>

</ tr>

</ tbody>

</ table>

</ body>

{{と}}に気づいたに違いありません。 これらは式と呼ばれ、必要な値を返すための計算タスクを実行できます。 たとえば、有効な式は次のとおりです。

  • {{2 + 2}}
  • {{ 自分の名前 }}

JavaScriptのスニペットであると言えます。 ただし、高レベルのロジックを実装するために式を使用しないのが最善です。 そのためには、ディレクティブを使用する必要があります。 式は、低レベルのロジック実装にのみ適しています。 式の主なタスクは、必要なアプリケーションデータをHTMLにバインドすることです。

学ぶ:インドのHTML開発者給与:新入生と経験者向け

私たちのコードのディレクティブ

AngularJSプロジェクトでの作業中に発見する最も重要な概念の1つは、ディレクティブです。 ディレクティブは、特定の動作を個々の要素にアタッチする必要があることをAngularJSに通知するためのDOM要素上のマーカーです。 ディレクティブは、DOM要素とその子の変換、別のDOM要素への置き換えなど、さまざまなタスクを実行するようにAngularに指示できます。 強力なディレクティブのほとんどは「ng-」で始まります。「ng」はAngularを表します。

上記のコードで使用したさまざまなディレクティブとそのアプリケーションを次に示します。

ng-app

このディレクティブはアプリをブートストラップし、そのスコープを定義します。 AngularJSには複数のアプリを含めることができ、各アプリの開始点と終了点をプログラムに通知するため、これは重要なディレクティブです。

ng-コントローラー

このディレクティブは、どのコントローラーがユーザーのビューの力を持つかを定義します。 この点でdriversControllerを指定しました。これにより、アプリ内のドライバーのリスト(driversList)が提供されます。

ng-repeat

このディレクティブは、Angular開発者の間で最も一般的に使用されているものの1つです。 コレクションのループ中にテンプレートスコープを定義します。

Angularには多くのディレクティブがあり、初心者向けのAngularJSプロジェクトに取り組むにつれて、それらのアプリケーションが増えることになります。 そのため、特定のスキルを学びながら、さまざまなプロジェクトに取り組むことをお勧めします。

コントローラー

コントローラを追加しない限り、ビューを持つことは無意味です。 したがって、ここにdriversControllerを追加します。

angle.module('F1FeederApp.controllers'、[])。

controller('driversController'、function($ scope){

$ scope.driversList = [

{{

運転者: {

与えられた名前:'セバスチャン'、

familyName:'ベッテル'

}、

ポイント:322、

国籍:「ドイツ語」、

コンストラクター:[

{名前:「レッドブル」}

]

}、

{{

運転者: {

与えられた名前:'フェルナンド'、

familyName:'アロンソ'

}、

ポイント:207、

国籍:「スペイン語」、

コンストラクター:[

{名前:「フェラーリ」}

]

}

];

});

あなたが気づいたかもしれないユニークな変数は$scopeです。 この変数は、コントローラーをビューにリンクするため、パラメーターとしてコントローラーに渡します。 $ scopeは、テンプレートで使用するすべてのデータを保持し、それに追加するすべてのデータは、ビューでアクセスできるようになります。

今のところ静的データ配列を追加し、後でプロジェクトの進行に合わせて置き換えます。

まず、コントローラーをapp.jsに追加します。これは、次のようになります。

angle.module('F1FeederApp'、[

'F1FeederApp.controllers'

]);

この小さなコード行は、アプリを初期化し、アプリが依存するモジュールを登録しました。 次に、このすべての情報をindex.htmlファイルに追加する必要があります。

<!DOCTYPE html>

<html>

<頭>

<title>F-1フィーダー</title>

</ head>

<body ng-app =” F1FeederApp” ng-controller =” driversController”>

<表>

<thead>

<tr> <th colspan =” 4″>ドライバーズチャンピオンシップの順位</ th> </ tr>

</ thead>

<tbody>

<tr ng-repeat =” drivers in driversList”>

<td> {{$ index + 1}} </ td>

<td>

<img src =” img / flags / {{driver.Driver.nationality}}。png” />

{{driver.Driver.givenName}}&nbsp; {{driver.Driver.familyName}}

</ td>

<td> {{driver.Constructors [0] .name}} </ td>

<td> {{driver.points}} </ td>

</ tr>

</ tbody>

</ table>

<script src =” bower_components / angle / angle.js”> </ script>

<script src =” bower_components / angle-route / angle-route.js”> </ script>

<script src =” js / app.js”> </ script>

<script src =” js / services.js”> </ script>

<script src =” js / controllers.js”> </ script>

</ body>

</ html>

この段階で、アプリを起動できます。 ただし、アプリをデバッグする必要があることに注意してください。 AngularJSプロジェクトの実行方法を学ぶための重要なステップは、アプリのデバッグです。

サーバーからデータをロードする

次に、RESTfulサーバーからライブデータをフェッチする機能をアプリに追加します。 HTTPサーバーと通信するために、AngularjSには$httpと$resourceの2つのサービスがあります。 このコードでは、高レベルの抽象化を提供する$httpを使用します。 サーバーAPI呼び出しを抽象化するカスタムサービスを作成します。 データをフェッチし、$httpのラッパーになります。 そのため、services.jsファイルに次のコードを追加します。

angle.module('F1FeederApp.services'、[])。

factory('ergastAPIservice'、function($ http){

var ergastAPI = {};

ergastAPI.getDrivers = function(){

$ http({を返す

メソッド:'JSONP'、

url:'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'

});

}

ergastAPIを返します。

});

最初にF1FeederApp.servicesという新しいモジュールを作成し、サービスergastAPIserviceを追加しました。 $httpをパラメーターとしてサービスに渡したことに注意してください。 また、Angularにモジュールをアプリに追加するように指示します。 そのためには、app.jsのコードを次のように置き換える必要があります。

angle.module('F1FeederApp'、[

'F1FeederApp.controllers'、

'F1FeederApp.services'

]);

controller.jsを少し変更し、依存関係の形式でergastAPIserviceを追加する必要があります。そうすると、この手順は終了します。

angle.module('F1FeederApp.controllers'、[])。

controller('driversController'、function($ scope、ergastAPIservice){

$ scope.nameFilter = null;

$ scope.driversList = [];

ergastAPIservice.getDrivers()。success(function(response){

//回答者を掘り下げて関連データを取得します

$ scope.driversList = response.MRData.StandingsTable.StandingsLists [0] .DriverStandings;

});

});

コードが機能しているかどうかを確認するには、アプリケーションをリロードします。 テンプレートを変更せず、nameFilter変数のみを含めたことにお気づきでしょう。 次のセクションでは、その変数を使用します。

フィルタを適用する

これまでのところ、アプリに機能コントローラーを追加しました。 次に、テキスト検索入力バーを追加して、機能を追加します。 <body>タグの下のindex.htmlに次のコードを含めることができます。

<input type =” text” ng-model =” nameFilter” placeholder =” Search…” />

ここでは「ng-model」ディレクティブを使用しています。 テキストフィールドを「$scope.nameFilter」変数にバインドします。 ディレクティブは、変数値が入力値に従って更新されたままであることを保証します。 「ng-repeat」に、データを出力する前に「nameFilter」に存在する値で「driversList」配列をフィルタリングする必要があることを伝えましょう。

<tr ng-repeat =”driverslistのドライバー| フィルタ:nameFilter”>

ここでは、2つの異なるデータバインディングを実行しています。 まず、検索フィールドに値を入力するたびに、Angularは$scope.nameFilter変数がそれに応じて更新されることを確認します。 次に、nameFilterがng-repeatを更新するとすぐに、それに接続されている2番目のディレクティブが新しい​​値と更新を取得します。

Driver.familyNameとDriver.givenNameを使用してのみフィルタリングしたいとします。 $ scope.driversList = []の下に次のようにdriversControllerを追加する必要があります:

$ scope.searchFilter = function(driver){

varkeyword = new RegExp($ scope.nameFilter、'i');

戻り値!$ scope.nameFilter || keyword.test(driver.Driver.givenName)|| keyword.test(driver.Driver.familyName);

};

このプロセスを完了するには、ng-repeatディレクティブで行を更新するだけです。

<tr ng-repeat =”driverslistのドライバー| フィルタ:searchFilter”>

アプリをリロードして、コードが機能しているかどうかを確認できます。 アプリに検索機能が追加されました。 次に、ルートを追加します。

ルートの追加

ドライバーの詳細を表示するページを作成する必要があります。 このページでは、ユーザーがドライバーをクリックして自分のキャリア情報を表示できるようにする必要があります。 まず、app.jsファイルに$routeProviderサービスを追加します。 さまざまなアプリケーションルートを適切に処理するのに役立ちます。

次に、ドライバー情報用のルートとチャンピオンシップスコアボード用のルートを追加します。 これで、app.jsファイルは次のようになります。

angle.module('F1FeederApp'、[

'F1FeederApp.services'、

'F1FeederApp.controllers'、

'ngRoute'

])。

config(['$ routeProvider'、function($ routeProvider){

$routeProvider。

when( "/ drivers"、{templateUrl: "partials / drivers.html"、controller: "driversController"})。

when( "/ drivers /:id"、{templateUrl: "partials / driver.html"、controller: "driverController"})。

それ以外の場合({redirectTo:'/ drivers'});

}]);

このコードを追加した後、ユーザーがhttps:// domain /#driversに移動すると、driversControllerが読み込まれ、部分ビューが検索されます。 これまでこのチュートリアルを続けてきたのであれば、1つのことに気づいたに違いありません。 部分ビューは追加していません! したがって、次のステップは、同じものをアプリケーションに追加することです。

部分ビューの追加

AngularJSの優れた機能は、さまざまなルートをさまざまなビューやコントローラーにバインドできることです。 ただし、AngularJSがこのアクションを実行するには、それらの部分ビューをレンダリングできる場所を認識している必要があります。

したがって、ng-viewディレクティブを使用して、index.htmlファイルに追加します。

<!DOCTYPE html>

<html>

<頭>

<title>F-1フィーダー</title>

</ head>

<body ng-app =” F1FeederApp”>

<ng-view> </ ng-view>

<script src =” bower_components / angle / angle.js”> </ script>

<script src =” bower_components / angle-route / angle-route.js”> </ script>

<script src =” js / app.js”> </ script>

<script src =” js / services.js”> </ script>

<script src =” js / controllers.js”> </ script>

</ body>

</ html>

この実装により、アプリルートをナビゲートすると、Angularは関連するビューをロードしてレンダリングします。 <ng-view>タグを介してレンダリングする場所を決定します。 これで、partials / drivers.htmlというファイルを作成し、そこにチャンピオンシップテーブルのHTMLコードを配置するだけで済みます。 その間、ドライバー情報ルートをドライバーの名前にリンクします。

<input type =” text” ng-model =” nameFilter” placeholder =” Search…” />

<表>

<thead>

<tr> <th colspan =” 4″>ドライバーズチャンピオンシップの順位</ th> </ tr>

</ thead>

<tbody>

<tr ng-repeat =”driverslistのドライバー| フィルタ:searchFilter”>

<td> {{$ index + 1}} </ td>

<td>

<img src =” img / flags / {{driver.Driver.nationality}}。png” />

<a href=”#/drivers/{{driver.Driver.driverId}}”>

{{driver.Driver.givenName}}&nbsp; {{driver.Driver.familyName}}

</a>

</ td>

<td> {{driver.Constructors [0] .name}} </ td>

<td> {{driver.points}} </ td>

</ tr>

</ tbody>

</ table>

開発の最終段階に到達しています。 ドライバー情報ページにはデータが必要なので、それを追加します。 そのためには、services.jsに次のコードを記述する必要があります。

angle.module('F1FeederApp.services'、[])

.factory('ergastAPIservice'、function($ http){

var ergastAPI = {};

ergastAPI.getDrivers = function(){

$ http({を返す

メソッド:'JSONP'、

url:'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'

});

}

ergastAPI.getDriverDetails = function(id){

$ http({を返す

メソッド:'JSONP'、

url:'http://ergast.com/api/f1/2013/drivers/' + id +'/driverStandings.json?callback=JSON_CALLBACK'

});

}

ergastAPI.getDriverRaces = function(id){

$ http({を返す

メソッド:'JSONP'、

url:'http://ergast.com/api/f1/2013/drivers/' + id +'/results.json?callback=JSON_CALLBACK'

});

}

ergastAPIを返します。

});

次に、controllers.jsを編集します。 すべてのドライバーのIDをサービスに接続することを目的としているため、情報の取得は要求されたドライバーに固有のままです。

angle.module('F1FeederApp.controllers'、[])。

/*ドライバーコントローラー*/

controller('driversController'、function($ scope、ergastAPIservice){

$ scope.nameFilter = null;

$ scope.driversList = [];

$ scope.searchFilter = function(driver){

var re = new RegExp($ scope.nameFilter、'i');

戻り値!$ scope.nameFilter || re.test(driver.Driver.givenName)|| re.test(driver.Driver.familyName);

};

ergastAPIservice.getDrivers()。success(function(response){

//関連データを取得するために応答を掘り下げる

$ scope.driversList = response.MRData.StandingsTable.StandingsLists [0] .DriverStandings;

});

})。

/*ドライバーコントローラー*/

controller('driverController'、function($ scope、$ routeParams、ergastAPIservice){

$ scope.id = $ routeParams.id;

$ scope.races = [];

$ scope.driver = null;

ergastAPIservice.getDriverDetails($ scope.id).success(function(response){

$ scope.driver = response.MRData.StandingsTable.StandingsLists [0] .DriverStandings [0];

});

ergastAPIservice.getDriverRaces($ scope.id).success(function(response){

$ scope.races = response.MRData.RaceTable.Races;

});

});

ドライバーコントローラーに$routePramsサービスを追加したことに注意してください。 これにより、URLパラメータにアクセスできるようになり、重要なステップになります。

次に、必要なすべてのデータを追加し、残りの部分ビューに取り組むだけでよいので、partials/driver.htmlというファイルを作成します。 以下のコードでは、ng-showディレクティブを使用しています。 ディレクティブは、式がtrueの場合にのみ、アプリが必要なHTML要素を表示するようにします。 これは、条件がnullであっても、アプリがHTML要素を表示しないことを意味します。 コードは次のとおりです。

<セクションid=” main”>

<a href=”./#/drivers”><-ドライバーリストに戻る</a>

<nav id =” Secondary” class =” main-nav”>

<div class =” driver-picture”>

<div class =” avatar”>

<img ng-show =” driver” src =” img / drivers / {{driver.Driver.driverId}}。png” />

<img ng-show =” driver” src =” img / flags / {{driver.Driver.nationality}}。png” /> <br/>

{{driver.Driver.givenName}} {{driver.Driver.familyName}}

</ div>

</ div>

<div class =” driver-status”>

国:{{driver.Driver.nationality}} <br/>

チーム:{{driver.Constructors [0] .name}} <br/>

誕生:{{driver.Driver.dateOfBirth}} <br/>

<a href=”{{driver.Driver.url}}” target=”_blank”>経歴</a>

</ div>

</ nav>

<div class =” main-content”>

<table class =” result-table”>

<thead>

<tr> <th colspan =” 5″> Formula12013の結果</th></ tr>

</ thead>

<tbody>

<tr>

<td>ラウンド</td><td>グランプリ</td><td>チーム</td><td>グリッド</td><td>レース</td>

</ tr>

<tr ng-repeat =”レースでのレース”>

<td> {{race.round}} </ td>

<td> <img src =” img / flags / {{race.Circuit.Location.country}}。png” /> {{race.raceName}} </ td>

<td> {{race.Results [0] .Constructor.name}} </ td>

<td> {{race.Results [0] .grid}} </ td>

<td> {{race.Results [0] .position}} </ td>

</ tr>

</ tbody>

</ table>

</ div>

</ section>

最終ステップ(CSS)

これで、適切に機能するスポーツフィーダーアプリができました。 前に説明したように、CSSはWebページを魅力的に見せることに重点を置いています。 したがって、このステップでは、アプリにCSSを追加し、その外観を強化するための独立性があります。 フォントを切り替えたり、背景を変更したり、別の画像を追加したり、いくつかのトランジションをアニメーション化して、アプリケーションのUIを改善したりできます。 私たちのプロジェクトの技術セクションは完了です。

チェックアウト:インドのフルスタック開発者給与

開発についてもっと知る

これでAngularJSアプリが作成されました! このチュートリアルを楽しんでいただけたでしょうか。 それを覚えておいてください

Angularは、多くの機能を備えた非常に堅牢なフレームワークです。 この記事にあるものは、Angularができることと比較して非常に少数でした。 より高度なAngularJSプロジェクトに取り組むにつれて、その強力な機能の多くを発見するでしょう。

フルスタック開発について詳しく知りたい場合は、ブログにアクセスすることをお勧めします。 この分野のさまざまな側面に関する多数のリソースがあります。 ここにさらに読むためのいくつかがあります:

  • フルスタック開発者になるためのトップ10スキル
  • フルスタック開発者になる理由
  • フルスタック開発者シリーズになる方法

一方、フルスタック開発コースを受講して、プロジェクト、ビデオ、および割り当てを通じて業界の専門家から学ぶこともできます。

フルスタック開発について詳しく知りたい場合は、upGrad&IIIT-Bのフルスタックソフトウェア開発のPGディプロマをチェックしてください。これは、働く専門家向けに設計されており、500時間以上の厳格なトレーニング、9以上のプロジェクト、および割り当てを提供します。 、IIIT-B卒業生のステータス、実践的な実践的なキャップストーンプロジェクト、トップ企業との雇用支援。

あなたの夢の仕事に着陸

ソフトウェア開発におけるアップグレードおよびIIIT-BANGALOREのPGディプロマ
今すぐ登録