W app.module.ts zaimportuj moduł http: import { HttpClientModule } from '@angular/common/http’; @NgModule({ declarations: [ AppComponent, routingComponents ], imports: [ BrowserModule, AppRoutingModule, HttpClientModule ], providers: [PageService], bootstrap: [AppComponent] }) następnie w serwisie wstrzyknij zależność i zaimportuj HttpClient oraz utwórz plik .json z danymi i podepnij ten plik do metody http.get() import { HttpClient } from '@angular/common/http’; ..
Category : Angular
Tworzenie projektu z wbudowanym routingiem ng new nazwaProjektu –routing następnie tworzymy componenty a w app-routing.module.ts definiujemy ścieżki prowadzące do konkretnych komponentów const routes: Routes = [ { path: 'list’, component: PagesListComponent }, { path: 'page’, component: PageDetailComponent } ]; Powinno spowodować to automatyczne importy componentów na górze pliku import { PagesListComponent } from ’./pages-list/pages-list.component’; import ..
Tworzenie serwisu ng g s nazwaSerwisu W serwisie deklarujemy zmienne i funkcje, jakie chcemy, np: export class ClickService { sumClick = 0; constructor() { } addClicks() { this.sumClick += 1; console.log(this.sumClick); } } Następnie w componencie, w którym chcemy użyć takiego serwisu w konstruktorze dodajemy parametr: constructor(private clickSrv: ClickService) spowoduje to dodanie linijki import na ..
Parent -> child W parencie dodajemy zmienną export class AppComponent { tasksList = [’xyz’, 'test, 'elem’]; } Następnie w children .ts export class ChildComponent implements OnInit { @Input() tasks; //trzeba doinstalować moduł inputa z core } następnie żeby przypisać wartość z parenta do właściwości dziecka trzeba w miejscu wywołania (czyli np w app.component.html <tag-childrena [tasks]=”tasksList”></tag-childrena> ..
Rozpoczęcie projektu ng new nazwaProjektu //stworzy również katalog o nazwie projektu Główny config aplikacji Znajduje się w pliku angular-cli.json. Warto tutaj usunąć prefix, żeby nowe moduły nie miały dodawanego, niepotrzebnego prefixu Dołączanie styli/skryptów również odbywa się w tym pliku Pobieranie funkcji z componentu w pliku .ts componentu functionName() { //whatever } następnie w component.html {{ ..