Angular - tworzenie pierwszego projektu

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 2704 razy

"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="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="> </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.

Propozycje książek