Демонстрационный проект AngularJS: как создать приложение с помощью AngularJS
Опубликовано: 2020-09-10Если вы изучаете разработку с полным стеком, вы наверняка сталкивались с вопросом «Как запустить проект AngularJS?» Не беспокойтесь, потому что в этой статье мы поделимся подробным руководством по созданию приложения с помощью AngularJS.
После завершения этого проекта вы познакомитесь с основами AngularJS, его реализациями и у вас будет работающее приложение, которым вы сможете похвастаться перед друзьями. Вы можете добавить это руководство в закладки, так как мы перечислили шаги для разных этапов разработки вместе с кодом.
Обратите внимание, что вы должны понять код, прежде чем внедрять его. Вот почему мы не рекомендуем копировать и вставлять код. Однако, если вы знаете, как работает каждая строка кода, вы можете свободно копировать и вставлять ее. Понимание того, как работает код, обеспечит наиболее эффективное обучение.
Оглавление
Что такое AngularJS? Краткое введение
Прежде чем мы обсудим проекты AngularJS, давайте сначала немного поговорим о технологии. AngularJS позволяет пользователям расширять HTML для приложений. Это интерфейсный веб-фреймворк, основанный на JavaScript. HTML отстает в динамических представлениях для веб-приложений, и Angular решает эту проблему.
AngularJS имеет процветающее сообщество пользователей и разработчиков, где вы можете задавать вопросы и устранять путаницу. Angular предоставляет пользователям привязку данных, контроллеры и многие другие мощные инструменты для улучшения интерфейса веб-страницы. Вы откроете для себя много концепций в нашем проекте, поскольку мы реализуем их в нашем руководстве.
Предпосылки для проектов AngularJS для начинающих
Прежде чем вы начнете работать над проектами AngularJS, вы должны быть знакомы со следующими понятиями:
HTML
HTML означает язык гипертекстовой разметки. Он отвечает за структуру любой веб-страницы и является первым строительным блоком веб-разработки. Вы должны быть знакомы с синтаксисом 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-кода.
<body ng-app="F1FeederApp" ng-controller="driversController">
<таблица>
<thead>
<tr><th colspan="4″>Рейтинг чемпионата водителей</th></tr>
</thead>
<тело>
<tr ng-repeat="драйвер в списке драйверов">
<td>{{$index + 1}}</td>
<тд>
<img src="img/flags/{{driver.Driver.nationality}}.png" />
{{driver.Driver.givenName}} {{driver.Driver.familyName}}
</td>
<td>{{driver.Constructors[0].name}}</td>
<td>{{водительские баллы}}</td>
</tr>
</tbody>
</таблица>
</тело>
Вы, должно быть, заметили {{ и }}. Они называются выражениями и позволяют выполнять вычислительные задачи для возврата требуемого значения. Например, вот несколько допустимых выражений:
- {{ 2 + 2 }}
- {{ мое имя }}
Можно сказать, что это фрагменты JavaScript. Однако было бы лучше, если бы вы не использовали выражения для реализации высокоуровневой логики. Для этого следует использовать директивы. Выражения подходят только для реализации низкоуровневой логики. Основная задача выражений — связать необходимые данные приложения с HTML.
Узнайте: Заработная плата HTML-разработчика в Индии: для новичков и опытных
Директивы нашего Кодекса
Одна из самых важных концепций, которую вы обнаружите, работая над проектами AngularJS, — это директивы. Директива — это маркер на элементе DOM, чтобы сообщить AngularJS, что он должен привязать определенное поведение к отдельному элементу. Директива может указать Angular выполнять различные задачи, такие как преобразование элемента DOM и его дочерних элементов, замена его другим элементом DOM. Большинство мощных директив начинаются с «ng-», где «ng» означает Angular.
Вот различные директивы, которые мы использовали в нашем коде выше, вместе с их приложениями:
нг-приложение
Эта директива загружает приложение и определяет его область действия. Это важная директива, потому что у вас может быть несколько приложений в AngularJS, и она сообщает программе начальную и конечную точки каждого приложения.
нг-контроллер
Эта директива определяет, какой контроллер будет иметь право на представление пользователя. Мы обозначили в этом отношении контроллер driversController, который предоставит список драйверов (driversList) в нашем приложении.
нг-повторить
Эта директива является одной из наиболее часто используемых среди разработчиков Angular. Он определяет область действия шаблона во время циклического просмотра коллекций.
В Angular есть много директив, и по мере того, как вы будете работать над большим количеством проектов AngularJS для начинающих, вы обнаружите для них больше приложений. Вот почему мы рекомендуем работать над разными проектами, изучая определенный навык.
Контроллеры
Наличие представления было бы бесполезным, если бы мы не добавили контроллер. Итак, мы добавим сюда driverController:
angular.module('F1FeederApp.controllers', []).
контроллер('driversController', функция($scope) {
$scope.driversList = [
{
Водитель: {
данныйИмя: 'Себастьян',
фамилия: 'Феттель'
},
баллы: 322,
национальность: «немец»,
Конструкторы: [
{название: «Ред Булл»}
]
},
{
Водитель: {
данныйИмя: 'Фернандо',
фамилия: 'Алонсо'
},
баллы: 207,
национальность: «испанец»,
Конструкторы: [
{название: "Феррари"}
]
}
];
});
Вы могли заметить уникальную переменную $scope. Мы передаем эту переменную в качестве параметра контроллеру, поскольку она связывает контроллер с представлениями. $scope содержит все данные для использования в шаблоне, и все данные, которые вы добавляете в него, будут доступны в представлениях.
Сейчас мы добавим статический массив данных и заменим его позже по мере продвижения нашего проекта.
Давайте сначала добавим контроллер в app.js, который должен выглядеть так:
angular.module('F1FeederApp', [
'F1FeederApp.контроллеры'
]);
Эта небольшая строка кода инициализирует наше приложение и регистрирует модули, от которых зависит наше приложение. Теперь нам нужно добавить всю эту информацию в наш файл index.html:
<!ДОКТИП HTML>
<html>
<голова>
<title>Кормушка F-1</title>
</голова>
<body ng-app="F1FeederApp" ng-controller="driversController">
<таблица>
<thead>
<tr><th colspan="4″>Рейтинг чемпионата водителей</th></tr>
</thead>
<тело>
<tr ng-repeat="драйвер в списке драйверов">
<td>{{$index + 1}}</td>
<тд>
<img src="img/flags/{{driver.Driver.nationality}}.png" />
{{driver.Driver.givenName}} {{driver.Driver.familyName}}
</td>
<td>{{driver.Constructors[0].name}}</td>
<td>{{водительские баллы}}</td>
</tr>
</tbody>
</таблица>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
</тело>
</html>
На этом этапе вы можете запустить свое приложение. Однако имейте в виду, что вам придется отлаживать приложение. Важным шагом в обучении запуску проекта AngularJS является отладка приложения.
Загрузить данные с сервера
Теперь мы добавим в наше приложение функцию получения оперативных данных с сервера RESTful. Для связи с HTTP-серверами в AngularjS есть две службы: $http и $resource. В нашем коде мы будем использовать $http, так как он обеспечивает абстракцию высокого уровня. Мы создадим настраиваемую службу для абстрагирования вызовов API нашего сервера. Он извлечет данные и будет оберткой вокруг $http. Итак, мы добавим следующий код в наш файл services.js:
angular.module('F1FeederApp.services', []).
factory('ergastAPIservice', function($http) {
var ergastAPI = {};
ergastAPI.getDrivers = функция () {
вернуть $http({
метод: 'JSONP',
URL: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'
});
}
вернуть эргастАПИ;
});
Сначала мы создали новый модуль под названием F1FeederApp.services и добавили сервис ergastAPIservice. Обратите внимание, что мы передали $http в качестве параметра службе. Мы также скажем Angular добавить наш модуль в приложение. Для всего этого нам нужно заменить код в app.js следующим:
angular.module('F1FeederApp', [
'F1FeederApp.контроллеры',
'F1FeederApp.services'
]);
Придется немного изменить controller.js и добавить ergastAPIservice в виде зависимости, и тогда этот шаг завершится:
angular.module('F1FeederApp.controllers', []).
контроллер('driversController', функция($scope, ergastAPIservice) {
$scope.nameFilter = ноль;
$scope.driversList = [];
ergastAPIservice.getDrivers().success(функция (ответ) {
//Покопаемся в ответчике, чтобы получить соответствующие данные
$scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;
});
});
Чтобы проверить, работает код или нет, перезагрузите приложение. Вы могли заметить, что мы не изменили шаблон, а только включили переменную nameFilter. В следующем разделе мы будем использовать эту переменную:
Применить фильтры
На данный момент мы добавили в наше приложение функциональный контроллер. Теперь мы добавим ему больше функциональности, добавив панель ввода текстового поиска. Вы можете включить следующий код в свой index.html под тегом <body>:
<input type="text" ng-model="nameFilter" placeholder="Search…"/>
Здесь мы используем директиву «ng-model». Это свяжет текстовое поле с переменной «$scope.nameFilter». Директива гарантирует, что значение нашей переменной остается обновленным в соответствии с входным значением. Давайте скажем «ng-repeat», что он должен отфильтровать массив «driversList» по значению, представленному в «nameFilter», прежде чем он выведет данные:
<tr ng-repeat="драйвер в списке драйверов | фильтр: имяФильтр»>
Здесь мы выполняем две разные привязки данных. Во-первых, всякий раз, когда вы вводите значение в поле поиска, Angular будет обеспечивать соответствующее обновление переменной $scope.nameFilter. Во-вторых, как только nameFilter обновляет ng-repeat, вторая прикрепленная к нему директива получает новое значение и обновление.
Предположим, мы хотим фильтровать только с помощью Driver.familyName и Driver.givenName. Нам нужно будет добавить driversController ниже $scope.driversList = [] следующим образом:
$scope.searchFilter = функция (драйвер) {
ключевое слово var = новое регулярное выражение ($scope.nameFilter, 'i');
вернуть !$scope.nameFilter || ключевое слово.test(driver.Driver.givenName) || ключевое слово.test(driver.Driver.familyName);
};
Чтобы завершить этот процесс, нам нужно только обновить строку директивой ng-repeat:
<tr ng-repeat="драйвер в списке драйверов | фильтр: поискФильтр»>
Вы можете перезагрузить приложение, чтобы увидеть, работает код или нет. Наше приложение теперь имеет функцию поиска. Далее мы добавим маршруты.
Добавление маршрутов
Мы должны создать страницу, которая показывает детали наших водителей. Страница должна позволять пользователю щелкнуть по водителю и просмотреть информацию о его или ее карьере. Начнем с добавления службы $routeProvider в файл app.js. Это поможет вам правильно обрабатывать различные маршруты приложений.
Теперь мы добавим маршрут для информации о гонщиках и еще один для табло чемпионата. Теперь наш файл app.js выглядит так:
angular.module('F1FeederApp', [
'F1FeederApp.services',
'F1FeederApp.контроллеры',
'ngRoute'
]).
config(['$routeProvider', функция($routeProvider) {
$маршрутПровайдер.
когда("/drivers", {templateUrl: "partials/drivers.html", контроллер: "driversController"}).
когда("/drivers/:id", {templateUrl: "partials/driver.html", контроллер: "driverController"}).
иначе({перенаправить на: '/drivers'});
}]);
После добавления этого кода, когда пользователь перейдет к https://domain/#drivers, он загрузит driversController и найдет частичное представление. Если вы до сих пор следовали этому руководству, вы, должно быть, заметили одну вещь. Мы не добавили частичные просмотры! Итак, нашим следующим шагом было бы добавить то же самое в наше приложение:
Добавление частичных представлений
Отличительной особенностью AngularJS является то, что он позволяет привязывать разные маршруты к различным представлениям и контроллерам. Однако для выполнения этого действия AngularJS должен знать, где он может отображать эти частичные представления.
Итак, мы используем директиву ng-view и добавляем ее в наш файл index.html:
<!ДОКТИП HTML>
<html>
<голова>
<title>Кормушка F-1</title>
</голова>
<body ng-app="F1FeederApp">
<ng-просмотр></ng-просмотр>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
</тело>
</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="драйвер в списке драйверов | фильтр: поискФильтр»>
<td>{{$index + 1}}</td>
<тд>
<img src="img/flags/{{driver.Driver.nationality}}.png" />
<a href="#/drivers/{{driver.Driver.driverId}}">
{{driver.Driver.givenName}} {{driver.Driver.familyName}}
</a>
</td>
<td>{{driver.Constructors[0].name}}</td>
<td>{{водительские баллы}}</td>
</tr>
</tbody>
</таблица>
Мы выходим на финальную стадию разработки. Нашей странице с информацией о водителе нужны данные, поэтому мы добавим их. Для этого нам нужно написать следующий код в services.js:
angular.module('F1FeederApp.services', [])
.factory('ergastAPIservice', функция($http) {
var ergastAPI = {};
ergastAPI.getDrivers = функция () {
вернуть $http({
метод: 'JSONP',
URL: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK'
});
}
ergastAPI.getDriverDetails = функция (идентификатор) {
вернуть $http({
метод: 'JSONP',
URL: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/driverStandings.json?callback=JSON_CALLBACK'
});
}
ergastAPI.getDriverRaces = функция (идентификатор) {
вернуть $http({
метод: 'JSONP',
URL: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/results.json?callback=JSON_CALLBACK'
});
}
вернуть эргастАПИ;
});
Теперь мы отредактируем файл controllers.js. Мы стремимся связать ID каждого водителя с сервисом, чтобы наш поиск информации оставался специфичным для запрошенного водителя.
angular.module('F1FeederApp.controllers', []).
/* Контроллер драйверов */
контроллер('driversController', функция($scope, ergastAPIservice) {
$scope.nameFilter = ноль;
$scope.driversList = [];
$scope.searchFilter = функция (драйвер) {
var re = новое регулярное выражение ($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 = ноль;
ergastAPIservice.getDriverDetails($scope.id).success(функция (ответ) {
$scope.driver = response.MRData.StandingsTable.StandingsLists[0].DriverStandings[0];
});
ergastAPIservice.getDriverRaces($scope.id).success(функция (ответ) {
$scope.races = response.MRData.RaceTable.Races;
});
});
Обратите внимание, что мы добавили службу $routePrams в контроллер драйвера. Это позволит вам получить доступ к параметрам URL и является важным шагом.
Теперь мы создадим файл с именем partials/driver.html, так как мы добавили все необходимые данные, и нам осталось заняться только остальной частью частичного представления. Мы использовали директиву ng-show в приведенном ниже коде. Директива гарантирует, что наше приложение будет отображать необходимый элемент HTML только тогда, когда выражение истинно. Это означает, что даже если условие равно null, приложение не будет отображать элемент HTML. Вот код:
<идентификатор раздела="основной">
<a href=""./#/drivers"><- Назад к списку драйверов</a>
<nav id="вторичный" класс="main-nav">
<div class="картинка водителя">
<div class="аватар">
<img ng-show="драйвер" 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.Driver.nationality}} <br/>
Команда: {{driver.Constructors[0].name}}<br/>
Дата рождения: {{driver.Driver.dateOfBirth}}<br/>
<a href="{{driver.Driver.url}}" target="_blank">Биография</a>
</div>
</nav>
<div class="основной контент">
<класс таблицы=”результат-таблица”>
<thead>
<tr><th colspan="5″>Результаты Формулы 1 2013</th></tr>
</thead>
<тело>
<tr>
<td>Раунд</td> <td>Гран-при</td> <td>Команда</td> <td>Сетка</td> <td>Гонка</td>
</tr>
<tr ng-repeat="гонка в гонках">
<td>{{гонка.раунд}}</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>
</таблица>
</div>
</раздел>
Заключительные шаги (CSS)
К настоящему времени у вас есть правильно работающее приложение для спортивной подачи. Как мы уже говорили ранее, CSS фокусируется на том, чтобы веб-страница выглядела привлекательно. Итак, на этом этапе у вас есть возможность добавить CSS в свое приложение и улучшить его внешний вид. Вы можете переключать шрифты, менять фон, добавлять разные изображения или анимировать некоторые переходы, чтобы улучшить пользовательский интерфейс приложения. Технические разделы нашего проекта завершены.
Оформить заказ: Заработная плата Full Stack Developer в Индии
Узнайте больше о разработке
Вы создали приложение AngularJS! Мы надеемся, что вам понравился этот урок. Помните, что
Angular — довольно надежный фреймворк с множеством функций. Тех, что в этой статье, очень мало по сравнению с тем, на что способен Angular. По мере того, как вы будете работать над более продвинутыми проектами AngularJS, вы откроете для себя больше его мощных возможностей.
Если вы хотите узнать больше о разработке полного стека, рекомендуем посетить наш блог. Вы найдете множество ресурсов по различным аспектам этой области. Вот некоторые из них для дальнейшего чтения:
- 10 лучших навыков, чтобы стать полноценным разработчиком
- Зачем становиться Full-Stack разработчиком?
- Серия статей «Как стать полноценным разработчиком»
С другой стороны, вы также можете пройти полный курс разработки и учиться у отраслевых экспертов с помощью проектов, видео и заданий.
Если вам интересно узнать больше о разработке полного стека, ознакомьтесь с дипломом PG upGrad & IIIT-B по разработке программного обеспечения с полным стеком, который предназначен для работающих профессионалов и предлагает более 500 часов тщательного обучения, более 9 проектов и заданий. , статус выпускника IIIT-B, практические практические проекты и помощь в трудоустройстве в ведущих фирмах.