Angular CLI

Co to jest Angular CLI:
Angular CLI to narzędzie wiersza poleceń, stworzone po to aby ułatwić konfigurację nowych projektów tworzonych w najnowszych wersjach angulara.

Narzędzie to, przy pomocy jednej komendy tworzy projekt, w którym wszystko co wymagane do stworzenia nowej aplikacji jest już skonfigurowane.


Zalety Angular CLI
dostajemy za darmo:

• kompletny szkielet aplikacji
• działający projekt ze skonfigurowaną najnowszą wersją Angulara
• kompletne skrypty budujące z możliwością
  • uruchomienia buildu produkcyjnego
  • uruchomienia aplikacji w trybie developerskim
  • uruchomienia testów jednostkowych i testów e2e
• wsparcie dla kompilowania budowania CSS’ów na bazie scss/sass/less/stylus

W tym zaawansowane techniki budowania aplikacji:

• bundlowanie kodu, w tym obsługa podziału na części wspólne i ładowane asynchronicznie
• tree-shaking
• uglifying

Angular CLI, poza wygenerowaniem i budowaniem projektu, pomaga też w codziennej pracy, zdejmując z programisty typowe zadania związane z boilerplate.

Automatycznie wygenerujemy szablony dla wszystkich składowych frameworka:

• module
• component
• directive
• service
• pipe
• class
• interface
• enum
• guard
• appShell
• application
• library
• universal

Użycie generatora pozwala szybko stworzyć komplet zasobów.
Przykładowo stworzenie nowego komponentu wygeneruje dla nas:

• klasę komponentu (*.ts)
• szablon html komponentu (*.html)
• plik stylizacji komponentu (*.html)
• plik z testami komponentu (*.spec.ts)
• podpięcie komponentu pod moduł aplikacji

Wykorzystanie narzędzia typu Angular CLI pozwala nam na:

• korzystanie z najnowszych technologii
• ustandaryzowanie struktury i konfiguracji projektu
• zrzucenie utrzymania procesu budowania na community
• szybkie wsparcie dla nowych wersji frameworka przy minimalnym koszcie
• stosowanie wzorcowej/zalecanej konfiguracji
• szybkie uruchamianie nowych projektów
• stosowanie podejścia convention over configuration

Wymagania wstępne

• node (at least version 4.0)
• npm (at least version 3.0)

Instalacja
Do działania angular-cli potrzebujemy zainstalowanego node’a (>= 4.x.x) z npm’em (>= 3.x.x).

npm install -g angular-cli

Strona główna

• https://cli.angular.io/
• https://angular.io/cli 

Github

• https://github.com/angular/angular-cli

Dokumentacja

• https://github.com/angular/angular-cli/wiki
• https://www.npmjs.com/package/@angular/cli
• https://keyholesoftware.com/2017/04/24/getting-started-with-angular-cli-commands/

Angular CLI commands

• add - add support for a library to your project.
• build (b) - builds your app and places it into the output path (dist/ by default).  
• config - get/set configuration values.
• doc (d) - opens the official Angular API documentation for a given keyword.  
• e2e (e) -
• generate (g) - generates and/or modifies files based on a schematic.  
• help - displays help for the Angular CLI.  
• lint (l) - lints code in existing project.  
• new (n) - creates a new directory and a new Angular app.  
• run - runs Architect targets.
• serve (s) - builds and serves your app, rebuilding on file changes.  
• test (t) - run unit tests in existing project.
• update - updates your application and its dependencies.
• version (v) - outputs Angular CLI version.
• xi18n - extracts i18n messages from source code.

Nowy projekt
Komenda: ng new [name] [options]



Struktura wygenerowanego projektu

Dla wersji Angular CLI: 6.2.4
(komenda ng version)

--------------------------

• node_modules
  Folder utworzony przez node.js. Przechowuje zależności npm zainstalowane dla naszego projektu. Folder ten potrafi zajmować naprawdę dużo miejsca. Nie wrzucaj go do repozytorium! Zależności projektu te są przechowywane w pliku package.json.
• src
  pliki źródłowe dla naszego projektu
• app
  zawiera nasze moduły i komponenty.
  Na początku Angular CLI generuje cztery pliki dla naszego pierwszego komponentu (app.component) i plik app.module.ts.
  app.module.ts
  key application file, here we import/declare all components that make up the application, we inform which component is the base and we report modules and services.
  Our first component consists of four files:
  
  

  app.component.ts
  the basis of each component, here we define its selector, HTML template and CSS styles assigned to it, as well as indicate, for example, from which elements of the main library @ angular / core our component will use.
  Ts files are responsible for the so-called component logic.
  
  app.component.html
  html template of our component, together with assigned css styles, is responsible for View (see MVC pattern) of our component
  
  app.component.css
  css style template for a component, unlike the styles defined in the styles.css file, these rules will only apply to this component
  
  app.component.spec.ts
  for testing, we'll skip this thread for now
  
  
• assets
  can contain any static files from images, fonts to video and audio.
• environments
  store environment specific configuration like database credentials or server addresses. By default there are 2 files, one for production and on for development.
• browserslist
  config to share target browsers and Node.js versions between different front-end tools.
• favicon.ico
  is a file containing one or more small icons, associated with a particular website or web page.
• karma.conf.js
  karma configuration file. File used after using the CLI ng test command. Karma is test runner for tests written in Jasmine.
• index.html
  simple HTML file. If you open it you will note that there are no references to any stylesheet (CSS) nor JS files. This is because all dependencies are injected during the build process.
• main.ts
  is a starting point for our app. This is where we are bootstrapping our first and only module - AppModule.
• polyfils.ts
  polyfils files are used for the compiler to compile our Typescript to specific JavaScript methods which can be parsed by different browsers.
• styles.css
  global stylesheet file by default, included to our project.
• test.ts
  configuration file for Karma. Karma is a testing tool shipped along with Angular, we will cover it one of the next lessons.
• tsconfig.app.json
  plik konfiguracyjny dla projektu TypeScript’owego
• tsconfig.spec.json
  plik konfiguracyjny dla testów
• tslint.json
  TypeScript version of JsLint. Linty are programs that check your code in terms of: readability, maintain, functional errors.

• .editorconfig
  konfiguracja Visual Studio Code, pozwala określić np. kodowanie znaków i ilość wcięć w projekcie
• .gitignore
  mówi o tym, które pliki nie powinny wylądować w repozytorium
• angular.json - (stara nazwa angular-cli.json) główny plik konfiguracyjny projektu (see Angular CLI Config Schema)
• package-lock.json
  plik generowany automatycznie, gdy npm modyfikuje strukturę pakietów w NODE_MODULES lub pliku package.json, przechowuje informacje o wygenerowanej strukturze.
• package.json
  zbiór wszystkich paczek, zależności wykorzystywanych w projekcie występujących w folderze node_modules
• README.md
  Najważniejsze informacje na temat projektu, choćby jak go uruchomić, jak przeprowadzać testy. Ogólnie informacje od developerów dla developerów.
  Zawartość README.md ląduje na stronie głównej projektu na Githubie.
• tsconfig.json
  Obecność pliku tsconfig.json w katalogu wskazuje, że katalog jest katalogiem głównym projektu TypeScript. Plik tsconfig.json określa pliki root i opcje kompilatora wymagane do kompilacji projektu.
• tslint.json
  konfiguracja TSLint - Codelyzer, Plik wykorzystywany przy wykonywaniu polecenia ng lint.

See: https://www.nettecode.com/angular-cli-struktura-projektu/

Uruchomienie

1. Wchodzisz do folderu, w którym znajduje się projekt:
   
   cd NAZWA_PROJEKTU
2. wywołujesz polecenie
   
   ng serve -o
3. Aplikacja (domyślnie) zostaje uruchomiona pod adresem:
   
   http://localhost:4200/

Aby otworzyć apke na innym porcie:

ng serve --port 4300

Zatrzymanie CTRL + C   or   CTRL + SHIFT + C



Uruchamianie testów
Zarówno testy jednostkowe, jak i end-to-end możemy spokojnie uruchamiać za pomocą CLI.
Przed uruchomieniem testów należy wcześniej uruchomić samą aplikację (ng serve).

• Uruchomienie zdefiniowanych domyślnie testy Karmy.
  ng test

• Testy funkcjonalne uruchamiamy poleceniem:
  
  ng e2e

Materiały:

• https://www.nettecode.com/angular-cli-struktura-projektu/
• https://www.consdata.pl/blog/7-szybki-start-z-angular-cli
•  https://medium.freecodecamp.org/quick-guide-to-understanding-and-creating-angular-6-apps-2f491dffca1c
• https://medium.com/dailyjs/angular-cli-6-under-the-hood-builders-demystified-f0690ebcf01
• https://www.technouz.com/4772/angular-6-app-structure-with-multiple-modules/ 
• https://devenv.pl/angular-podstawowe-informacje/ 

https://www.google.com/search?q=Angular+CLI&lr=lang_pl&client=firefox-b&tbs=lr:lang_1pl&ei=TeC0W-6fAoGsswGNzq3IAQ&start=20&sa=N&biw=1760&bih=864

https://www.google.com/search?q=angular+cli+struktura+projektu&client=firefox-b&ei=VXm7W7_7EqjsrgThwYrABQ&start=20&sa=N&biw=1760&bih=865

https://www.google.com/search?q=Angular+6+Project+Structure&ie=utf-8&oe=utf-8&client=firefox-b

https://www.promise.pl/blog/budowanie-aplikacji-angular4-przy-angularcli/

http://zacznijprogramowac.net/kurs-angular-dla-kazdego-budowa-projektu-omowienie-struktury-projektu-12/

http://jsdn.pl/angular-cli/
https://www.consdata.pl/blog/7-szybki-start-z-angular-cli