Budowanie aplikacji Angular4 przy pomocy Angular CLI

Bartosz Szewczyk

Budowanie aplikacji Angular4 przy pomocy Angular CLI
6 czerwca, 2017 Katarzyna Sobczak

Budowanie aplikacji Angular4 przy pomocy Angular CLI

Angular4 to TypeScript’owy open-source’owy Framework do tworzenia webowych aplikacji stworzony przez Google. W porównaniu do AngularaJS, Angular4 został napisany całkowicie od nowa.

Najnowszą wersją jest wersja 4, udostępniona 23 marca 2017 roku. W porównaniu do AngularaJS, Angular4 został napisany całkowicie od nowa. Dzięki temu Angular stał się bardzo potężnym narzędziem nie tylko do tworzenia aplikacji webowych, ale i desktopowych.

W poniższym artykule przedstawię jak w łatwy i przejrzysty sposób stworzyć swoją pierwszą aplikację webową dzięki narzędziu Angular CLI.

Instalacja

Zanim rozpoczniemy tworzenie aplikacji Angularowej musimy się upewnić, że mamy wszystkie niezbędne narzędzia.

  • Node.JS i npm – Node.JS to środowisko do uruchamiania aplikacji internetowych a npm to menadżer pakietów. To oprogramowanie jest darmowe i można je pobrać ze strony producenta – nodejs.org.
  • Visual Studio Code – nowoczesny edytor programistyczny stworzony przez firmę Microsoft. Dzięki swojej nowoczesności i lekkości idealnie się sprawdzi przy tworzeniu stron internetowych. Jest on darmowy i można go pobrać ze strony code.visualstudio.com.
  • Angular CLI – pakiet z npm, dzięki niemu proces tworzenia szkieletu aplikacji Angularowej i zarządzania kodem stał się niezwykle łatwy. Za pomocą jednej komendy z łatwością będziemy mogli wygenerować nową aplikacje, komponent, itp. Więcej informacji można znaleźć na stronie projektu cli.angular.io.

Po instalacji Node.JS i Visual Studio Code trzeba jeszcze zainstalować Angular CLI. W tym celu uruchamiamy wiersz poleceń, wpisujemy komendę i wciskamy enter.


npm install -g angular-cli

Każemy menadżerowi pakietów npm zainstalować pakiet angular-cli w trybie globalnym. W tej chwili dysponujemy w pełni przygotowanym środowiskiem, można przejść do tworzenia naszej Angularowej strony internetowej.

Tworzenie aplikacji

Aby utworzyć nową aplikacje przy pomocy Angular CLI, należy uruchomić konsolę i wpisać polecenie:


ng new MOJA#NAZWA#APLIKACJI

W miejsce MOJA#NAZWA#APLIKACJI wstawiamy nazwę tworzonej aplikacji (np. apnpromise). Po wykonaniu tego polecenia zostanie wygenerowana nowa aplikacja (zob. rys. 1.).

Rysunek 1.

Najlepszą metodą do przeanalizowania wygenerowanego projektu jest użycie Visual Studio Code. Należy przy pomocy eksploratora plików udać się do folderu, gdzie znajduje się folder z nowopowstałym projektem. Następnie klikamy prawym klawiszem myszki i klikamy Open with Code (zob. rys. 2.).

Rysunek 2.

Rysunek 3.

W wygenerowanych folderach znajdują się kody źródłowe aplikacji (komponent, widok i style), pliki testów i zasoby serwera. Punktem startowym stworzonej aplikacji są pliki:

  • src/index.html – widok startowy
  • src/main.ts – plik odpowiedzialny za import głównego modułu aplikacji
  • src/app/app.component.ts – główny komponent naszej aplikacji

Jak widać, przy pomocy jednej komendy możemy z łatwością stworzyć szkielet aplikacji gotowy do przyszłego rozwoju i dystrybucji.

Uruchamianie

Aby uruchomić utworzoną aplikację należy przejść do folderu projektu za pomocą polecenia:


cd MOJA#NAZWA#APLIKACJI

Następnie wpisujemy polecenie, które uruchomi naszą aplikację w trybie developerskim:


npm run start

Po uruchomieniu w adresie http://localhosts:4200 zostanie uruchomiona aplikacja

Rysunek 4.

Dodawanie nowych elementów do projektu

Przy pomocy narzędzia Angular CLI w bardzo łatwy sposób można dodać do naszej angularowej aplikacji następujące elementy:

  • component
  • service
  • class
  • interface
  • pipe
  • enum

Aby dodać nowy element do budowanej aplikacji należy być w katalogu projektu i wpisać w konsoli komendę:


npm run ng generate TYP#ELEMENTU NAZWA#ELEMENTU

Przykładowo, jeżeli chcemy dodać do naszej aplikacji komponent o nazwie duit, musimy wpisać w konsoli i zatwierdzić:


npm run ng generate component duit

Po poprawnym wykonaniu tego polecenia powinniśmy otrzymamy informacje o dodaniu 4 nowych plików do projektu i aktualizacji pliku app.module.ts (zob. rys. 5.).

Angular CLI stworzył za nas klasę komponentu, plik css ze stylami, plik spec.ts z testami oraz plik widoku html. Dodatkowo zarejestrował nowostworzony komponent poprzez dodanie do pliku app.module.ts referencji do komponentu w tablicy declarations.

Następnie po dodaniu w widoku app.component.html selektora <app-duit></app-duit> (jest on zdefiniowany w pliku duit.component.ts i można go tam zmienić) i uruchomieniu aplikacji widać, że komponent działa poprawnie (zob. rys. 6.).

Budowanie wersji produkcyjnej

Aby skompilować projekt do finalnej produkcyjnej wersji należy użyć polecenia:


ng build --target=production

Po zakończeniu procesu kompilacji w folderze głównym naszego projektu zostanie utworzony katalog dist, w którym będzie znajdować się nasza skompilowana angularowa aplikacja (zob. rys. 7.).

Podsumowanie

W artykule opisałem jak w prosty i przejrzysty sposób stworzyć i rozwijać aplikacje wykorzystującą Angulara4 przy pomocy narzędzia Angular CLI. Dzięki korzystaniu z Angular CLI możemy być pewni, że:

  • Tworzenie nowych aplikacji będzie bardzo szybkie i łatwe
  • Nasze projekty będą mieć zestandaryzowaną strukturę plików
  • Generowane elementy aplikacji stosują wzorce projektowe i dobre praktyki pisania kodu
  • Korzystamy z trendów technologicznych

Podziel się

Autor: Bartosz Szewczyk

Bartosz Szewczyk

Bartosz Szewczyk

Zespół: Apps

Ostatnie artykuły autora

Rozliczanie przebiegów aut w przedsiębiorstwie w 5 minut

Rozliczanie przebiegów aut w przedsiębiorstwie w 5 minut

Bartosz Szewczyk przedstawia rozwiązanie, które pomaga zarządzać w samochodami w przedsiębiorstwie, zapewniając komfort i szybkość pracy użytkowników.

Synchronizator poczty z Exchange do SharePoint

Synchronizator poczty z Exchange do SharePoint

W artykule przedstawiono rozwiązanie pozwalające na synchronizację wiadomości w czasie rzeczywistym z Exchange do SharePoint w celu dostarczenia użytkownikowi dodatkowych, niedostępnych w programie Outlook możliwości pracy nad załącznikami oraz przyspieszenie dostępu do danych.

Routing w Angular

Routing w Angular

Routing umożliwia nawigowanie między komponentami w aplikacji bez jej przeładowywania. W artykule przestawiam, jak we frameworku Angular4 zaimplementować przykładowy routing.

Zarejestruj się i przetestuj APN Meeting Room

Wypróbuj system rezerwacji sal w praktyce, na Twojej infrastrukturze.
Wersja demonstracyjna umożliwia Ci instalację oprogramowania na 3 urządzeniach.

Chcę otrzymywać treści marketingowe od A.P.N. Promise S.A. drogą elektroniczną
Chcę otrzymywać treści marketingowe od A.P.N. Promise S.A. telefonicznie

Administratorem danych osobowych gromadzonych z wykorzystaniem formularza jest A.P.N. Promise S.A. z siedzibą w Warszawie. Kontakt z osobą odpowiedzialną za ochronę danych osobowych jest możliwy za pośrednictwem adresu e-mail: iodo@promise.pl. Podane dane będą przetwarzane w zakresie niezbędnym do realizacji określonego żądania zgodnie z art. 6 ust. 1 lit. b RODO, w zakresie niezbędnym dla prawidłowej realizacji żądania oraz oferowania i świadczenia usług, marketingu produktów i usług własnych oraz przeprowadzenia ankiet i oceny satysfakcji zgodnie z art. 6 ust. 1 lit. f RODO przez okres niezbędny dla realizacji celów oraz w przypadku wyrażenia zgody na podstawie art. 6 ust. 1 lit. a RODO w celu dostarczenia treści marketingowych środkami komunikacji elektronicznej lub za pomocą urządzeń telefonicznych.

Przysługuje Ci prawo do żądania dostępu do danych osobowych, ich sprostowania, usunięcia lub ograniczenia przetwarzania, jak również prawo sprzeciwu wobec przetwarzania, prawo do przenoszenia danych, a także prawo złożenia skargi do organu nadzorczego, którym w Polsce jest Prezes Urzędu Ochrony Danych Osobowych. Podanie danych jest dobrowolne, jednak niezbędne dla realizacji powyżej wskazanych celów. Odbiorcami danych mogą być podmioty lub osoby obsługujące administratora w zakresie w zakresie hostingu, komunikatorów internetowych, usług IT, księgowości, archiwizacji. Więcej informacji w Polityce Prywatności oraz Regulaminie.

Register and test the APN Meeting Room booking system.

Registering and installing the trial version you are allowed to install the software on 3 devices.

I want to receive marketing content from A.P.N. Promise S.A. electronically
I want to receive marketing content from A.P.N. Promise S.A. by phone

The data controller of personal data collected using the form is A.P.N. Promise S.A. with its registered office in Warsaw. Contact with the person responsible for the personal data protection is possible via following e-mail address: iodo@promise.pl. The given data shall be processed to the extent necessary to carry out specified request in accordance with art. 6(1)(b) of GDPR and to the extent necessary for the correct realization of the request and offer and provision of services, own product and services marketing and conducting surveys and satisfaction ratings in accordance with art. 6(1)(f) of GDPR for the period necessary to achieve the purposes and in the event of consent in accordance with art. 6(1)(a) of the GDPR to provide marketing content by electronic means or by telephone devices.

You have the right to request access to your personal data, rectification, deletion or limitation of processing, as well as the right to object to processing, the right to transfer data and the right to lodge a complaint with a supervisory authority, i.e. the President of the Personal Data Protection Office in Poland. Providing data is voluntary but necessary for the realization of the above-mentioned purposes. Recipients of data may be entities or persons servicing the data controller in the field of hosting, instant messengers, IT services, accounting, archiving. More information in the Privacy Policy and Regulations.

Cybersecurity w obszarze zarządzania zasobami oprogramowania

Napisz do nas, a skontaktujemy się z Tobą i bezpłatnie porozmawiamy o Twoim poziomie cyberbezpieczeństwa w obszarze SAM.

 

Administratorem danych gromadzonych z wykorzystaniem formularza jest A.P.N. Promise S.A. Podane przez Ciebie dane będą przetwarzane w zakresie niezbędnym do podjęcia kontaktu lub realizacji określonego żądania zgodnie z art. 6 ust. 1 lit. b RODO przez okres niezbędny dla realizacji Twojego zgłoszenia. Wszelkie informacje w zakresie przetwarzania podanych przez Ciebie w formularzu danych oraz posiadanych uprawnieniach znajdziesz w Polityce prywatności. Kliknij i dowiedz się więcej jeżeli informacje podane powyżej nie są dostatecznie jasne!

Zostaw adres mailowy i nie przegap kolejnego szkolenia!

[contact-form-7 404 "Not Found"]