Co to jest Angular? (Część 1) | Skonfiguruj środowisko programistyczne | Utwórz nowy projekt Angular.

Zacznijmy od tego, czym jest Angular?

Angular to framework do tworzenia aplikacji klienckich w HTML, CSS i Javascript / Typescript.

Typescript : to język, który kompiluje się do Javascript. Maszynopis jest bardzo powszechny podczas korzystania z Angular - ponieważ nawet Angular jest napisany w Typescript.

Dlaczego potrzebujemy Angulara?

Złożone aplikacje są trudne do utrzymania w Javascript i Jquery. Potrzebujemy sposobu na uporządkowanie naszej aplikacji. Dlatego używane są te frameworki (Angular, React itp.).

Korzyści z używania Angular?

• Nadaje naszej aplikacji przejrzystą strukturę: jest łatwa do zrozumienia i łatwa w utrzymaniu
• Zawiera dużo kodu do ponownego wykorzystania
• Sprawia, że ​​nasza aplikacja jest bardziej testowalna

Front-end (klient) 👇 ← → Back-end (serwer WWW) 👇

Interfejs użytkownika (UI) 👇 ← → Dane + API i przetwarzanie (logika biznesowa) 👇

(HTML, CSS, Typescript, JS, Angular) 👇 ← → (Java, Python, Node.js itp.) 👇

Front-end (klient) wysyła / odbiera dane do / z serwera za pomocą API

TOSOWANIE P ROGRAMOWANIE I nterface (API) / HTTP Services

W API punkty końcowe są dostępne poprzez protokół HTTP (metody GET i POST)

Punkty końcowe to adresy URL umożliwiające dostęp do interfejsów API, a żądania HTTP pobierają / wysyłają dane z / do serwera.

A rola Angulara to front-end, czyli po stronie klienta - interfejs użytkownika.

Pierwsza aplikacja Angular

Skonfiguruj środowisko programistyczne

1. Zainstaluj stabilną wersję Node .

N oda : jest to w zasadzie środowisko wykonawcze do wykonywania kodu JavaScript poza przeglądarką. W tym projekcie nie używamy w zasadzie Node, ale Node zapewnia narzędzia potrzebne do zbudowania projektu kątowego.

Wizyta: https://nodejs.org/ aby pobrać i zainstalować zalecaną stabilną wersję Node.

Po zakończeniu instalacji sprawdź, czy instalacja się powiodła -> Otwórz wiersz polecenia i wpisz: węzeł - wersja, aby upewnić się, że węzeł został pomyślnie zainstalowany. (Minimalna wersja Node wymagana do zbudowania aplikacji kątowej to wersja 6.9)

node --version

2. Instalacja A ngular CLI .

* Po zainstalowaniu Node , możemy użyć N ode Package M anager lub NPM do zainstalowania bibliotek innych firm. *

Jednym z biblioteki zamiar zainstalowaliśmy dla tego projektu jest ngular CLI lub ngular C ommand- L ine I nterface . Jest to narzędzie wiersza poleceń, którego używamy do tworzenia nowego projektu Angular lub generowania standardowego kodu do rozpoczęcia nowego projektu.

A ngular CLI : Instalowanie Angular CLI… | Otwarte C ommand P rompt lub T erminal i wprowadź następujące polecenie:

sudo npm install -g @angular/cli

• Jeśli tego nie zrobimy, -gkliknięcie kątowe zostanie zainstalowane tylko w bieżącym folderze i nie będzie dostępne nigdzie indziej.
• Wprowadzenie sudolub otwarcie „wiersza polecenia” jako administrator poprosi nas o wprowadzenie hasła systemowego.

ng --version

* Zainstalowaliśmy Node, NPM i Angular CLI. Teraz możemy stworzyć nowy projekt Angular *

Jeśli nie możesz uruchomić i uruchomić swojego środowiska, użyj pola komentarza poniżej i opublikuj swoje pytania / błędy.

Tworzenie nowego projektu Angular

1. Otwórz wiersz poleceń i wpisz:

sudo ng new hello-world

• To polecenie wygeneruje kilka plików i folderów (spójrz na górę załączonego obrazu 👇 ), a następnie użyje NPM do pobrania bibliotek innych firm (spójrz na dół załączonego obrazu 👇 ).

Aby pozbyć się 'git'błędu, musisz zainstalować git w swoim systemie - użyj tego linku👇, aby pobrać i zainstalować git w swoim systemie,click here for git → https://git-scm.com/downloads

• Nasz projekt został pomyślnie utworzony.
• Teraz, aby rozpocząć kodowanie, potrzebujemy edytora kodu. Edytor zrobimy będzie zastosowanie jest V isual S tudio C ode lub VS C Oda

( VS C ode to piękny, wieloplatformowy, lekki edytor lub możesz swobodnie używać sublime, atom lub dowolnego innego edytora )

• Projekt pięknie wygląda w VS C ode . 👇👇

Jeśli nie miałbyś nic przeciwko oklaskiwaniu tego artykułu 👏 👏, bo to pomogło, bardzo bym to docenił :) Pomóż innym znaleźć artykuł, żeby mógł im pomóc!

Zawsze klaszcz…