Angular CLI

Angular CLI jest narzędziem służącym do tworzenia aplikacji Angular i zarządzania nią. Udostępnia możliwości:

• Stworzenie projektu od zera
• Stworzenie elementów frameworku (komponentów, routingu etc).
• Obsługę aplikację (uruchamianie testowe)
• Uruchamianie testów jednostkowych i testów od końca do końca (e2e).

https://cli.angular.io/

Konfiguracja

Angularny interfejs CLI jest dystrybuowany tylko przez npm i wymaga wersji Node 4 lub wyższej. Instalujemy go za pomocą następującego polecenia:

npm install -g angular-cli

Tworzenie nowej aplikacji

Użyj komendy ng new [nazwa-aplikacji], aby utworzyć nową aplikację. Spowoduje to wygenerowanie podstawowej aplikacji w folderze podanej nazwy aplikacji. Aplikacja ma wszystkie dostępne funkcje do pracy z poleceniami CLI. Utworzenie aplikacji może zająć kilka minut, ponieważ npm będzie musiał zainstalować wszystkie zależności. Katalog jest automatycznie konfigurowany jako nowe repozytorium git . Jeśli nie używasz git, po prostu usuń folder .git i plik .gitignore .

Konfiguracja plików i folderów

Wygenerowany folder aplikacji będzie wyglądał następująco:

Konfiguracja aplikacji jest przechowywana w różnych miejscach, niektóre znajdują się w folderze config ( na przykład konfiguracja testów), a niektóre są przechowywane w katalogu głównym projektu (informacje o lintingu i informacje o kompilacji). CLI przechowuje źródła aplikacji w folderze src a kod aplikacji Angular w folderze src/app . Pliki i foldery wygenerowane przez CLI będą zgodne z oficjalnym przewodnikiem po stylu.

Uwaga!: CLI opiera się na niektórych ustawieniach zdefiniowanych w plikach onfiguracyjnych, aby móc wykonywać polecenia. Zachowaj ostrożność podczas ich modyfikowania, szczególnie plik package.json.

CLI zainstalował wszystko, czego potrzebuje podstawowa aplikacja Angular do prawidłowego działania. Aby upewnić się, że wszystko zostało poprawnie uruchomione i zainstalowane, możemy uruchomić serwer.

Uruchamianie aplikacji jako serwera

Interfejs CLI umożliwia obsługę aplikacji z przeładowaniem na żywo (każda zmiana kodu powoduje przeładowanie). Aby uruchomić aplikację wykonaj polecenie: ng serve. Spowoduje to kompilację aplikacji i skopiowanie wszystkich plików specyficznych dla aplikacji do folderu dist.

Domyślnie ng serve obsługuje aplikację lokalnie na porcie 4200 (http://localhost:4200\, ale można to zmienić za pomocą argumentu wiersza poleceń:ng serve --port = 8080.

Tworzenie komponentów

Interfejs CLI może tworzyć komponenty Angular za pomocą polecenia generate:

ng generate component [nazwa-komponentu]

Wykonanie polecenia tworzy folder [nazwa-komponentu] w ścieżce src/app projektu lub bieżącej lokalizacji (w której polecenie zostanie wykonane) - o ile jest to folder podrzędny projektu. Folder zawiera następujące elementy:

• [nazwa-komponentu] .component.ts plik klasy komponentów
• [nazwa-komponentu] .component.css do stylizacji komponentu
• [component-name] .component.html wzorzec komponentu w html
• [nazwa-komponentu] .component.spec.ts testy dla komponentu
• index.ts, plik który eksportuje komponent

Tworzenie tras

Komenda ng g m [rmodul] --routing utworzy moduł (o przykładowej nazwie [rmodul]) i przygotuje dla niego trasy. Więcej szczegółów: https://angular.io/tutorial/toh-pt5

Tworzenie innych obiektów

Interfejs CLI może tworzyć inne obiekty Angular, takie jak usługi, potoki i dyrektywy, za pomocą polecenia generate.

ng generate [encja] [nazwa encji]

To polecenie tworzy encję w src/app/[nazwa-encji].[Encja].ts wraz z plikiem spec (do testów) katalogu src/app lub bieżącej lokalizacji (w której polecenie zostanie wykonane) - o ile jest to folder podrzędny projektu. CLI zapewnia gotowe wzorce dla następujących elementów:

Testowanie

Aplikacje generowane przez CLI integrują testy automatyczne. CLI robi to za pomocą systemu uruchamiania testów Karma.

Testy jednostkowe

Aby wykonać testy jednostkowe, uruchom ng test. Spowoduje to uruchomienie wszystkich testów dopasowanych przez plik konfiguracyjny Karmy (config/karma.conf.js). Jest on skonfigurowany tak, aby stosował się do wszystkich plików TypeScript, które domyślnie kończą się na .spec.ts.

Testy end-to-end

Testy end-to-end można wykonać, uruchamiając ng e2e. Angular CLI używa framworka protractor. (https://www.protractortest.org/\. Domyślnie korzysta on z adresu localhost:4200. Można to zmienić w ustawienia konfiguracyjnych e2e/protractor.conf.js.

Linting (doskonalenie)

Angular CLI ma wbudowane linting. Domyślnie jego konfiguraca tslint.json . Linting można wykonać, uruchamiając polecenie ng lint.

Więcej informacji na temat reguł tslint znajdziesz w : https://palantir.github.io/tslint/rules/.

Podpowiedź do CLI

Jedną z zalet korzystania z Angular CLI jest to, że automatycznie konfiguruje wiele przydatnych narzędzi, z których można korzystać od razu. Aby uzyskać więcej informacji na temat opcji dla każdego zadania, użyj ng --help.

Budowanie

ng build zbuduje twoją aplikację (i zminimalizuje twój kod) i umieści ją w domyślnej ścieżce dist/.

Deploy

of deploy jest wdrażany na stronach GitHub lub Firebase.

Integracja istniejącej aplikacji

Aplikacje, które zostały utworzone bez interfejsu CLI, można zodyfikować tak, by móc korzystać z tego programu. Odbywa się to poprzez przejście do istniejącego folderu aplikacji i uruchomienie ng init.

Ponieważ struktura folderów dla istniejącej aplikacji może nie być zgodna z formatem utworzonym przez interfejs CLI, polecenie init ma kilka opcji konfiguracyjnych.

• --source-dir identyfikuje względną ścieżkę do plików źródłowych (domyślnie = src)
• --prefix identyfikuje ścieżkę w katalogu źródłowym, w którym znajdują się pliki aplikacji Angular (domyślnie = aplikacja)
• --style określa ścieżkę, w której znajdują się dodatkowe pliki stylu (domyślnie = css).