Projekt demonstracyjny AngularJS: Jak zbudować aplikację za pomocą AngularJS

Opublikowany: 2020-09-10

Jeśli uczysz się programowania full-stack, musiałeś zmierzyć się z pytaniem „Jak uruchomić projekt AngularJS?” Nie martw się, ponieważ w tym artykule udostępnimy szczegółowy samouczek dotyczący tworzenia aplikacji za pomocą AngularJS.

Po ukończeniu tego projektu będziesz zaznajomiony z podstawami AngularJS, jego implementacjami i będziesz miał działającą aplikację, którą możesz pochwalić się znajomym. Możesz dodać ten samouczek do zakładek, ponieważ wymieniliśmy kroki dla różnych etapów rozwoju wraz z kodem.

Pamiętaj, że powinieneś zrozumieć kod, zanim go zaimplementujesz. Dlatego nie zalecamy kopiowania i wklejania kodu. Jeśli jednak wiesz, jak działa każdy wiersz kodu, możesz go dowolnie kopiować i wklejać. Zrozumienie, jak działa kod, zapewniłoby najefektywniejszą naukę.

Spis treści

Co to jest AngularJS? Krótkie wprowadzenie

Zanim omówimy projekty AngularJS, porozmawiajmy najpierw trochę o technologii. AngularJS pozwala użytkownikom rozszerzać HTML dla aplikacji. Jest to front-endowy framework webowy oparty na JavaScript. HTML opóźnia się w dynamicznych widokach dla aplikacji internetowych, a Angular rozwiązuje ten problem.

AngularJS ma kwitnącą społeczność użytkowników i programistów, w której możesz zadawać pytania i usuwać zamieszanie. Angular zapewnia użytkownikom wiązanie danych, kontrolery i wiele innych potężnych narzędzi do ulepszania interfejsu strony internetowej. W naszym projekcie odkryjesz wiele koncepcji, które zaimplementujemy w naszym samouczku.

Wymagania wstępne dla projektów AngularJS dla początkujących

Zanim zaczniesz pracować nad projektami AngularJS, powinieneś zapoznać się z następującymi pojęciami:

HTML

HTML oznacza HyperText Markup Language. Jest odpowiedzialny za dowolną strukturę strony internetowej i jest pierwszym elementem konstrukcyjnym do tworzenia stron internetowych. Powinieneś zapoznać się ze składnią HTML, jego elementami i implementacjami przed rozpoczęciem pracy nad tym projektem.

CSS

CSS oznacza kaskadowe arkusze stylów i jest podstawowym językiem do dodawania elementów wizualnych do strony internetowej. Jest tak samo ważny jak HTML, ponieważ sprawia, że strona internetowa wygląda lepiej i staje się bardziej dostępna. Chociaż HTML jest niezbędny na pierwszym etapie naszego projektu AngularJS, będziesz musiał później dodać do niego CSS. Dlatego powinieneś się z nim zapoznać przed rozpoczęciem pracy nad projektami AngularJS dla początkujących.

JavaScript

AngularJS jest oparty na JavaScript. Znajomość składni JS, kodu i jego implementacji uprości również wiele technicznych aspektów AngularJS. Upewnij się, że dobrze rozumiesz podstawy JS, zanim zaczniesz pracować nad tym zadaniem.

Oprócz tych wymagań wstępnych powinieneś również znać podstawy AngularJS. Ten projekt zakłada, że masz praktyczną wiedzę na temat HTML, CSS, JS i AngularJS. Teraz, gdy już to usunęliśmy, zacznijmy.

Jak uruchomić projekt AngularJS – samouczek

W tym samouczku zbudujemy aplikację z kanałami sportowymi AngularJS. Aplikacja Sports-Feed pokazuje statystyki meczu lub wydarzenia. Na przykład możesz utworzyć aplikację wyświetlającą kartę wyników meczów lub tabelę wyników drużyn IPL. Zdecydowaliśmy się pracować nad aplikacją z kanałami sportowymi, ponieważ nie wymaga ona dużego rozwoju zaplecza.

HTML

Zaczniemy od stworzenia kodu HTML dla naszej aplikacji. Oto szablon naszego kodu HTML.

<głowa>

<tr><th colspan=”4″>Tabela Mistrzostw Kierowców</th></tr>

</head>

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

</body>

Na pewno zauważyłeś {{ i }}. Nazywane są wyrażeniami i umożliwiają wykonywanie zadań obliczeniowych w celu zwrócenia wymaganej wartości. Na przykład, oto kilka poprawnych wyrażeń:

{{ 2 + 2 }}
{{ moje imię }}

Można powiedzieć, że są to fragmenty kodu JavaScript. Jednak najlepiej byłoby, gdybyś nie używał wyrażeń do implementacji logiki wysokiego poziomu. Aby to zrobić, powinieneś użyć dyrektyw. Wyrażenia są odpowiednie tylko do implementacji logiki niskiego poziomu. Podstawowym zadaniem wyrażeń jest powiązanie wymaganych danych aplikacji z kodem HTML.

Dowiedz się: Wynagrodzenie programisty HTML w Indiach: dla nowicjuszy i doświadczonych

Dyrektywy w naszym Kodeksie

Jednym z najważniejszych pojęć, które można odkryć podczas pracy nad projektami AngularJS, są dyrektywy. Dyrektywa to znacznik na elemencie DOM, który informuje AngularJS, że musi dołączyć określone zachowanie do pojedynczego elementu. Dyrektywa może nakazać Angularowi wykonanie różnych zadań, takich jak przekształcenie elementu DOM i jego dzieci, zastąpienie go innym elementem DOM. Większość potężnych dyrektyw zaczyna się od „ng-”, gdzie „ng” oznacza Angular.

Oto różne dyrektywy, których użyliśmy w powyższym kodzie, wraz z ich zastosowaniami:

ng-aplikacja

Ta dyrektywa uruchamia aplikację i definiuje jej zakres. Jest to niezbędna dyrektywa, ponieważ możesz mieć wiele aplikacji w AngularJS i informuje program o punktach początkowych i końcowych każdej aplikacji.

kontroler ng

Dyrektywa ta określa, który kontroler miałby uprawnienia widoku użytkownika. W tym zakresie nazwaliśmy driversController, który będzie udostępniał listę sterowników (driversList) w naszej aplikacji.

ng-powtórz

Ta dyrektywa jest jedną z najczęściej używanych przez programistów Angulara. Definiuje zakres szablonu podczas przeglądania kolekcji.

Angular ma wiele dyrektyw, a ponieważ będziesz pracować nad większą liczbą projektów AngularJS dla początkujących, odkryjesz dla nich więcej aplikacji. Dlatego zalecamy pracę nad różnymi projektami podczas nauki konkretnej umiejętności.

Kontrolerzy

Posiadanie widoku byłoby bezużyteczne, chyba że dodamy kontroler. Dodamy więc sterownik DriversController tutaj:

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

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

$scope.driversList = [

{

Kierowca: {

podaneNazwisko: 'Sebastian',

FamilyName: 'Vettel'

punktów: 322,

narodowość: „niemiecka”,

Konstruktorzy: [

{imię: „Red Bull”}

]

{

Kierowca: {

podaneNazwisko: 'Fernando',

Nazwisko rodziny: 'Alonso'

punktów: 207,

narodowość: „hiszpańska”,

Konstruktorzy: [

{Nazwa: „Ferrari”}

]

}

];

});

Unikalną zmienną, którą mogłeś zauważyć, jest $scope. Przekazujemy tę zmienną jako parametr do kontrolera, ponieważ łączyłaby kontroler z widokami. $scope przechowuje wszystkie dane do użycia w szablonie, a wszystkie dane, które do niego dodasz, będą dostępne w widokach.

Na razie dodamy statyczną tablicę danych i zastąpimy ją później w miarę postępów w naszym projekcie.

Dodajmy najpierw kontroler do app.js, który powinien wyglądać tak:

angular.module('F1FeederApp', [

'F1FeederApp.kontrolery'

]);

Ten mały wiersz kodu zainicjował naszą aplikację i zarejestrował moduły, od których nasza aplikacja jest zależna. Teraz musimy dodać wszystkie te informacje do naszego pliku index.html:

<!DOCTYPE html>

<html>

<głowa>

<title>Podajnik F-1</title>

</head>

<głowa>

<tr><th colspan=”4″>Tabela Mistrzostw Kierowców</th></tr>

</head>

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

</body>

</html>

Na tym etapie możesz uruchomić swoją aplikację. Pamiętaj jednak, że będziesz musiał debugować aplikację. Kluczowym krokiem w nauce uruchamiania projektu AngularJS jest debugowanie aplikacji.

Załaduj dane z serwera

Teraz dodamy do naszej aplikacji funkcję pobierania danych na żywo z serwera RESTful. Aby komunikować się z serwerami HTTP, AngularjS ma dwie usługi, $http i $resource. W naszym kodzie użyjemy $http, ponieważ oferuje abstrakcję wysokiego poziomu. Stworzymy niestandardową usługę, aby abstrahować nasze wywołania API serwera. Pobiera dane i jest opakowaniem wokół $http. Dlatego dodamy następujący kod do naszego pliku services.js:

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

fabryka('ergastAPIservice', function($http) {

var ergastAPI = {};

ergastAPI.getDrivers = funkcja() {

zwróć $http({

metoda: 'JSONP',

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

});

}

zwróć ergastAPI;

});

Najpierw stworzyliśmy nowy moduł o nazwie F1FeederApp.services i dodaliśmy usługę ergastAPIservice. Zauważ, że przekazaliśmy do usługi $http jako parametr. Powiemy również Angularowi, aby dodał nasz moduł do aplikacji. Aby to wszystko zrobić, musimy zastąpić kod w app.js następującym:

angular.module('F1FeederApp', [

'F1FeederApp.kontrolery',

„F1FeederApp.services”

]);

Będziemy musieli trochę zmodyfikować controller.js i dodać ergastAPIservice w postaci zależności, a wtedy ten krok się zakończy:

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

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

$scope.nameFilter = null;

$scope.driversList = [];

ergastAPIservice.getDrivers().success(function (odpowiedź) {

//Zakop się w odpowiedzi, aby uzyskać odpowiednie dane

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

});

Aby sprawdzić, czy kod działa, przeładuj aplikację. Można zauważyć, że nie zmodyfikowaliśmy szablonu, a jedynie uwzględniliśmy zmienną nameFilter. W następnej sekcji użyjemy tej zmiennej:

Zastosuj filtry

Do tej pory dodaliśmy do naszej aplikacji funkcjonalny kontroler. Teraz dodamy do niego więcej funkcji, dodając pasek wprowadzania tekstu wyszukiwania. Możesz umieścić następujący kod w swoim index.html pod tagiem <body>:

Używamy tutaj dyrektywy „ng-model”. Powiąże to pole tekstowe ze zmienną „$scope.nameFilter”. Dyrektywa zapewnia, że nasza wartość zmiennej pozostaje aktualizowana zgodnie z wartością wejściową. Powiedzmy „ng-repeat”, że musi filtrować tablicę „driversList” według wartości obecnej w „nameFilter”, zanim wyprowadzi dane:

Wykonujemy tutaj dwa różne powiązania danych. Po pierwsze, za każdym razem, gdy wprowadzisz wartość w polu wyszukiwania, Angular upewni się, że zmienna $scope.nameFilter zostanie odpowiednio zaktualizowana. Po drugie, gdy tylko nameFilter zaktualizuje ng-repeat, dołączona do niego druga dyrektywa otrzymuje nową wartość i aktualizację.

Załóżmy, że chcemy filtrować tylko za pomocą Driver.familyName i Driver.givenName. Musimy dodać driversController poniżej $scope.driversList = [] w ten sposób:

$scope.searchFilter = funkcja (sterownik) {

var słowo kluczowe = new RegExp($scope.nameFilter, 'i');

return !$scope.nameFilter || słowo kluczowe.test(kierowca.Nazwa_sterownika) || słowo kluczowe.test(sterownik.Driver.familyName);

};

Aby sfinalizować ten proces, wystarczy zaktualizować linię o dyrektywę ng-repeat:

Możesz ponownie załadować aplikację, aby sprawdzić, czy kod działa, czy nie. Nasza aplikacja ma teraz funkcję wyszukiwania. Następnie dodamy trasy.

Dodawanie tras

Musimy stworzyć stronę, która pokazuje szczegóły naszych kierowców. Strona powinna umożliwiać użytkownikowi kliknięcie kierowcy i wyświetlenie informacji o jego karierze. Zaczniemy od dodania usługi $routeProvider do pliku app.js. Pomoże Ci to właściwie obsłużyć różne trasy aplikacji.

Teraz dodamy trasę do informacji o kierowcy i kolejną do tablicy wyników mistrzostw. Teraz nasz plik app.js wygląda tak:

angular.module('F1FeederApp', [

'F1FeederApp.services',

'F1FeederApp.kontrolery',

„ngRoute”

]).

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

$routeDostawca.

when(„/drivers”, {templateUrl: „części/sterowniki.html”, kontroler: „driversController”}).

when(„/drivers/:id”, {templateUrl: „części/sterownik.html”, kontroler: „driverController”}).

w przeciwnym razie({przekierujDo: '/sterowniki'});

}]);

Po dodaniu tego kodu, gdy użytkownik przejdzie do https://domain/#drivers, załaduje sterownik drivers i zlokalizuje widok częściowy. Jeśli do tej pory śledziłeś ten samouczek, musiałeś zauważyć jedną rzecz. Nie dodaliśmy widoków częściowych! Więc naszym następnym krokiem byłoby dodanie tego samego do naszej aplikacji:

Dodawanie widoków częściowych

Świetną cechą AngularJS jest to, że pozwala powiązać różne trasy z różnymi widokami i kontrolerami. Jednak, aby AngularJS mógł wykonać tę akcję, powinien wiedzieć, gdzie może renderować te częściowe widoki.

Używamy więc dyrektywy ng-view i dodajemy ją do naszego pliku index.html:

<!DOCTYPE html>

<html>

<głowa>

<title>Podajnik F-1</title>

</head>

<ng-view></ng-view>

</body>

</html>

Dzięki tej implementacji, gdy będziemy poruszać się po trasie aplikacji, Angular załaduje odpowiedni widok i wyrenderuje go. Określi lokalizację do renderowania za pomocą tagu <ng-view>. Teraz musimy tylko stworzyć plik o nazwie Partials/drivers.html i umieścić tam kod HTML tabeli mistrzostw. Przy okazji połączymy również naszą trasę informacyjną o kierowcach z nazwiskami kierowców:

<głowa>

<tr><th colspan=”4″>Tabela Mistrzostw Kierowców</th></tr>

</head>

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

Dochodzimy do końcowych etapów rozwoju. Nasza strona z informacjami o kierowcy potrzebuje danych, więc to właśnie do niej dodamy. Aby to zrobić, musielibyśmy napisać następujący kod w services.js:

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

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

var ergastAPI = {};

ergastAPI.getDrivers = funkcja() {

zwróć $http({

metoda: 'JSONP',

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

});

}

ergastAPI.getDriverDetails = function(id) {

zwróć $http({

metoda: 'JSONP',

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

});

}

ergastAPI.getDriverRaces = function(id) {

zwróć $http({

metoda: 'JSONP',

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

});

}

zwróć ergastAPI;

});

Zmodyfikujemy teraz plik controllers.js. Naszym celem jest połączenie identyfikatora każdego kierowcy z usługą, więc nasze wyszukiwanie informacji pozostaje specyficzne dla żądanego kierowcy.

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

/* Kontroler sterowników */

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

$scope.nameFilter = null;

$scope.driversList = [];

$scope.searchFilter = funkcja (sterownik) {

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

return !$scope.nameFilter || re.test(sterownik.sterownik.podana nazwa) || re.test(sterownik.Driver.familyName);

};

ergastAPIservice.getDrivers().success(function (odpowiedź) {

// Zagłębianie się w odpowiedź w celu uzyskania odpowiednich danych

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

});

}).

/* Kontroler sterownika */

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

$scope.id = $routeParams.id;

$scope.races = [];

$scope.driver = null;

ergastAPIservice.getDriverDetails($scope.id).success(function (odpowiedź) {

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

});

ergastAPIservice.getDriverRaces($scope.id).success(function (odpowiedź) {

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

});

Zauważ, że dodaliśmy usługę $routePrams w kontrolerze sterownika. Umożliwi ci dostęp do parametrów adresu URL i jest kluczowym krokiem.

Teraz utworzymy plik o nazwie Partials/driver.html, ponieważ dodaliśmy wszystkie niezbędne dane i musimy zająć się tylko resztą częściowego widoku. W poniższym kodzie użyliśmy dyrektywy ng-show. Dyrektywa zapewni, że nasza aplikacja pokaże tylko niezbędny element HTML, gdy wyrażenie jest prawdziwe. Oznacza to, że nawet jeśli warunek ma wartość NULL, aplikacja nie wyświetli elementu HTML. Oto kod:

</div>

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

Zespół: {{driver.Constructors[0].name}}<br/>

Narodziny: {{driver.Driver.dateOfBirth}}<br/>

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

</div>

</nav>

<głowa>

<tr><th colspan=”5″>Wyniki Formuły 1 2013</th></tr>

</head>

<tbody>

<tr>

<td>Runda</td> <td>Grand Prix</td> <td>Drużyna</td> <td>Siatka</td> <td>Wyścig</td>

</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].pozycja}}</td>

</tr>

</tbody>

</table>

</div>

</section>

Ostatnie kroki (CSS)

Do tej pory masz poprawnie działającą aplikację Sports Feeder. Jak wspomnieliśmy wcześniej, CSS skupia się na atrakcyjności wyglądu strony. Tak więc na tym etapie masz niezależność, aby dodać CSS do swojej aplikacji i poprawić jej wygląd. Możesz przełączać czcionki, zmieniać tło, dodawać różne obrazy lub animować niektóre przejścia, aby ulepszyć interfejs użytkownika aplikacji. Działy techniczne naszego projektu są kompletne.

Zamówienie: wynagrodzenie programisty Full Stack w Indiach

Dowiedz się więcej o rozwoju

Zbudowałeś teraz aplikację AngularJS! Mamy nadzieję, że podobał Ci się ten samouczek. Zapamietaj to

Angular to dość solidny framework z wieloma funkcjonalnościami. Te w tym artykule były bardzo nieliczne w porównaniu do rzeczy, do których jest zdolny Angular. Gdy będziesz pracować nad bardziej zaawansowanymi projektami AngularJS, odkryjesz więcej jego potężnych możliwości.

Jeśli chcesz dowiedzieć się więcej o programowaniu full-stack, zachęcamy do odwiedzenia naszego bloga. Znajdziesz wiele zasobów dotyczących różnych aspektów tej dziedziny. Oto kilka do dalszej lektury:

10 najlepszych umiejętności, aby zostać programistą Full Stack
Dlaczego warto zostać programistą Full-Stack?
Jak zostać pełną serią programistów?

Z drugiej strony możesz również wziąć udział w pełnym kursie programistycznym i uczyć się od ekspertów branżowych poprzez projekty, filmy i zadania.

Jeśli chcesz dowiedzieć się więcej o tworzeniu pełnego stosu, zapoznaj się z dyplomem PG upGrad i IIIT-B w zakresie pełnego tworzenia oprogramowania, który jest przeznaczony dla pracujących profesjonalistów i oferuje ponad 500 godzin rygorystycznych szkoleń, ponad 9 projektów i zadań , status absolwentów IIIT-B, praktyczne, praktyczne projekty zwieńczenia i pomoc w pracy z najlepszymi firmami.

Wyląduj na swojej wymarzonej pracy

AKTUALIZACJA I DYPLOM PG IIIT-BANGALORE W ROZWOJU OPROGRAMOWANIA

Zapisz się dzisiaj