Share
Angular is een one-stop-framework voor het maken van mobiele en web-apps met dezelfde herbruikbare code. Met Angular kunt u de hele applicatie opsplitsen in herbruikbare componenten, waardoor het eenvoudiger wordt om code te onderhouden en opnieuw te gebruiken.
In deze zelfstudiereeks leert u hoe u aan de slag kunt gaan met het maken van een webapp met Angular met MongoDB als back-end. U gebruikt Node.js voor het uitvoeren van de server.
In de loop van deze zelfstudie bouw je een blogtoepassing met Angular, Node.js en MongoDB.
In deze zelfstudie ziet u hoe u aan de slag gaat met het instellen van de toepassing en het maken van de Log in bestanddeel.
Laten we beginnen door het Hoekige CLI.
npm install -g @ angular / cli
Nadat u de Angular CLI hebt geïnstalleerd, maakt u een projectmap met de naam AngularBlogApp.
mkdir AngularBlogApp cd AngularBlogApp
Maak vanuit de projectmap een nieuwe Angular-app met de volgende opdracht:
nieuwe klant
Zodra u de cliënt app gemaakt, navigeer naar de projectmap en installeer de vereiste afhankelijkheden met Node Package Manager (npm).
cd client npm installeren
Start de client-server met NPM.
npm start
De toepassing moet worden uitgevoerd op http: // localhost: 4200 /.
Uw Angular web-app heeft een rootcomponent. Maak een map met de naam wortel binnen in de src / app map. Maak een bestand met de naam root.component.html en voeg de volgende HTML-code toe:
Rootcomponent
Voeg een bestand toe met de naam root.component.ts en voeg de volgende code toe:
Component importeren vanuit '@ angular / core'; @Component (selector: 'app-root', templateUrl: './root.component.html') exportklasse RootComponent
Verwijder de bestanden app.component.html, app.component.ts, app.component.scss, en app.component.spec.ts. Je hebt maar één bestand met de naam app.module.ts binnen in de src / app map.
Importeer de RootComponent binnen in de app.module.ts het dossier.
importeer RootComponent van './root/root.component';
Omvat de RootComponent in de ngModules en bootstrap het.
@NgModule (aangiften: [RootComponent], import: [BrowserModule, FormsModule], providers: [], bootstrap: [RootComponent])
Sla de wijzigingen op en start de server opnieuw op. Je hebt de RootComponent wordt weergegeven wanneer de toepassing wordt geladen.
Je zult Angular gebruiken router voor routing in onze blogapp. Dus import-routeringsafhankelijke afhankelijkheden in een nieuw bestand genaamd app.routing.ts binnen in de src / app map.
import RouterModule, Routes vanuit '@ angular / router'; import ModuleWithProviders uit '@ angular / core / src / metadata / ng_module';
Definieer het routepad samen met de componenten zoals getoond:
export const AppRoutes: Routes = [path: ", component: LoginComponent];
Exporteer de routes om een module te maken met alle routeproviders.
export const ROUTING: ModuleWithProviders = RouterModule.forRoot (AppRoutes);
Hier is hoe het app.routing.ts bestand ziet er:
import RouterModule, Routes vanuit '@ angular / router'; import ModuleWithProviders uit '@ angular / core / src / metadata / ng_module'; importeer LoginComponent van './login/login.component'; export const AppRoutes: Routes = [path: ", component: LoginComponent]; export const ROUTING: ModuleWithProviders = RouterModule.forRoot (AppRoutes);
Zoals te zien is in de bovenstaande code, hebt u nog niet het LoginComponent. Het is toegevoegd voor de duidelijkheid.
Importeer de ROUTING klasse in de app.module.ts het dossier.
importeer ROUTING van './app.routing';
Neem het op in de NgModule invoer.
invoer: [BrowserModule, ROUTING, FormsModule]
Plaats RouterOutlet in de root.component.html pagina. Dit waar de component van de route wordt weergegeven.
Maak een map met de naam Log in binnen in de src / app map. Binnen in de Log in map, maak een bestand aan met de naam login.component.ts en voeg de volgende code toe:
Component importeren vanuit '@ angular / core'; @Component (selector: 'app-login', templateUrl: './login.component.html') export class LoginComponent constructor ()
Maak een bestand met de naam login.component.html en voeg de volgende code toe:
Login Component
Sla de bovenstaande wijzigingen op en start de server opnieuw. Als de per routes gedefinieerd wanneer de toepassing de LoginComponent wordt weergegeven.
Je hebt al de basis gelegd voor de LoginComponent tijdens het instellen van de applicatie. Laten we de weergave voor de maken LoginComponent gebruik makend van bootstrap.
Download en includeer de bootstrap CSS-stijl in de middelen map en neem de referentie op in de src / index.html pagina.
Plaats een wrapper rond de app-root in de index.html pagina.
Voeg de volgende HTML toe aan de login.component.html pagina.
Maak een bestand met de naam login.component.css binnen in de Log in map en voeg de volgende CSS-stijl toe.
.form-signin max-width: 330px; opvulling: 15px; marge: 0 auto; .form-signin .form-signin-heading, .form-signin .checkbox margin-bottom: 10px; .form-signin .checkbox font-weight: 400; .form-signin .form-control position: relative; box-sizing: border-box; hoogte: auto; opvulling: 10px; lettergrootte: 16px; .form-signin .form-control: focus z-index: 2; .form-signin input [type = "email"] margin-bottom: -1px; grens-onder-rechter-straal: 0; grens-onder-links radius: 0; .form-signin input [type = "wachtwoord"] margin-bottom: 10px; grens-bovenkant-linker-straal: 0; grens-bovenkant-juiste-straal: 0;
Wijzig de @Component decorateur om de CSS-stijl op te nemen.
@Component (selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'])
Sla de bovenstaande wijzigingen op en probeer de toepassing te laden. Je hebt de LoginComponent weergegeven met de loginweergave.
LoginComponent zal moeten communiceren met de database om te zien of de ingelogde gebruiker geldig is of niet. Het moet dus API-aanroepen doen. U houdt het database-interactiegedeelte in een apart bestand met de naam login.service.ts.
Maak een bestand met de naam login.service.ts en voeg de volgende code toe:
Injectable importeren vanuit '@ angular / core'; importeer HttpClient van '@ angular / common / http'; @Injectable () exportklasse LoginService constructor (privé http: HttpClient) validateLogin ()
Importeer de LoginService in de LoginComponent en voeg het toe als een provider in de component-decorateur.
importeer LoginService van './login.service';
@Component (selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'], providers: [LoginService])
Voeg een methode toe genaamd validateLogin in de login.service.ts bestand dat de API-oproep doet. Hier is hoe het eruit ziet:
Accentsconagua
validateLogin (gebruiker: Gebruiker) retourneer this.http.post ('/ api / user / login', gebruikersnaam: user.username, wachtwoord: user.password)Zoals te zien in de bovenstaande code, retourneert het een waarneembaar bericht dat wordt ingeschreven in de login.component.ts het dossier. Hier is hoe het login.service.ts bestand ziet er:
Injectable importeren vanuit '@ angular / core'; importeer HttpClient van '@ angular / common / http'; importeer Gebruiker van '... /models/user.model'; @Injectable () exportklasse LoginService constructor (privé http: HttpClient) validateLogin (gebruiker: Gebruiker) retourneer dit.http.post ('/ api / user / login', gebruikersnaam: user.username, wachtwoord: gebruiker .password)Voeg de toe ngModel richtlijn voor de invoerelementen in login.component.html.
Voeg een klikgebeurtenis toe aan de aanmeldknop.
Hier is hoe de gemodificeerde login.component.html ziet:
Definieer en initialiseer de gebruikersvariabele in de login.component.ts het dossier.
openbare gebruiker: gebruiker; constructor (private loginService: LoginService) this.user = new User ();
De Gebruiker model is gedefinieerd in de src / app / modellen map. Hier is hoe het eruit ziet:
exportklasse Gebruiker constructor () this.username = "; this.password ="; openbare gebruikersnaam; openbaar wachtwoord;
Definieer een methode genaamd validateLogin die wordt aangeroepen door op de knop te klikken. Hier ziet u hoe de methode eruitziet:
validateLogin () if (this.user.username && this.user.password) this.loginService.validateLogin (this.user) .subscribe (result => console.log ('result is', result);, error => console.log ('error is', error);); else alert ('gebruikersnaam en wachtwoord invoeren'); Wanneer zowel de gebruikersnaam als het wachtwoord zijn ingevoerd, is de validateLogin methode onderschrijft de LoginService methode om de gebruikersaanmelding te valideren.
Hier is hoe het login.component.ts bestand ziet er:
Component importeren vanuit '@ angular / core'; importeer LoginService van './login.service'; importeer Gebruiker van '... /models/user.model'; @Component (selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'], providers: [LoginService]) exporteer class LoginComponent openbaar gebruiker: gebruiker; constructor (private loginService: LoginService) this.user = new User (); validateLogin () if (this.user.username && this.user.password) this.loginService.validateLogin (this.user) .subscribe (result => console.log ('result is', result); , error => console.log ('error is', error);); else alert ('gebruikersnaam en wachtwoord invoeren'); In dit deel van de oefenreeks van de Angular-blogging-app zag je hoe je kon beginnen met het maken van een web-app met Angular. U hebt de basisstructuur van de Angular-app gemaakt en de LoginComponent waarmee de gebruiker de gebruikersnaam en het wachtwoord kan valideren.
In het volgende deel van de zelfstudiereeks schrijft u de REST API voor gebruikersaanmeldingvalidatie en maakt u de thuiscomponent.
Broncode van deze tutorial is beschikbaar op GitHub.
Laat ons uw mening en suggesties weten in de opmerkingen hieronder.
