Angular - tworzenie pierwszego projektu

Stronę tą wyświetlono już: 1240 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. <h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
12. <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
13. <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