Angular 2 – Angular CLI – pierwsze kroki

Szybki i przyjemny frontend aplikacji internetowej, to marzenie wielu deweloperów. Na przeciw oczekiwaniom programistów wyszedł Google, z produktem Angular CLI. Dedykowany command-line interface ma jedno zasadnicze zadanie, przyspieszyć i maksymalnie uprościć pracę w standardowych czynnościach związanych z tworzeniem i zarządzaniem projektem.

Instalacja Angular CLI

Pierwszy etap pracy z Angular CLI, to globalne zainstalowanie paczki @angular/cli przez npm:

npm install -g @angular/cli

Jeżeli wszystko przebiegło pomyślnie, odpalenie komendy ng help powinno wyświetlić obszerną pomoc. Już na tym etapie możemy zauważyć, że prefiks ng został zarezerwowany, właśnie na potrzeby Angular CLI.

Pierwszy projekt

Gdy mamy zainstalowaną paczkę @angular/cli, nic nie stoi na przeszkodzie, by szybko stworzyć własny projekt. Do tego celu wykorzystamy komendę ng new my_project, gdzie zamiast my_project podajemy nazwę naszego projektu.

Przy tej okazji warto zaznaczyć, że Angular CLI ma wobec nas kilka wymagań odnośnie nazwy projektu:

New project names must start with a letter, and must contain only alphanumeric characters or dashes. When adding a dash the segment after the dash must also start with a letter.

Nazwa projektu musi zaczynać się od litery, może się składać tylko ze znaków alfanumerycznych lub myślników. Po myślniku CLI oczekuje wyłącznie litery.

Angular CLI - new project

Jeżeli wszystko przebiegło w porządku nasz projekt powinien wyglądać mniej więcej tak:

Tip

Angular CLI domyślnie tworzy nam style w formacie CSS. Jeżeli wolimy pracować np z językiem SASS, nic nie stoi na przeszkodzie. Możemy to ustalić już na poziomie tworzenia projektu deklarując parametr --style. Pełną listę opcjonalnych parametrów znajdziecie w oficjalnej dokumentacji.

Uruchomienie serwera

Aby uruchomić stworzone przez nas środowisko, należy wpisać w konsoli komendę ng serve. Nasz projekt zostanie zbudowany, a aplikacja zostanie wystawiona pod zdefiniowanym przez nas adresem (domyślnie localhost:4200).

Angular CLI - server run

Aplikacja będzie działać do momentu wyłączenia jej przez nas.

Tworzenie komponentu / modułu / dyrektywy / etc

Sercem stworzonego przez nas projektu jest folder src/app. Początkowo znajduje się tam app.component.tsapp.module.ts oraz plik z widokiem, style oraz testy.

Dodanie nowego komponentu czy modułu jest banalnie proste. Wystarczy, że w konsoli wpiszemy ng generate lub w skrócie ng g, a następnie nazwę tego, co chcemy stworzyć.

Angular CLI rozróżnia następujące funkcjonalności:

Component ng g component my-new-component
Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g service my-new-service
Class ng g class my-new-class
Guard ng g guard my-new-guard
Interface ng g interface my-new-interface
Enum ng g enum my-new-enum
Module ng g module my-module

 

Podsumowanie

Angular CLI to przyjazne narzędzie, które wspomaga pracę nad frontendem aplikacji tworzone w Angularze. Jest bardzo intuicyjny i wygodny w użytkowaniu. Największego boosta dostajemy na samym początku, kiedy wszystko dostajemy podane na tacy.

Angular CLI - working app

 

Dawid Ryłko

Lubię dobre filmy, gry oraz kawę. W pracy front-end, po godzinach wszystko inne.

 
  • Wygląda na fajne narzędzie. Natomiast kiedy widzę ile dziś w wygenerowanym szkielecie front-endowej aplikacji jest różnych zależności od narzędzi i bibliotek to jestem trochę przerażony. Ledwo udało się na przestrzeni ostatnich lat pozbyć złożoności związanej z różnicami w przeglądarkach (na szczęście IE8 przechodzi do historii), to wkracza złożoność związana z różnorodnością urządzeń klienckich, wariantami JavaScriptu, starością protokołu HTTP (potrzeba bundlingu, minifikacji).

    Taka już chyba jest natura pisania front-endu i jego piękno 😉

  • Zdecydowanie złożoność jest ogromna… ale dzięki Angular CLI nie musimy się zajmować konfiguracją i składaniem tego w całość. Zostaje więcej czasu na bardziej przyjemne czynności.

Współpraca:
Polski Front-End