Share
Angular est un framework unique pour la création d'applications mobiles et Web utilisant le même code réutilisable. À l'aide de Angular, vous pouvez diviser l'application entière en composants réutilisables, ce qui facilite la maintenance et la réutilisation du code..
Dans cette série de didacticiels, vous apprendrez à commencer à créer une application Web en utilisant Angular avec MongoDB comme back-end. Vous utiliserez Node.js pour exécuter le serveur.
Au cours de ce didacticiel, vous allez créer une application de blogging utilisant Angular, Node.js et MongoDB..
Dans ce tutoriel, vous verrez comment commencer à configurer l’application et à créer le S'identifier composant.
Commençons par installer le CLI angulaire.
npm install -g @ angular / cli
Une fois que vous avez installé la CLI angulaire, créez un dossier de projet appelé AngularBlogApp.
mkdir AngularBlogApp cd AngularBlogApp
Dans le dossier du projet, créez une nouvelle application Angular à l'aide de la commande suivante:
ng nouveau client
Une fois que vous avez le client application créée, accédez au dossier du projet et installez les dépendances requises à l'aide de Node Package Manager (npm).
cd client npm installer
Démarrer le serveur client en utilisant npm.
npm start
L'application doit être exécutée à l'adresse http: // localhost: 4200 /.
Votre application Web angulaire aura un composant racine. Créez un dossier appelé racine à l'intérieur de src / app dossier. Créez un fichier appelé root.component.html et ajoutez le code HTML suivant:
Composant racine
Ajouter un fichier appelé root.component.ts et ajoutez le code suivant:
importer composant de '@ angular / core'; @Component (sélecteur: 'app-root', templateUrl: './root.component.html') classe d'exportation RootComponent
Supprimer les fichiers app.component.html, app.component.ts, app.component.scss, et app.component.spec.ts. Vous aurez un seul fichier appelé app.module.ts à l'intérieur de src / app dossier.
Importer le RootComponent à l'intérieur de app.module.ts fichier.
import RootComponent de './root/root.component';
Inclure le RootComponent dans le ngModules et le bootstrap.
@NgModule (déclarations: [RootComponent], importations: [BrowserModule, FormsModule], fournisseurs: [], bootstrap: [RootComponent])
Enregistrez les modifications et redémarrez le serveur. Vous aurez le RootComponent affiché lors du chargement de l'application.
Vous allez utiliser angulaire Routeur pour le routage dans notre application de blogs. Donc, importez les dépendances liées au routage dans un nouveau fichier appelé app.routing.ts à l'intérieur de src / app dossier.
importer RouterModule, Routes de '@ angular / router'; importer ModuleWithProviders de '@ angular / core / src / metadata / ng_module';
Définissez le chemin de la route avec les composants comme indiqué:
export const AppRoutes: Routes = [chemin: ", composant: LoginComponent];
Exporter les itinéraires pour créer un module avec tous les fournisseurs d'itinéraire.
export const ROUTING: ModuleWithProviders = RouterModule.forRoot (AppRoutes);
Voici comment app.routing.ts fichier regarde:
importer RouterModule, Routes de '@ angular / router'; importer ModuleWithProviders de '@ angular / core / src / metadata / ng_module'; importer LoginComponent de './login/login.component'; export const AppRoutes: Routes = [chemin: ", composant: LoginComponent]; export const ROUTING: ModuleWithProviders = RouterModule.forRoot (AppRoutes);
Comme on le voit dans le code ci-dessus, vous n'avez pas encore créé le LoginComponent. Il a été ajouté pour plus de clarté.
Importer le ACHEMINEMENT classe dans le app.module.ts fichier.
importer ROUTING depuis './app.routing';
Incluez-le dans le NgModule importations.
importations: [BrowserModule, ROUTING, FormsModule]
Endroit RouterOutlet dans le root.component.html page. Ceci où le composant de la route est rendu.
Créez un dossier appelé s'identifier à l'intérieur de src / app dossier. À l'intérieur de s'identifier dossier, créer un fichier appelé login.component.ts et ajoutez le code suivant:
importer composant de '@ angular / core'; @Component (sélecteur: 'app-login', templateUrl: './login.component.html') classe d'exportation LoginComponent constructor ()
Créez un fichier appelé login.component.html et ajoutez le code suivant:
Composant de connexion
Enregistrez les modifications ci-dessus et redémarrez le serveur. Comme indiqué dans les itinéraires définis lorsque l’application charge le LoginComponent sera affiché.
Vous avez déjà jeté les bases de la LoginComponent lors de la configuration de l'application. Créons la vue pour le LoginComponent en utilisant Bootstrap.
Téléchargez et incluez le style CSS bootstrap dans le les atouts dossier et inclure la référence dans le src / index.html page.
Placez une enveloppe autour du app-root dans le index.html page.
Ajoutez le code HTML suivant au login.component.html page.
Créez un fichier appelé login.component.css à l'intérieur de s'identifier dossier et ajouter le style CSS suivant.
.sign-form-form largeur-max: 330px; rembourrage: 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; taille de la boîte: boîte-frontière; hauteur: auto; rembourrage: 10px; taille de police: 16px; .form-signin .form-control: focus z-index: 2; .form-signin input [type = "email"] margin-bottom: -1px; border-bottom-right-radius: 0; rayon en bas à gauche: 0; .form-signin input [type = "mot de passe"] margin-bottom: 10px; rayon en haut à gauche: 0; border-top-right-radius: 0;
Modifier le @Composant décorateur d'inclure le style CSS.
@Component (sélecteur: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'])
Enregistrez les modifications ci-dessus et essayez de charger l'application. Vous aurez le LoginComponent affiché avec la vue de connexion.
LoginComponent devra interagir avec la base de données pour voir si l’utilisateur connecté est valide ou non. Donc, il faudra faire des appels API. Vous conserverez la partie interaction avec la base de données dans un fichier séparé appelé login.service.ts.
Créez un fichier appelé login.service.ts et ajoutez le code suivant:
import Injectable from '@ angular / core'; importer HttpClient à partir de '@ angular / common / http'; @Injectable () classe d'exportation LoginService constructeur (http privé: HttpClient) validateLogin ()
Importer le LoginService dans le LoginComponent et l'ajouter en tant que fournisseur dans le décorateur de composants.
importer LoginService à partir de './login.service';
@Component (sélecteur: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'], fournisseurs: [LoginService])
Ajouter une méthode appelée validateLogin dans le login.service.ts fichier qui fera l'appel API. Voici à quoi ça ressemble:
Accentsconagua
validateLogin (utilisateur: utilisateur) retourne this.http.post ('/ api / utilisateur / login', nom d'utilisateur: utilisateur.nomutilisateur, mot de passe: utilisateur.password)Comme on le voit dans le code ci-dessus, il retourne un observable qui sera souscrit dans le login.component.ts fichier. Voici comment login.service.ts fichier regarde:
import Injectable from '@ angular / core'; importer HttpClient à partir de '@ angular / common / http'; importer utilisateur de '… /models/user.model'; @Injectable (), classe d'exportation LoginService constructeur (http privé: HttpClient) validateLogin (utilisateur: Utilisateur) retourne this.http.post ('/ api / utilisateur / login', utilisateur: utilisateur.utilisateur, nom d'utilisateur, mot de passe: utilisateur .mot de passe ) Ajouter le ngModel directive aux éléments d'entrée dans login.component.html.
Ajouter un événement de clic au bouton de connexion.
Voici comment le modifié login.component.html regards:
Définir et initialiser la variable utilisateur dans le login.component.ts fichier.
utilisateur public: utilisateur; constructeur (loginService privé: LoginService) this.user = nouvel utilisateur ();
le Utilisateur le modèle a été défini dans le src / app / modèles dossier. Voici à quoi ça ressemble:
classe d'exportation User constructor () this.username = "; this.password ="; nom d'utilisateur public; mot de passe public;
Définir une méthode appelée validateLogin qui sera appelé sur clic du bouton. Voici à quoi ressemble la méthode:
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 ('entrez votre nom d'utilisateur et votre mot de passe'); Lorsque le nom d’utilisateur et le mot de passe ont été entrés, le validateLogin méthode s'abonne à la LoginService méthode pour valider le login de l'utilisateur.
Voici comment login.component.ts fichier regarde:
importer composant de '@ angular / core'; importer LoginService à partir de './login.service'; importer utilisateur de '… /models/user.model'; @Component (sélecteur: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'], fournisseurs: [LoginService]) classe d'exportation LoginComponent public utilisateur: utilisateur; constructeur (loginService privé: LoginService) this.user = nouvel utilisateur (); 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 ('entrez votre nom d'utilisateur et votre mot de passe'); Dans cette partie de la série de tutoriels sur les applications de blogging Angular, vous avez appris à créer une application Web à l'aide de Angular. Vous avez créé la structure de base de l'application Angular et créé le LoginComponent ce qui permettra à l'utilisateur de valider le nom d'utilisateur et le mot de passe.
Dans la partie suivante de la série de didacticiels, vous allez écrire l'API REST pour la validation de la connexion de l'utilisateur et créer le composant home..
Le code source de ce tutoriel est disponible sur GitHub.
Faites-nous savoir vos pensées et suggestions dans les commentaires ci-dessous.
