Angular - tworzenie pierwszego projektu

Stronę tą wyświetlono już: 25 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:

    Listing 1
    1. @NgModule({
    2. declarations: [
    3. // komponenty, dyrektywy i pipe
    4. ],
    5. imports: [
    6. // moduły
    7. ],
    8. providers: [
    9. // serwisy i wszystkie obiekty wstrzykiwane
    10. ],
    11. exports: [
    12. // czasami trzeba wyeksportować komponent, dyrektywę lub pipe-a aby był dostępny globalnie
    13. ],
    14. entryComponents: [
    15. // zbiór komponentów do kompilacji przy definiowaniu tego modułu tak aby mógł on być dynamicznie załadowany w widoku
    16. ],
    17. bootstrap: [
    18. // zbiór komponentów, które wykorzystują bibliotekę bootstrap
    19. ]
    20. })

  • 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:

    Listing 2
    1. import { NgModule } from '@angular/core';
    2. import { Routes, RouterModule } from '@angular/router';
    4. import { FirstComponentComponent } from './firstModule/first-module/first-component/first-component.component';
    6. const routes: Routes = [
    7. { path: 'first', component: FirstComponentComponent }
    8. ];
    10. @NgModule({
    11. imports: [RouterModule.forRoot(routes)],
    12. exports: [RouterModule]
    13. })
    14. export class AppRoutingModule { }

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

    Listing 3
    1. import { Component } from '@angular/core';
    3. @Component({
    4. selector: 'app-root',
    5. templateUrl: './app.component.html',
    6. styleUrls: ['./app.component.css']
    7. })
    8. export class AppComponent {
    9. title = 'myFirstProjectEver';
    10. }

  • app.component.html - zawierający kod HTML komponentu

    Listing 4
    1. <div style="text-align:center">
    2. <h1>
    3. Welcome to {{ title }}!
    4. </h1>
    5. <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
    6. </div>
    7. <h2>Here are some links to help you start: </h2>
    8. <ul>
    9. <li>
    10. <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
    11. </li>
    12. <li>
    13. <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
    14. </li>
    15. <li>
    16. <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
    17. </li>
    18. </ul>
    20. <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.

Komentarze