Share
Angular er et one-stop-rammeverk for å lage mobil- og webapps ved bruk av samme gjenbrukbare kode. Ved hjelp av kantet kan du dele hele applikasjonen i gjenbrukbare komponenter, noe som gjør det enklere å vedlikeholde og gjenbruke koden.
I denne opplæringsserien lærer du hvordan du kommer i gang med å lage en webapp ved hjelp av Angular med MongoDB som backend. Du bruker Node.js for å kjøre serveren.
I løpet av denne opplæringen vil du bygge en blogging-applikasjon ved hjelp av Angular, Node.js og MongoDB.
I denne veiledningen vil du se hvordan du kommer i gang med å sette opp programmet og opprette Logg Inn komponent.
La oss begynne med å installere Vinkel CLI.
npm installer -g @ vinkel / cli
Når du har installert Angular CLI, må du opprette en prosjektmappe som heter AngularBlogApp.
mkdir AngularBlogApp cd AngularBlogApp
Fra prosjektmappen, opprett en ny Angular app ved hjelp av følgende kommando:
ng ny klient
Når du har klient app opprettet, naviger til prosjektmappen og installer de nødvendige avhengighetene ved hjelp av Node Package Manager (npm).
cd-klient npm installasjon
Start klientserveren ved hjelp av NPM.
npm start
Du bør ha programmet kjører på http: // localhost: 4200 /.
Vinkelnettappen din vil ha en rotkomponent. Opprett en mappe som heter rot inne i src / app mappe. Opprett en fil som heter root.component.html og legg til følgende HTML-kode:
Root Component
Legg til en fil som heter root.component.ts og legg til følgende kode:
importer Komponent fra '@ vinkel / kjerne'; @Component (selector: 'app-root', templateUrl: './root.component.html') eksportklasse RootComponent
Fjern filene app.component.html, app.component.ts, app.component.scss, og app.component.spec.ts. Du vil bare ha én fil som heter app.module.ts inne i src / app mappe.
Importer RootComponent inne i app.module.ts fil.
importer RootComponent fra './root/root.component';
Inkluder RootComponent i ngModules og bootstrap det.
@NgModule (declarations: [RootComponent], import: [BrowserModule, FormsModule], leverandører: [], bootstrap: [RootComponent])
Lagre endringene og start serveren på nytt. Du vil ha RootComponent vises når programmet laster.
Du bruker Angular Router for ruting i vår blogging-app. Så importer rutingrelaterte avhengigheter i en ny fil som heter app.routing.ts inne i src / app mappe.
importer RouterModule, Routes fra '@ vinkel / router'; importer ModuleWithProviders fra '@ vinkel / kjerne / src / metadata / ng_module';
Definer ruteveien sammen med komponentene som vist:
eksport const AppRoutes: Ruter = [sti: ", komponent: LoginComponent];
Eksporter rutene for å lage en modul med alle ruteleverandører.
eksport const ROUTING: ModuleWithProviders = RouterModule.forRoot (AppRoutes);
Her er hvordan app.routing.ts fil ser ut:
importer RouterModule, Routes fra '@ vinkel / router'; importer ModuleWithProviders fra '@ vinkel / kjerne / src / metadata / ng_module'; importer LoginComponent fra './login/login.component'; eksport const AppRoutes: Ruter = [sti: ", komponent: LoginComponent]; eksport const ROUTING: ModuleWithProviders = RouterModule.forRoot (AppRoutes);
Som vist i koden ovenfor, har du ennå ikke opprettet LoginComponent. Det er lagt til for klarhetens skyld.
Importer ROUTING klasse i app.module.ts fil.
importer ROUTING fra './app.routing';
Inkluder det i NgModule import.
import: [BrowserModule, ROUTING, FormsModule]
Sted RouterOutlet i root.component.html side. Dette der rutenes komponent blir gjengitt.
Opprett en mappe som heter Logg Inn inne i src / app mappe. Inne i Logg Inn mappe, opprett en fil som heter login.component.ts og legg til følgende kode:
importer Komponent fra '@ vinkel / kjerne'; @Component (selector: 'app-login', templateUrl: './login.component.html') eksportklasse LoginComponent constructor ()
Opprett en fil som heter login.component.html og legg til følgende kode:
Logg inn komponent
Lagre endringene ovenfor og start serveren på nytt. Som per ruten definert når søknaden laster LoginComponent vil bli vist.
Du har allerede lagt grunnlaget for LoginComponent mens du setter opp programmet. La oss lage visningen for LoginComponent ved hjelp av Bootstrap.
Last ned og ta med bootstrap CSS-stilen i eiendeler mappe og inkludere referansen i src / index.html side.
Legg et omslag rundt app-rot i index.html side.
Legg til følgende HTML for login.component.html side.
Opprett en fil som heter login.component.css inne i Logg Inn mappe og legg til følgende CSS-stil.
.form-signin maksimal bredde: 330px; polstring: 15px; margin: 0 auto; .form-signin. form-signin-heading, .form-signin .checkbox margin-bottom: 10px; .form-signin .checkbox font-weight: 400; .form-signin. form-control posisjon: relative; boks-størrelse: border-box; høyde: auto; polstring: 10px; skriftstørrelse: 16px; .form-signin. form-control: fokus z-indeks: 2; .form-signin input [type = "email"] margin-bunn: -1px; grense bunn-høyre-radius: 0; Bensin-venstre-radius: 0; .form-signin input [type = "passord"] margin-bottom: 10px; Grense øverst til venstre: 0; Grense-topp-høyre-radius: 0;
Endre @Komponent dekoratør for å inkludere CSS-stilen.
@Component (selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'])
Lagre endringene ovenfor og prøv å laste inn programmet. Du vil ha LoginComponent vises med påloggingsvisningen.
LoginComponent må samhandle med databasen for å se om den innloggede brukeren er gyldig eller ikke. Så det må være å lage API-anrop. Du vil beholde databaseinteraksjonsdelen i en egen fil som heter login.service.ts.
Opprett en fil som heter login.service.ts og legg til følgende kode:
importer Injectable fra '@ vinkel / kjerne'; importer HttpClient fra '@ vinkel / vanlig / http'; @Injectable () eksportklasse LoginService constructor (private http: HttpClient) validateLogin ()
Importer LoginService i LoginComponent og legg det til som leverandør i komponentdekoratoren.
importer LoginService fra './login.service';
@Component (selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'], leverandører: [LoginService])
Legg til en metode som kalles validateLogin i login.service.ts fil som vil gjøre API-anropet. Slik ser det ut:
Accentsconagua
validateLogin (bruker: Bruker) return this.http.post ('/ api / user / login', brukernavn: user.username, passord: user.password)Som vist i ovennevnte kode returneres det en observerbar som vil bli tegnet i login.component.ts fil. Her er hvordan login.service.ts fil ser ut:
importer Injectable fra '@ vinkel / kjerne'; importer HttpClient fra '@ vinkel / vanlig / http'; importer Bruker fra '... /models/user.model'; @Injectable () eksportklasse LoginService constructor (privat http: HttpClient) validateLogin (bruker: Bruker) return this.http.post ('/ api / user / login', brukernavn: bruker.brukernavn, passord: bruker .passord ) Legg til ngModel Direktivet til inngangselementene i login.component.html.
Legg til et klikkhendelse til påloggings-knappen.
Her er hvordan den endrede login.component.html utseende:
Definer og initialiser brukervariabelen i login.component.ts fil.
offentlig bruker: Bruker; Konstruktør (privat loginService: LoginService) this.user = ny bruker ();
De Bruker modellen er definert i src / app / modeller mappe. Slik ser det ut:
Eksporter klasse Bruker constructor () this.username = "; this.password ="; offentlig brukernavn; offentlig passord;
Definer en metode som kalles validateLogin som vil bli ringt på knappeklikk. Slik ser metoden ut:
validateLogin () if this.user.username && this.user.password this.loginService.validateLogin (this.user) .subscribe (result => console.log ('resultat er', resultat);, error => console.log ('feil er', feil);); ellers alert ('skriv inn brukernavn og passord'); Når både brukernavn og passord er oppgitt, vil validateLogin Metoden abonnerer på LoginService metode for å validere brukerinnlogging.
Her er hvordan login.component.ts fil ser ut:
importer Komponent fra '@ vinkel / kjerne'; importer LoginService fra './login.service'; importer Bruker fra '... /models/user.model'; @Component (selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'], leverandører: [LoginService]) eksportklasse LoginComponent public Bruker: Bruker; Konstruktør (privat loginService: LoginService) this.user = ny bruker (); validateLogin () if (this.user.username && this.user.password) this.loginService.validateLogin (this.user) .subscribe (result => console.log ('resultat er', resultat); , feil => console.log ('feil er', feil);); ellers alert ('skriv inn brukernavn og passord'); I denne delen av opplæringsserien Angular blogging app så du hvordan du kommer i gang med å lage en webapp ved hjelp av Angular. Du opprettet grunnleggende strukturen til Angular app og opprettet LoginComponent som vil gjøre det mulig for brukeren å validere brukernavnet og passordet.
I neste del av opplæringsserien skriver du REST API for brukerinnloggingsvalidering og oppretter hjemmekomponent.
Kildekode fra denne opplæringen er tilgjengelig på GitHub.
Gi oss beskjed om dine tanker og forslag i kommentarene nedenfor.
