Angular – tworzenie pierwszego projektu

“Nadeszla wiekopomna chwila” – jak mówił Pawlak na pogrzebie swego brata. A więc nadeszla wiekopomna chwila, aby utworzyć pierwszy (żeby nie powiedzieć dziewiczy) projekt Angulara, którego utworzenie wymagać będzie użycia polecenia:

ng new my-first-angular-project-ever

Oczywiście powyższe polecenie najlepiej wpisać w konsoli Visual Studio Code, co spowoduje utworzenie folderu myFirstAngularProjectEver. Do tegoż folderu należy wejść i z jego poziomu wpisać polecenie:

ng serve

Co spowoduje, że projekt zostanie skompilowany do javascipt-u i uruchomiony pod adresem localhost:4200. Tak więc koniec końców wpisując ten adres w przeglądarce powinien pojawić się widok nowo utworzonego projektu.

Najważniejsze pliki nowo utworzonej aplikacji znajdują się w podfolderze src/app, gdzie znajdują się pliki:

• app.module – gdzie możliwe jest podpięcie komponentów, serwisów a także import modułów:

@NgModule({
 declarations: [
     // komponenty, dyrektywy i pipe
 ],
 imports: [
     // moduły
 ],
 providers: [
     // serwisy i wszystkie obiekty wstrzykiwane
 ],
 exports: [
     // czasami trzeba wyeksportować komponent, dyrektywę lub pipe-a aby był dostępny globalnie
 ],
 entryComponents: [
     // zbiór komponentów do kompilacji przy definiowaniu tego modułu tak aby mógł on być dynamicznie załadowany w widoku
 ],
 bootstrap: [
     // zbiór komponentów, które wykorzystują bibliotekę bootstrap
 ]
 })

app-routing.module.ts (jeżeli podczas tworzenia projektu wybrana została opcja z routingiem) tutaj można tworzyć scieżki routingu. Oto przykładowy kod:

import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { FirstComponentComponent } from './firstModule/first-module/first-component/first-component.component';
 const routes: Routes = [
   { path: 'first', component: FirstComponentComponent }
 ];
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

app.component.ts – plik zawierający deklarację klasy komponentu gółwnego

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

app.component.html – zawierający kod HTML komponentu

<div style="text-align:center">
    <h1>
      Welcome to {{ title }}!
    </h1>
    <img width="300" alt="Angular Logo" src="">
  </div>
  <h2>Here are some links to help you start: </h2>
  <ul>
    <li>
      <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
    </li>
    <li>
      <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
    </li>
    <li>
      <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
    </li>
  </ul>
  
  <router-outlet></router-outlet>

W katalogu głównym projektu Angulara można znaleźć również ciekawy plik konfiguracyjny angular.json gdzie znajdują się opcje związane z kompilacją oraz testowaniem a także można podpiąć własne pliki stylów. Tutaj również można znaleźć plik package.json, który to zawiera informacje o zainstalowanych dodatkach do Angulara.