Jak uruchomić projekt Angular [Wyjaśnienie krok po kroku]

AngularJS to pozycja obowiązkowa dla każdego programisty full-stack. Jest to kluczowe dla programowania front-end, ponieważ upraszcza korzystanie z dyrektyw HTML. Tworzenie aplikacji internetowej staje się znacznie łatwiejsze, gdy używasz Angulara. W tym artykule omówimy, jak zacząć korzystać z Angulara. Omówimy, jak zainstalować Angular i jak uruchomić projekt Angular.

Angular CLI: krótkie wprowadzenie

Jeśli chcesz pracować nad projektami Angular, powinieneś mieć Angular CLI. Jest to oficjalne narzędzie Angulara do pracy nad projektami Angulara i ich inicjalizacji. Angular CLI zmniejsza wiele kłopotów związanych z procesem inicjalizacji. Nie musisz wykonywać wielu konfiguracji i kompilacji narzędzi, aby rozpocząć projekt, jeśli używasz interfejsu wiersza polecenia Angular.

Angular CLI pozwala rozpocząć projekt za pomocą tylko jednego polecenia. Za pomocą innego polecenia możesz obsłużyć projekt za pomocą lokalnego serwera programistycznego. Angular CLI działa na Node.js. Tak więc, aby uruchomić Angular CLI w swoim systemie, najpierw powinieneś mieć Node.js w swoim systemie.

Node.js jest przeznaczony dla serwerów i do tworzenia aplikacji po stronie serwera, podczas gdy Angular to rozwiązanie frontendowe. Node.js pomaga tylko z Angular CLI.

Jak zainstalować Angulara?

Pierwszy krok

Zanim zainstalujesz Angular w swoim systemie, powinieneś mieć w swoim systemie Node i npm. Możesz użyć Node Version Manager, aby go zainstalować, lub możesz użyć oficjalnego menedżera pakietów swojego systemu operacyjnego. Masz również możliwość zainstalowania Node z jego strony internetowej. Zalecamy zainstalowanie go ze strony internetowej, ponieważ jest to szybkie i proste. Wystarczy przejść do strony pobierania node.js .

Drugi krok

Gdy znajdziesz się na stronie pobierania node.js, wybierz wersję, której potrzebujesz zgodnie z systemem operacyjnym, a następnie postępuj zgodnie z krokami określonymi w kreatorze instalacji. Jeśli już wcześniej zainstalowałeś node.js w swoim systemie, możesz pominąć ten krok (i poprzedni).

Trzeci krok:

Aby sprawdzić, czy Node jest zainstalowany na twoim urządzeniu, otwórz wiersz polecenia i uruchom następujące polecenie:

$ węzeł -v

Pokazuje aktualnie zainstalowaną wersję Node w twoim systemie.

Trzeci krok

Po sprawdzeniu, czy masz zainstalowany Node w swoim systemie, możesz zainstalować Angular na swoim urządzeniu, uruchamiając następujące polecenie w wierszu poleceń:

$ npm install @angular/cli

Po uruchomieniu powyższego polecenia, Angular CLI zainstaluje się na twoim urządzeniu. Ukończyłeś część 'jak zainstalować Angular'.

Dowiedz się: Wynagrodzenie programisty Angular w Indiach: dla początkujących i doświadczonych

Jak uruchomić projekt Angular?

Ponieważ zainstalowaliśmy Angular w naszym systemie, skupiliśmy się teraz na rozpoczęciu nowego projektu.

Pierwszy krok

Utworzylibyśmy obszar roboczy i aplikację startową, uruchamiając następujące polecenie:

ng nowych kanciastych-wycieczek-bohaterów

Dodaliśmy kanciastą wycieczkę bohaterów jako nazwę naszego obszaru roboczego. Polecenie „ng new” poprosi Cię o funkcje, które chcesz dodać w aplikacji startowej. Ponieważ jest to samouczek, wybierzemy wartości domyślne i przejdziemy dalej, naciskając Return lub Enter.

Drugi krok

Teraz Angular CLI zainstalował wymagane pakiety i zależności npm. Będziesz mieć gotową do użycia „aplikację powitalną” i nowy obszar roboczy. Będziesz mieć również folder główny o tej samej nazwie co aplikacja (angular-tour-of-heroes) i szkieletowy projekt aplikacji.

W tym kroku musimy obsłużyć aplikację. Zrobimy to, przechodząc do katalogu obszaru roboczego i uruchamiając aplikację:

cd angular-wycieczka-bohaterów

ng służyć –otwarty

Polecenie „ng serve” utworzyłoby aplikację, uruchomiło serwer programistyczny, zaopiekowało się plikami źródłowymi projektu i odbudowało aplikację podczas modyfikowania niezbędnych plików.

Trzeci krok

Jeśli chcesz zmodyfikować aplikację, musisz przejść do folderu src/app w swoim IDE lub edytorze. Zmodyfikujemy naszą aplikację, zmieniając komponenty tego projektu. Komponenty to elementy składowe aplikacji Angular. Obsługują prawie wszystkie podstawowe funkcje projektu Angular, takie jak wyświetlanie danych, reagowanie na dane wejściowe itp.

W tym kroku otwórz swoje IDE i przejdź do katalogu projektu i znajdź pliki składowe swojego projektu:

• app.komponent.ts
• app.component.html
• app.komponent.css

Pierwszy plik to kod klasy i jest oparty na TypeScript, drugi plik to szablon w HTML, a ostatni ma prywatne style CSS.

Czwarty krok

Nasz projekt jest skonfigurowany i wszystkie pliki mamy gotowe. Na tym etapie spersonalizujemy go, dodając do niego tytuł. Aby zmienić tytuł projektu Angular, przejdź do pliku app.component.ts i usuń obecny szablon domyślny. Angular CLI automatycznie generuje szablon. Możesz go zastąpić następującym:

<h1>{{Twój tytuł}}</h1>

Nawiasy klamrowe to składnia wiązania interpolacji. Możesz zastąpić „Twój tytuł” ​​żądanym tytułem. Po wprowadzeniu żądanego tytułu odśwież przeglądarkę, a aplikacja będzie miała nowy tytuł.

Piąty krok

Personalizacja aplikacji byłaby niepełna bez jakiejkolwiek stylizacji. W tym kroku zmodyfikujemy styl naszej aplikacji Angular. Angular CLI generuje pusty style.css dla Twojej aplikacji podczas tworzenia nowego projektu. Tutaj możesz wprowadzić żądane style.

Otwórz plik src/styles.css w swoim środowisku IDE i zacznij modyfikować styl aplikacji. Zmodyfikuj style aplikacji i zapisz zmiany. Gdy odświeżysz przeglądarkę, zobaczysz zmiany w swojej aplikacji.

Zamówienie: Jak zaimplementować paginację w Angular JS?

Dowiedz się więcej o rozwoju kątowym i pełnym stosie

Teraz wiesz, jak zainstalować Angular w swoim systemie i jak uruchomić projekt Angular. Gdy już to zrozumiesz, zobaczysz, że praca z Angularem jest znacznie łatwiejsza niż myślałeś. Przy odrobinie doświadczenia możesz rozpocząć pracę nad front-endowymi projektami programistycznymi w Angularze.

Jeśli chcesz dowiedzieć się więcej o tworzeniu stron internetowych Angular i front-end, oto kilka dodatkowych zasobów:

• Przewodnik po CV dla programistów front-end
• 10 najlepszych umiejętności, aby zostać programistą front-end
• Pomysły na projekty front-end

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

Jeśli chcesz dowiedzieć się więcej o tworzeniu pełnego stosu oprogramowania, 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.