VS AngularSzablon 1 Jak zacząć naukę z Angular 5 i wyżej? Po pierwsze trzeba wybrać edytor. Ja wybrałem Visual Studio Code. Jest to bardzo dobry edytor, który jest dostępny na wielu platformach nie tylko Windows. Wcześniej na blogu przygotowałem osobny wpis na temat Visual Studio Code.

Jako programista .NET odniosłem też wrażenie, że programowanie w Visual Studio Code, jeśli chodzi o współczesne aplikacje JavaScript jest bardziej wygodne niż Visual Studio.

Współczesne frameworki JavaScript jak: Angular, React.js wymagają sporego przygotowania środowiska. To może być bardzo duża pigułka do połknięcia. Zrozumienie, co muszę zainstalować i jakie komendy uruchomić, nie było łatwym doświadczeniem.

Wszystko po to, aby uruchomić aplikację z gotowym szablonem.

Angular 5 Welcome app

Gotowy szablon jest super bo nie wymaga wielkiej wiedzy o tym, co tak naprawdę dzieje się w środku i ja traktuję to na plus. Przygotowanie swojego szablonu może wywołać jeszcze większy ból głowy.

node.js

Zanim zaczniesz. Musisz pobrać najnowszą wersję Node.js, nawet jeśli zainstalowałeś ten moduł wraz z Visual Studio.

Node.js jest silnikiem JavaScript, który pozwala na uruchomianie JavaScript jako aplikacji serwerowej. Robi on jednak dużo dużo więcej. W kontekście tworzenia aplikacji Angular uruchamia serwer Express do testowania naszej aplikacji. Oznacza to, że do testów nie jest ci potrzebny serwer IIS czy Apache.

Node.js ma też wbudowany system paczek NPM. Kiedyś skrypty jak jQuery pobierało się ze strony producenta. Teraz skrypty pobiera się przy użyciu konsoli i wpisywaniu nazw paczek. Tak też pobiera się skrypty Angular-a i nie tylko.

Angular ma też przygotowane gotowe skrypty serwerowe, które służą do uruchamiania serwera oraz innych narzędzi np. narzędzia pomagającego w kompilowaniu kodu TypeScript. Te skrypty serwerowe/środowiskowe są określone jako Angular/CLI

Wpisanie magicznych poleceń, które przygotowują za nas środowisko ma więc duży sens.  Do Visual Studio Code zainstaluj sobie dodatki, które będą ci pomagały z poleceniami NPM

dodatki NPM

Startowy szablon Angular-a 5

Uruchom Visual Studio Code i otwórz folder w którym będzie chciał umieścić swoją aplikację Angular.

Open Folder Visual Studio Code

Teraz uruchom Terminal. Mam propozycje by korzystać ze zbudowanego terminala w Visual Studio Code tak, aby nie skakać po oknach pomiędzy windowsowym wierszem poleceń lub innym.

Integrated Terminal Visual Studio Code

Korzystając z systemu paczek NPM zainstalujesz globalnie skrypty serwerowe/środowiskowe Angulara. Te skrypty powinny być pobrane globalnie, czyli nie przywiązane tylko do konkretnego folderu projektu. Z tych skryptów będziesz korzystał w każdej aplikacji Angular po stronie swojego komputera.


npm install -g @angular/cli

Pod paczka ta nazywa się CLI. Poczekaj zanim ona się pobierze ze strony internetowej.

node npm

Mając CLI Angular teraz możesz stworzyć nową aplikację Angular wpisując tę prostą komendę.

ng new my-angular-app

my-angular-app to twoja nazwa aplikacji oraz folderu w którym aplikacja się utworzy.

Pobieranie paczek będzie trochę trwało.

ng new my-angular-app

Do tego czasu możesz otworzyć folder powstającej właśnie aplikacji.

Open Folder ng new my-angular-app

Alternatywnie w innym terminalu możesz wpisać poniższe polecenie Windows. Terminal przejdzie do folderu aplikacji i aplikacja Visual Studio Code zostanie uruchomiona poleceniem “code”.

cd my-angular-app
code .

Oto pliki szablonu aplikacji Angular. Ikony mogą być u ciebie inne ponieważ ja zainstalowałem dodatek do Visual Studio, który zamienia mi ikony.

Visual Studio  my-angular-app

Jak uruchomić tą aplikację?

W terminalu, który powinien wskazywać na folder aplikacji Angular trzeba uruchomić polecenie.

ng serve

Polecenie to uruchomi serwer Express, Node.js oraz skompiluje kod napisany w TypeScript do JavaScript.

ng serve

Wpisując adres localhost:4200 zobaczysz gotowy szablon aplikacji Angular.

localhost:4200

Debugowanie kodu z Chrome

Uruchomienie aplikacji to nie wszystko. Jak można debugować kod przy użyciu Visual Studio Code? Na razie nie jest to możliwe, ale do pomocy są dodatki.

Wpisując w zakładce Extension Marketplace nazwę przeglądarki, jak chrome znajdziesz odpowiedni dodatek.

Debbuger with Chrome

Ja do końca wpisu będę debugować z Chrome. Ty jednak możesz zainstalować inne debugery do innych przeglądarek.

Debbuger for Firefox

Debbuger for Edge

Visual Studio Code do debugowania kodu potrzebuje pliku konfiguracyjnego “launch.json”. By go wygenerować kliknij w menu na Debug –> Start Debugging

Start Debugging Visual Studio Code

Z pola “Select Environment” wybierz “Chrome”. Jeśli nie masz tej opcji to oznacza, że nie zainstalowałeś dodatku.

Visual Studio Code Chrome

Wygenerowałeś następujący plik konfiguracyjny.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

Po pierwsze do tego pliku konfiguracyjnego trzeba zmienić port z  8080 na 4200.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

Obecna konfiguracja uruchamia tylko przeglądarkę z podaną stroną internetową.

Dodatkowo trzeba dodać jeszcze linkę konfiguracyjną, która skojarzy Visual Studio Code z przeglądarką Chrome. Tak aby nasze działanie w przeglądarce mogło być przechwycone w edytorze.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceRoot}"
        },
        {
          "type": "chrome",
          "request": "attach",
          "name": "Attach to Chrome",
          "port": 9222,
          "webRoot": "${workspaceFolder}"
        }
    ]
}

Zanim zakończę ten wpis prostą edycją kodu Angular – warto powiedzieć jeszcze o kolejności wywołań poleceń

Jak inaczej uruchomić ng serve

Jeśli zamknąłeś konsole po wykonaniu polecenia ng serve, to też uśmierciłeś serwer testowy Express. Co z tego, że możemy debugować kod skoro pod tym adresem nic teraz nie ma.

Ta witryna jest nieosiągalna

W takim wypadku w terminalu trzeba jeszcze raz wpisać polecenie ng serve, a potem uruchomić debuger poleceniem Start-Debugging. Jak jednak zrobić to lepiej?

package.json

Otwórz plik package.json.  W nim widzisz deklarację skryptów. Jak widzisz polecenie “start” obecnie wykonuje polecenie “ng serve”.

{
  "name": "my-angular-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

Jak jednak te zdefiniowane skrypty uruchomić? W zakładce Task kliknij na Run Task…

Run Task

Wyświetlicie się cały zbiór skryptów środowiskowych przygotowanych przez Angulara, TypeScript a nawet EsLint.

npm: start

Wybierając npm: start uruchomisz polecenie “ng serve”. Tak możesz alternatywnie uruchomić serwer Express w swojej aplikacji. 

Mała zmiana aplikacji

Serwer Express znowu działa. Wykażmy czy używając debugera Chrome możemy analizować nasz kod.

app.component.ts

W pliku “app.component.ts” znajduje się definicja elementów strony startowej w tym także jej nagłówka.

app.component.ts welcome to app

Słowo “app” jest pobierane z klasy AppComponent. Klasa ta ma właściwość title, która określa właśnie nazwę naszej aplikacji.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

Zmień ją, podstaw w tym miejscu breakpoint i zacznij debugować kod.

Refresh Google Chrome

Warto zaznaczyć, ze proces debugowania rozpocznie się dopiero po odświeżeniu strony.

BreakPoint

Jak widać wszystko działa. Tak możesz zacząć swoja pracę z Visual Studio Code oraz Angular 5 i wyżej. Przejrzyj w zakładce dodatków pomoce programistyczne związane z Angular-em wpisując po prostu Angular.

Angular 5 Snippets