MEAN.JS - Creazione di una pagina singola con angolare

Nello stack MEAN, Angular è noto come secondo framework JavaScript, che consente di creare applicazioni a pagina singola in un modo pulito Model View Controller (MVC).

AngularJS come framework front-end utilizza le seguenti cose:

  • Utilizza Bower per installare file e librerie

  • Utilizza controller e servizi per la struttura dell'applicazione angolare

  • Crea diverse pagine HTML

  • Utilizza il modulo ngRoute per gestire il routing ei servizi per l'applicazione AngularJS

  • Utilizza Bootstrap per rendere attraente un'applicazione

Configurazione della nostra applicazione angolare

Creiamo una semplice applicazione che abbia un backend Node.js e un frontend AngularJS. Per la nostra applicazione angolare, vorremo:

  • Due pagine diverse (Home, Studente)

  • Un controller angolare diverso per ciascuno

  • Nessun aggiornamento della pagina quando si cambia pagina

Bower e tirando in componenti

Avremo bisogno di determinati file per la nostra applicazione come bootstrap e angular. Diremo a bower di recuperare quei componenti per noi.

Innanzitutto, installa bower sulla tua macchina eseguendo il comando seguente sul tuo terminale di comando -

npm install -g bower

Questo installerà bower e lo renderà accessibile a livello globale sul tuo sistema. Ora posiziona i file .bowerrc e bower.json nella cartella principale. Nel nostro caso lo èmean-demo. I contenuti di entrambi i file sono i seguenti:

.bowerrc - Questo dirà a Bower dove posizionare i nostri file -

{
   "directory": "public/libs"
}

bower.json - Questo è simile a package.json e dirà a Bower quali pacchetti sono necessari.

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

Successivamente, installa i componenti Bower utilizzando il comando seguente. Puoi vedere bower tirare in tutti i file sotto public / libs .

$ bower install

La nostra struttura di directory sarebbe la seguente:

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

Controller angolari

Il nostro controller (public / js / controllers / MainCtrl.js) è il seguente:

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

Il controller public / js / controllers / StudentCtrl.js è il seguente:

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

Percorsi angolari

Il nostro file dei percorsi (public / js / appRoutes.js) è il seguente:

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);
}]);

Ora che abbiamo i nostri controller e percorsi, li combineremo tutti e inseriremo questi moduli nel nostro principale public / js / app.js come segue:

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

Vedi il file

Angular utilizza il file modello, che può essere iniettato nel <div ng-view> </div> nel file index.html. La direttiva ng-view crea un segnaposto, dove una vista corrispondente (HTML o vista ng-template) può essere posizionata in base alla configurazione. Per ulteriori informazioni sulle viste angolari, visitare questo collegamento .

Quando sei pronto con il routing, crea file modello più piccoli e inseriscili nel file index.html . Il file index.html avrà il seguente frammento di codice:

<!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>

Applicazione in esecuzione

Esecuzione

È possibile scaricare il codice sorgente per questa applicazione in questo collegamento . Scarica il file zip; estrailo nel tuo sistema. Apri il terminale ed esegui il comando seguente per installare le dipendenze del modulo npm.

$ cd mean-demo
$ npm install

Quindi esegui il comando seguente:

$ node start

Riceverai una conferma come mostrato nell'immagine qui sotto -

Ora vai al browser e digita http://localhost:3000. Otterrai la pagina come mostrato nell'immagine qui sotto -

Fai clic sul collegamento Studenti , vedrai la schermata come sotto -

Il nostro frontend angolare utilizzerà il file modello e lo inietterà nel <div ng-view> </div> nel nostro file index.html . Lo farà senza un aggiornamento della pagina.