MEAN.JS - Construire une page unique avec Angular

Dans la pile MEAN, Angular est connu sous le nom de deuxième framework JavaScript, qui permet de créer des applications à une seule page de manière propre Model View Controller (MVC).

AngularJS en tant que Framework frontal utilise les éléments suivants:

  • Utilise Bower pour installer des fichiers et des bibliothèques

  • Utilise des contrôleurs et des services pour la structure d'application angulaire

  • Crée différentes pages HTML

  • Utilise le module ngRoute pour gérer le routage et les services pour l'application AngularJS

  • Utilise Bootstrap pour rendre une application attrayante

Configuration de notre application angulaire

Construisons une application simple qui a un backend Node.js et un frontend AngularJS. Pour notre application Angular, nous voudrons -

  • Deux pages différentes (accueil, étudiant)

  • Un contrôleur angulaire différent pour chacun

  • Aucune actualisation de la page lors du changement de page

Bower et tirage des composants

Nous aurons besoin de certains fichiers pour notre application comme bootstrap et angular. Nous dirons à Bower de récupérer ces composants pour nous.

Tout d'abord, installez bower sur votre machine en exécutant la commande ci-dessous sur votre terminal de commande -

npm install -g bower

Cela installera bower et le rendra accessible globalement sur votre système. Placez maintenant les fichiers .bowerrc et bower.json sous votre dossier racine. Dans notre cas c'estmean-demo. Le contenu des deux fichiers est comme ci-dessous -

.bowerrc - Cela dira à Bower où placer nos fichiers -

{
   "directory": "public/libs"
}

bower.json - Ceci est similaire à package.json et indiquera à Bower quels packages sont nécessaires.

{
   "name": "angular",
   "version": "1.0.0",
   "dependencies": {
      "bootstrap": "latest",
      "angular": "latest",
      "angular-route": "latest"
   }
}

Ensuite, installez les composants Bower à l'aide de la commande ci-dessous. Vous pouvez voir bower extraire tous les fichiers sous public / libs .

$ bower install

Notre structure de répertoire serait la suivante -

mean-demo
   -app
   -config
   -node_modules
   -public
      -js
         --controllers
   -MainCtrl.js
   -StudentCtrl.js
      --app.js
      --appRoutes.js
   -libs
   -views
      --home.html
   --student.html
      -index.html
   -bower.json
   -package.json
   -server.js

Contrôleurs angulaires

Notre contrôleur (public / js / controllers / MainCtrl.js) est le suivant -

angular.module('MainCtrl', []).controller('MainController', function($scope) {
   $scope.tagline = 'Welcome to tutorials point angular app!';
});

Le contrôleur public / js / controllers / StudentCtrl.js est le suivant -

angular.module('StudentCtrl', []).controller('StudentController', function($scope) {
   $scope.tagline = 'Welcome to Student section!';
});

Routes angulaires

Notre fichier de routes (public / js / appRoutes.js) est le suivant -

angular.module('appRoutes', []).config(['$routeProvider',
   '$locationProvider', function($routeProvider, $locationProvider) {
   $routeProvider
      // home page
      .when('/', {
         templateUrl: 'views/home.html',
         controller: 'MainController'
      })
      // students page that will use the StudentController
      .when('/students', {
         templateUrl: 'views/student.html',
         controller: 'StudentController'
      });
   $locationProvider.html5Mode(true);
}]);

Maintenant que nous avons nos contrôleurs et nos routes, nous allons tous les combiner et injecter ces modules dans notre principal public / js / app.js comme suit -

angular.module('sampleApp', ['ngRoute', 'appRoutes', 'MainCtrl', 'StudentCtrl']);

Voir la fiche

Angular utilise le fichier modèle, qui peut être injecté dans la <div ng-view> </div> dans le fichier index.html. La directive ng-view crée un espace réservé, où une vue correspondante (vue HTML ou ng-template) peut être placée en fonction de la configuration. Pour plus d'informations sur les vues angulaires, visitez ce lien .

Lorsque vous êtes prêt avec le routage, créez des fichiers modèles plus petits et injectez-les dans le fichier index.html . Le fichier index.html aura l'extrait de code suivant -

<!doctype html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <base href="/">
      <title>Tutorialspoint Node and Angular</title>
      
      <!-- CSS -->
      <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
      <link rel="stylesheet" href="css/style.css"> <!-- custom styles -->
      
      <!-- JS -->
      <script src="libs/angular/angular.min.js"></script>
      <script src="libs/angular-route/angular-route.min.js"></script>
      
      <!-- ANGULAR CUSTOM -->
      <script src="js/controllers/MainCtrl.js"></script>
      <script src="js/controllers/StudentCtrl.js"></script>
      <script src="js/appRoutes.js"></script>
      <script src="js/app.js"></script>
   </head>
   <body ng-app="sampleApp" ng-controller="MainController">
      <div class="container">
      
         <!-- HEADER -->
         <nav class="navbar navbar-inverse">
            <div class="navbar-header">
               <a class="navbar-brand" href="/">Tutorial</a>
            </div>
            <ul class="nav navbar-nav">
               <li><a href="/students">Students</a></li>
            </ul>
         </nav>
         <!-- ANGULAR DYNAMIC CONTENT -->
         <div ng-view></div>
      </div>
   </body>
</html>

Application en cours d'exécution

Exécution

Vous pouvez télécharger le code source de cette application dans ce lien . Téléchargez le fichier zip; extrayez-le dans votre système. Ouvrez le terminal et exécutez la commande ci-dessous pour installer les dépendances du module npm.

$ cd mean-demo
$ npm install

Ensuite, exécutez la commande ci-dessous -

$ node start

Vous obtiendrez une confirmation comme indiqué dans l'image ci-dessous -

Maintenant, allez dans le navigateur et tapez http://localhost:3000. Vous obtiendrez la page comme indiqué dans l'image ci-dessous -

Cliquez sur le lien étudiants , vous verrez l'écran comme ci-dessous -

Notre frontend angulaire utilisera le fichier modèle et l'injectera dans le <div ng-view> </div> de notre fichier index.html . Il le fera sans actualisation de la page.