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？简介