Share
Dans cette série, nous utiliserons AngularJS et Firebase pour créer une application Web simple à partir de rien. Ce sera une application de blogging simple où l'utilisateur pourra se connecter ou s'inscrire et publier un article de blog..
Ce tutoriel suppose que vous avez des connaissances de base sur AngularJS, mais il ne devrait pas être difficile de choisir les sujets le long du chemin. Si vous rencontrez des bogues ou des erreurs que vous n'arrivez pas à corriger, essayez l'un des correcteurs de bogues experts d'Envato Studio..
AngularJS est l’un des frameworks JavaScript MVC les plus recherchés. C'est un cadre structurel pour la création d'applications Web dynamiques en étendant les capacités HTML. Des fonctionnalités telles que la liaison de données et l'injection de dépendance facilitent le développement d'applications avec moins de code.
De la documentation AngularJS:
Le langage HTML est idéal pour déclarer des documents statiques, mais il échoue lorsque nous essayons de l’utiliser pour déclarer des vues dynamiques dans des applications Web. AngularJS vous permet d’étendre le vocabulaire HTML pour votre application. L’environnement résultant est extraordinairement expressif, lisible et rapide à développer..
Imaginez créer une application Web sans vous soucier de l'arrière-plan. Firebase permet de synchroniser les données en temps réel avec notre application sans se soucier du back-end. Tout ce que nous avons à faire est de faire des appels API.
Firebase est une API puissante pour stocker et synchroniser des données en temps réel. En combinant la puissance de la liaison de données bidirectionnelle AngularJS avec Firebase, vous obtenez une synchronisation à trois voies plutôt impressionnante..
le graine angulaire projet est un passe-partout pour commencer à créer des applications Web avec AngularJS. Téléchargez ou clonez le graine angulaire projet du référentiel.
$ git clone https://github.com/angular/angular-seed.git
Accédez au répertoire du projet et installez les dépendances requises.
$ cd angular-seed $ npm install ## Installez les dépendances
Démarrez le serveur de noeud:
$ npm start ## Démarrer le serveur
Pointez votre navigateur sur http: // localhost: 8000 / app / index.html et vous devriez voir l'application par défaut en cours d'exécution.
Accédez au app répertoire à l'intérieur graine angulaire. C'est ici que réside le code de l'application. À l'intérieur de app dossier que vous trouverez app.js qui est le noyau de l'application. Nous allons déclarer tous les modules et les routes au niveau de l'application dans ce fichier. Par défaut, le graine angulaire le projet a deux vues, vue1 et vue2. Supprimer les dossiers vue1 et vue2 depuis le dossier de l'application.
Commençons à partir de zéro. S'ouvrir app.js et supprimez le code existant. Dans app.js nous allons définir nos routes d’application, par exemple, comment traiter une demande comme /maison. Pour définir les itinéraires, nous aurons besoin d’un module AngularJS appelé ngRoute. Utiliser ngRoute nous devons d’abord l’injecter ou l’ajouter à notre application. Nous allons utiliser angular.module pour ajouter le ngRoute module à notre application comme indiqué ci-dessous:
Accentsconagua
angular.module ('myApp', ['ngRoute'])le ngRoute Le module a un composant appelé $ routeProvider qui est utile pour configurer les itinéraires. Nous allons injecter $ routeProvider dans le config méthode de module angulaire et définissez nos itinéraires dans sa fonction de rappel, comme indiqué ci-dessous:
'use strict'; angular.module ('myApp', ['ngRoute']). config (['$ routeProvider', function ($ routeProvider) // Les routes seront ici]);Ensuite, ouvrez index.html et supprimer les références de script à vue1 et vue2. Enlevez tout du corps de index.html sauf les références de script et la div ci-dessous avec la directive ngView.
ngView est une directive qui aide à rendre la vue attachée avec un itinéraire particulier dans la présentation principale, index.html. Donc, chaque fois que la route change, le contenu de la div ci-dessus change.
Créons maintenant une nouvelle vue pour que l’utilisateur puisse se connecter. app répertoire créer un nouveau dossier appelé maison. À l'intérieur maison, créer deux fichiers appelés home.html et home.js. S'ouvrir home.html et inclure le code HTML suivant:
Application Web AngularJS & Firebase AngularJS & Firebase App!
Comme indiqué dans le code ci-dessus, nous utiliserons Bootstrap pour créer nos vues d'application..
À l'intérieur home.js, nous allons déclarer les itinéraires pour que l'application accède à la vue d'accueil. $ routeProvider a une méthode appelée quand, que nous utiliserons pour créer un itinéraire pour notre vue d'accueil. Lors de la définition d'un nouvel itinéraire, nous définirons un templateUrl qui serait rendu dans le index.html. Parallèlement à cela, nous allons également définir un manette pour le nouvellement créé $ scope de la vue d'accueil. Un contrôleur est une logique qui contrôle une vue particulière. Voici à quoi cela devrait ressembler:
'use strict'; angular.module ('myApp.home', ['ngRoute']) // Route déclarée .config (['$ routeProvider', fonction ($ routeProvider) $ routeProvider.when ('/ home', templateUrl: 'home /home.html ', contrôleur:' HomeCtrl ');]) // Contrôleur d'origine. Contrôleur (' HomeCtrl ', [fonction () ]);Maintenant ouvrir app.js et inclure le module d'accueil myApp.home dans l'application Déclarez également la route par défaut de notre application en utilisant le $ routeProvider.otherwise méthode à la vue d'accueil.
'use strict'; angular.module ('monApp', ['ngRoute', 'monApphome' // module de base nouvellement ajouté]). config (['$ routeProvider', fonction ($ routeProvider) // Définir la vue par défaut de notre application sur home $ routeProvider.otherwise (redirectTo: '/ home')));Ensuite, pour afficher la page d'accueil, nous devons inclure home.js dans le fichier de modèle HTML principal de l'application. S'ouvrir index.html et comprennent les éléments suivants:
Redémarrez le serveur et pointez votre navigateur sur http: // localhost: 8000 / app / index.html et vous devriez voir l'écran de connexion:
Pour commencer, nous devons créer un compte gratuit sur Firebase. Lors d'une inscription réussie, nous obtiendrons un écran comme celui-ci:
Notez l'URL de l'application créée et cliquez sur le bouton Gérer l'application bouton. Nous allons utiliser cette URL Firebase pour interagir avec la base de données Firebase.
Nous utiliserons Firebase pour authentifier notre application en utilisant un email et un mot de passe. Pour que cela fonctionne, nous devons l'activer à partir de Firebase. Dans le tableau de bord, cliquez sur le bouton Login & Auth onglet dans le menu de gauche. Dans cet écran, sous le Mot de passe de l'email onglet, vérifier Activer l'authentification par courrier électronique et mot de passe comme montré:
Ajouter un nouvel utilisateur avec un Email et Mot de passe contre lequel nous nous authentifierons après avoir implémenté la fonctionnalité de connexion.
Pour commencer à utiliser Firebase, incluez les scripts suivants dans app / index.html:
Ensuite, nous devons injecter le base de feu module dans home.js. Ajouter le base de feu module dans home.js comme indiqué ci-dessous:
angular.module ('monApp.home', ['ngRoute', 'firebase'])Nous sommes maintenant prêts à interagir avec Firebase. S'ouvrir home.js et à l'intérieur HomeCtrl, créer une nouvelle fonction appelée Se connecter authentifier l'utilisateur. Nous allons utiliser $ scope pour créer la nouvelle fonction. $ scope est un objet qui fait référence au modèle d'application et sert également de colle entre le contrôleur d'application et la vue. Nous allons donc injecter le $ scope objet dans le Se connecter fonction de sorte que le modèle d'objet de la vue soit accessible à l'intérieur du Se connecter une fonction.
$ scope.SignIn = fonction ($ scope) nom d'utilisateur var = $ scope.user.email; var password = $ scope.user.password; // Auth Logic sera ici
Ensuite, à l'intérieur HomeCtrl créez une instance Firebase en utilisant l'URL Firebase comme indiqué:
var firebaseObj = new Firebase ("https://blistering-heat-2473.firebaseio.com"); le $ firebaseSimpleLogin module est utilisé pour s’authentifier auprès de Firebase à l’aide d’un identifiant de messagerie et d’un mot de passe. Pour l'utiliser, nous devrons injecter le $ firebaseSimpleLogin module en HomeCtrl comme montré:
.contrôleur ('HomeCtrl', ['$ scope', '$ firebaseSimpleLogin', fonction ($ scope, $ firebaseSimpleLogin) En utilisant firebaseObj créer un $ firebaseSimpleLogin exemple comme indiqué:
var loginObj = $ firebaseSimpleLogin (firebaseObj);
Maintenant, en utilisant l’API $ login, nous authentifierons l’ID de messagerie et le mot de passe auprès de Firebase.. loginObj. $ login prend dans l'email et mot de passe comme paramètres. En cas d’authentification réussie, nous obtenons un rappel de succès et en cas d’authentification infructueuse, nous obtenons un rappel d’erreur..
$ scope.SignIn = fonction (événement) événement.preventDefault (); // Pour empêcher l'actualisation du formulaire var username = $ scope.user.email; var password = $ scope.user.password; loginObj. $ login ('mot de passe', email: nom d'utilisateur, mot de passe: mot de passe) .then (fonction (utilisateur) // Rappel de la console.log ('Authentification réussie');, fonction (erreur) // Failure callback console.log ('Échec de l'authentification');); Maintenant, pour que tout le code de contrôleur ci-dessus fonctionne, nous devons attacher le contrôleur à la vue. AngularJS fournit une directive appelée ngController pour attacher un contrôleur à une vue. S'ouvrir home.html et ajoutez le ngController directive à la corps élément à attacher à HomeCtrl.
Nous avons besoin que les valeurs de courrier électronique et de mot de passe soient accessibles à l’intérieur du Se connecter fonction du contrôleur. AngularJS fournit une directive appelée ngModel pour lier sa valeur à $ scope afin qu'il soit accessible à l'intérieur du Se connecter une fonction. Inclure le ngModel directive à l'email et mot de passe contribution éléments comme indiqué:
AngularJS & Firebase App!
Enfin, ajoutez la directive ngClick au bouton de connexion pour appeler le Se connecter une fonction:
Enregistrez toutes les modifications et redémarrez le serveur. Pointez votre navigateur sur http: // localhost: 8000 / app / index.html # / home et essayez de vous connecter à l'aide de l'ID de messagerie. [email protected] et mot de passe geai. En cas d’authentification de l’utilisateur réussie, vous devriez voir le message Authentification réussie dans la console du navigateur.
Dans ce tutoriel, nous avons expliqué comment commencer à créer une application Web AngularJS. Nous avons implémenté la fonctionnalité de connexion et authentifié avec succès l'utilisateur sur la base de données Firebase..
Dans la deuxième partie de ce didacticiel, nous allons passer au niveau suivant en mettant en œuvre des validations, des fonctionnalités d’inscription et d’autres fonctionnalités. Le code du tutoriel ci-dessus est disponible sur GitHub.
Faites-nous savoir vos pensées dans les commentaires ci-dessous.
Assurez-vous également de consulter la vaste gamme de ressources AngularJS disponibles sur le marché Envato. Il y a tout, des directives de table CRUD aux systèmes de billetterie, etc..
Ressources AngularJS sur le marché Envato
