AngularJS 演示項目：如何使用 AngularJS 構建應用程序

已發表: 2020-09-10

如果你正在學習全棧開發，你一定遇到過這樣的問題：“如何運行 AngularJS 項目？” 別擔心，因為在本文中，我們將分享一個關於使用 AngularJS 構建應用程序的詳細教程。

完成此項目後，您將熟悉 AngularJS 的基礎知識及其實現，並擁有一個可以向朋友炫耀的工作應用程序。您可以收藏本教程，因為我們列出了不同開發階段的步驟以及代碼。

請注意，您應該在實現之前了解代碼。這就是為什麼我們不建議複製和粘貼代碼的原因。但是，如果你知道每一行代碼是如何工作的，你就可以自由地複制和粘貼它。了解代碼的工作原理將確保您最有效地學習。

什麼是 AngularJS？簡介

在我們討論 AngularJS 項目之前，讓我們先談談技術。 AngularJS 允許用戶為應用程序擴展 HTML。它是一個基於 JavaScript 的前端 Web 框架。 HTML 在 Web 應用程序的動態視圖中滯後，而 Angular 解決了這個問題。

AngularJS 擁有一個蓬勃發展的用戶和開發人員社區，您可以在其中提出問題並消除您的困惑。 Angular 為用戶提供了數據綁定、控制器和許多其他強大的工具來增強網頁的前端。您將在我們的項目中發現許多概念，因為我們將在我們的教程中實現它們。

AngularJS 初學者項目的先決條件

在開始處理 AngularJS 項目之前，您應該熟悉以下概念：

HTML

HTML 代表超文本標記語言。它負責任何網頁結構，是 Web 開發的第一個構建塊。在開始處理這個項目之前，您應該熟悉 HTML 的語法、元素和實現。

CSS

CSS 代表層疊樣式表，是向網頁添加視覺效果的主要語言。它與 HTML 一樣重要，因為它使網頁看起來更好，更易於訪問。雖然 HTML 對於我們的 AngularJS 項目的第一階段是必需的，但您稍後必須向其中添加 CSS。這就是為什麼在開始為初學者處理 AngularJS 項目之前應該熟悉它的原因。

JavaScript

AngularJS 基於 JavaScript。熟悉 JS 語法、代碼及其實現也會為您簡化 AngularJS 的許多技術方面。在開始執行此任務之前，請確保您充分了解 JS 的基礎知識。

除了這些先決條件之外，您還應該熟悉 AngularJS 的基礎知識。本項目假設您具備 HTML、CSS、JS 和 AngularJS 的工作知識。現在我們已經解決了這個問題，讓我們開始吧。

如何運行 AngularJS 項目 - 教程

在本教程中，我們將構建一個 AngularJS 體育提要應用程序。體育信息應用程序向您顯示比賽或賽事的統計數據。例如，您可以創建一個顯示比賽記分卡或 IPL 團隊得分錶的應用程序。我們選擇開發一個體育信息應用程序，因為它不需要太多的後端開發。

的HTML

我們將首先為我們的應用程序創建 HTML。這是我們的 HTML 代碼的模板。

<表格>

<頭>

<tr><th colspan=”4″>車手錦標賽積分榜</th></tr>

</thead>

<tbody>

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

<td>

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

</td>

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

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

</tr>

</tbody>

</table>

</正文>

您一定已經註意到 {{ 和 }}。它們被稱為表達式，它們允許您執行計算任務以返回所需的值。例如，以下是一些有效的表達式：

{{ 2 + 2 }}
{{ 我的名字 }}

你可以說它們是 JavaScript 的片段。但是，最好不使用表達式來實現高級邏輯。為此，您應該使用指令。表達式僅適用於低級邏輯實現。表達式的主要任務是將所需的應用程序數據綁定到 HTML。

學習：印度的 HTML 開發人員薪水：適合新手和有經驗的人

我們的準則中的指令

在處理 AngularJS 項目時你會發現的最重要的概念之一是指令。指令是 DOM 元素上的標記，用於通知 AngularJS 它必須將特定行為附加到單個元素。該指令可以告訴 Angular 執行各種任務，例如轉換 DOM 元素及其子元素，用不同的 DOM 元素替換它。大多數強大的指令都以“ng-”開頭，其中“ng”代表 Angular。

以下是我們在上面的代碼中使用的不同指令，以及它們的應用程序：

ng-app

該指令引導應用程序並定義其範圍。這是一個基本指令，因為您可以在 AngularJS 中擁有多個應用程序，它告訴程序每個應用程序的起點和終點。

ng-控制器

該指令定義了哪個控制器將擁有用戶視圖的權力。我們在這方面表示了 driversController，它將在我們的應用程序中提供驅動程序列表（driversList）。

ng-重複

該指令是 Angular 開發人員中最常用的指令之一。它在遍歷集合期間定義模板範圍。

Angular 有許多指令，隨著您為初學者處理更多 AngularJS 項目，您會發現更多適用於它們的應用程序。這就是為什麼我們建議在學習特定技能的同時從事不同的項目。

控制器

除非我們添加控制器，否則擁有視圖將毫無用處。因此，我們將在此處添加 driversController：

angular.module('F1FeederApp.controllers', [])。

控制器（'driversController'，功能（$範圍）{

$scope.driversList = [

{

司機： {

givenName: '塞巴斯蒂安',

家庭名稱：“維特爾”

點數：322，

國籍：“德國”，

構造函數：[

{名稱：“紅牛”}

]

{

司機： {

givenName: '費爾南多',

familyName: '阿隆索'

點數：207，

國籍：“西班牙”，

構造函數：[

{名稱：“法拉利”}

]

}

];

});

您可能已經註意到一個獨特的變量是 $scope。我們將此變量作為參數傳遞給控制器，因為它將控制器與視圖鏈接起來。 $scope 包含要在模板中使用的所有數據，並且您添加到其中的所有數據都可以在視圖中訪問。

我們現在將添加一個靜態數據數組，稍後隨著項目的進展將其替換。

讓我們首先將控制器添加到 app.js，它應該如下所示：

angular.module('F1FeederApp', [

'F1FeederApp.controllers'

]);

這一小行代碼初始化了我們的應用程序並註冊了我們的應用程序所依賴的模塊。我們現在必須將所有這些信息添加到我們的 index.html 文件中：

<!DOCTYPE html>

<html>

<頭部>

</head>

<表格>

<頭>

<tr><th colspan=”4″>車手錦標賽積分榜</th></tr>

</thead>

<tbody>

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

<td>

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

</td>

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

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

</tr>

</tbody>

</table>

</正文>

</html>

在這個階段，您可以啟動您的應用程序。但是，請記住，您必須調試應用程序。學習如何運行 AngularJS 項目的一個關鍵步驟是調試應用程序。

從服務器加載數據

現在我們將在我們的應用程序中添加從 RESTful 服務器獲取實時數據的功能。為了與 HTTP 服務器通信，AngularjS 有兩個服務，$http 和 $resource。在我們的代碼中，我們將使用 $http，因為它提供了高級抽象。我們將創建一個自定義服務來抽像我們的服務器 API 調用。它將獲取數據並成為 $http 的包裝器。因此，我們將以下代碼添加到我們的 services.js 文件中：

angular.module('F1FeederApp.services', [])。

工廠（'ergastAPIservice'，函數（$http）{

var ergastAPI = {};

ergastAPI.getDrivers = function() {

返回 $http({

方法：'JSONP'，

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

});

}

返回 ergastAPI；

});

我們首先創建了一個名為 F1FeederApp.services 的新模塊，並添加了一個服務 ergastAPIservice。請注意，我們已將 $http 作為參數傳遞給服務。我們還將告訴 Angular 將我們的模塊添加到應用程序中。為此，我們必須將 app.js 中的代碼替換為以下內容：

angular.module('F1FeederApp', [

'F1FeederApp.controllers',

'F1FeederApp.services'

]);

我們需要稍微修改controller.js，以依賴的形式添加ergastAPIservice，然後這一步就完成了：

angular.module('F1FeederApp.controllers', [])。

控制器（'driversController'，函數（$scope，ergastAPIservice）{

$scope.nameFilter = null;

$scope.driversList = [];

ergastAPIservice.getDrivers().success(函數（響應）{

//深入響應者獲取相關數據

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

});

要檢查代碼是否正常工作，請重新加載您的應用程序。您會注意到我們沒有修改模板，而只包含了 nameFilter 變量。在下一節中，我們將使用該變量：

應用過濾器

到目前為止，我們已經為我們的應用程序添加了一個功能控制器。現在我們將通過添加文本搜索輸入欄為其添加更多功能。您可以在 <body> 標記下方的 index.html 中包含以下代碼：

我們在這裡使用“ng-model”指令。它將文本字段綁定到“$scope.nameFilter”變量。該指令確保我們的變量值根據輸入值保持更新。讓我們告訴“ng-repeat”它必須在輸出數據之前通過“nameFilter”中存在的值過濾“driversList”數組：

我們在這裡執行兩種不同的數據綁定。首先，每當您在搜索字段中輸入值時，Angular 都會確保 $scope.nameFilter 變量相應地更新。其次，只要 nameFilter 更新 ng-repeat，附加到它的第二個指令就會獲得一個新值和一個更新。

假設我們只想使用 Driver.familyName 和 Driver.givenName 進行過濾。我們必須在 $scope.driversList = [] 下面添加 driversController，如下所示：

$scope.searchFilter = 功能（驅動程序）{

var 關鍵字 = new RegExp($scope.nameFilter, 'i');

返回 !$scope.nameFilter || 關鍵字.test(driver.Driver.givenName) || 關鍵字.test(driver.Driver.familyName);

};

要完成這個過程，我們只需要使用 ng-repeat 指令更新該行：

您可以重新加載應用程序以查看代碼是否正常工作。我們的應用程序現在具有搜索功能。接下來，我們將添加路線。

添加路線

我們必須創建一個頁面來顯示我們的驅動程序的詳細信息。該頁面應允許用戶單擊司機並查看他或她的職業信息。我們將首先在 app.js 文件中添加 $routeProvider 服務。它將幫助您正確處理不同的應用程序路由。

現在我們將為車手信息添加一條路線，並為錦標賽記分牌添加另一條路線。現在，我們的 app.js 文件如下所示：

angular.module('F1FeederApp', [

'F1FeederApp.services',

'F1FeederApp.controllers',

'ngRoute'

]）。

配置（['$routeProvider'，函數（$routeProvider）{

$路由提供者。

當（“/drivers”，{templateUrl：“partials/drivers.html”，控制器：“driversController”}）。

當（“/drivers/:id”，{templateUrl：“partials/driver.html”，控制器：“driverController”}）。

否則({redirectTo: '/drivers'});

}]);

添加此代碼後，當用戶導航到 https://domain/#drivers 時，它將加載驅動程序控制器並定位部分視圖。如果您到目前為止一直在關注本教程，那麼您一定已經註意到一件事。我們還沒有添加部分視圖！所以我們的下一步是將相同的添加到我們的應用程序中：

添加局部視圖

AngularJS 的一個很棒的特性是它可以讓你將不同的路由綁定到不同的視圖和控制器。然而，對於 AngularJS 來執行這個動作，它應該知道它可以在哪裡渲染那些局部視圖。

所以我們使用 ng-view 指令並將其添加到我們的 index.html 文件中：

<!DOCTYPE html>

<html>

<頭部>

</head>

<ng-view></ng-view>

</正文>

</html>

由於這種實現，當我們瀏覽應用程序路由時，Angular 將加載相關視圖並呈現它。它將通過 <ng-view> 標籤確定渲染的位置。現在，我們只需要創建一個名為 partials/drivers.html 的文件並將冠軍錶的 HTML 代碼放在那裡。在此過程中，我們還將把我們的司機信息路線與司機的姓名聯繫起來：

<表格>

<頭>

<tr><th colspan=”4″>車手錦標賽積分榜</th></tr>

</thead>

<tbody>

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

<td>

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

</a>

</td>

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

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

</tr>

</tbody>

</table>

我們正在進入開發的最後階段。我們的驅動程序信息頁面需要數據，這就是我們將添加到其中的內容。為此，我們必須在 services.js 中編寫以下代碼：

angular.module('F1FeederApp.services', [])

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

var ergastAPI = {};

ergastAPI.getDrivers = function() {

返回 $http({

方法：'JSONP'，

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

});

}

ergastAPI.getDriverDetails = function(id) {

返回 $http({

方法：'JSONP'，

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

});

}

ergastAPI.getDriverRaces = function(id) {

返回 $http({

方法：'JSONP'，

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

});

}

返回 ergastAPI；

});

我們現在將編輯 controllers.js。我們的目標是將每個司機的 ID 連接到服務，因此我們的信息檢索仍然特定於請求的司機。

angular.module('F1FeederApp.controllers', [])。

/* 驅動控制器 */

控制器（'driversController'，函數（$scope，ergastAPIservice）{

$scope.nameFilter = null;

$scope.driversList = [];

$scope.searchFilter = 功能（驅動程序）{

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

返回 !$scope.nameFilter || re.test(driver.Driver.givenName) || re.test(driver.Driver.familyName);

};

ergastAPIservice.getDrivers().success(函數（響應）{

//深入響應獲取相關數據

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

});

}）。

/* 驅動控制器 */

控制器（'driverController'，函數（$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 指令。該指令將確保我們的應用僅在表達式為真時顯示必要的 HTML 元素。這意味著即使條件為 null，應用程序也不會顯示 HTML 元素。這是代碼：

</div>

國家：{{driver.Driver.nationality}} <br/>

團隊：{{driver.Constructors[0].name}}<br/>

出生：{{driver.Driver.dateOfBirth}}<br/>

</div>

</nav>

<表類=”結果表”>

<頭>

<tr><th colspan=”5″>2013 年一級方程式賽車結果</th></tr>

</thead>

<tbody>

<tr>

</tr>

<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>

</節>

最後步驟 (CSS)

到目前為止，您已經擁有了一個功能正常的運動餵食器應用程序。正如我們之前所討論的，CSS 專注於使網頁看起來更有吸引力。因此，在這一步中，您可以獨立地將 CSS 添加到您的應用程序並增強其外觀。您可以切換字體、更改背景、添加不同的圖像或為某些過渡設置動畫以改進應用程序的 UI。我們項目的技術部分是完整的。

結帳：印度的全棧開發人員薪水

了解更多關於發展

您現在已經構建了一個 AngularJS 應用程序！我們希望您喜歡本教程。請記住

Angular 是一個非常強大的框架，具有許多功能。與 Angular 能夠做的事情相比，本文中的內容非常少。當您從事更高級的 AngularJS 項目時，您會發現它的更多強大功能。

如果您想了解有關全棧開發的更多信息，那麼我們建議您前往我們的博客。您會發現有關該領域各個方面的大量資源。以下是一些供進一步閱讀的內容：

成為全棧開發人員的 10 大技能
為什麼要成為全棧開發人員？
如何成為全棧開發者係列

另一方面，您也可以參加全棧開發課程，並通過項目、視頻和作業向行業專家學習。

如果您有興趣了解有關全棧開發的更多信息，請查看 upGrad 和 IIIT-B 的全棧軟件開發 PG 文憑，該文憑專為在職專業人士設計，提供 500 多個小時的嚴格培訓、9 個以上的項目和作業, IIIT-B 校友身份，實用的實踐頂點項目和頂級公司的工作協助。

踏上夢想的工作

升級和 IIIT-BANGALORE 的軟件開發 PG 文憑

今天報名

AngularJS 演示項目：如何使用 AngularJS 構建應用程序

什麼是 AngularJS？ 簡介

AngularJS 初學者項目的先決條件

HTML

CSS

JavaScript

如何運行 AngularJS 項目 - 教程

的HTML

我們的準則中的指令

ng-app

ng-控制器

ng-重複

控制器

從服務器加載數據

應用過濾器

添加路線

添加局部視圖

最後步驟 (CSS)

了解更多關於發展

踏上夢想的工作

什麼是 AngularJS？簡介