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 - @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:
Listing 2 - 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
Listing 3 - 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
Listing 4 - <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.

Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie IV
Autor:
Adam Freeman

Tytuł:
Angular. Programowanie z użyciem języka TypeScript. Wydanie II
Autor:
Yakov Fain, Anton Moiseev

Tytuł:
ASP.NET Core, Angular i Bootstrap. Kompletny przybornik front-end developera
Autor:
Simone Chiaretta

Tytuł:
Angular instalacja i działanie. Nauka krok po kroku
Autor:
Shyam Seshadri

Tytuł:
Angular w akcji
Autor:
Jeremy Wilken

Tytuł:
ASP.NET Core 2 i Angular 5. Przewodnik dla Full-Stack Web Developera
Autor:
Valerio De Sanctis

Tytuł:
Angular. Profesjonalne techniki programowania. Wydanie II
Autor:
Adam Freeman

Tytuł:
Angular 2. Programowanie z użyciem języka TypeScript
Autor:
Yakov Fain, Anton Moiseev

Tytuł:
Angular 2. Tworzenie interaktywnych aplikacji internetowych
Autor:
Gion Kunz