MEAN.JS - Construcción de una sola página con Angular

En la pila MEAN, Angular se conoce como el segundo marco de JavaScript, que permite crear aplicaciones de una sola página en una forma limpia de Model View Controller (MVC).

AngularJS como marco front-end utiliza las siguientes cosas:

Utiliza Bower para instalar archivos y bibliotecas
Utiliza controladores y servicios para la estructura de la aplicación angular
Crea diferentes páginas HTML
Utiliza el módulo ngRoute para manejar el enrutamiento y los servicios para la aplicación AngularJS
Utiliza Bootstrap para hacer atractiva una aplicación

Configuración de nuestra aplicación angular

Construyamos una aplicación simple que tenga un backend Node.js y un frontend AngularJS. Para nuestra aplicación Angular, queremos:

Dos páginas diferentes (Inicio, Estudiante)
Un controlador angular diferente para cada
No se actualiza la página al cambiar de página

Bower y extracción de componentes

Necesitaremos ciertos archivos para nuestra aplicación como bootstrap y angular. Le diremos a Bower que nos traiga esos componentes.

Primero, instale bower en su máquina ejecutando el siguiente comando en su terminal de comandos:

npm install -g bower

Esto instalará bower y lo hará accesible globalmente en su sistema. Ahora coloque los archivos .bowerrc y bower.json en su carpeta raíz. En nuestro caso esmean-demo. El contenido de ambos archivos es el siguiente:

.bowerrc - Esto le dirá a Bower dónde colocar nuestros archivos:

{
   "directory": "public/libs"
}

bower.json - Es similar a package.json y le indicará a Bower qué paquetes son necesarios.

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

A continuación, instale los componentes de Bower utilizando el siguiente comando. Puede ver que bower extrae todos los archivos en public / libs .

$ bower install

Nuestra estructura de directorio sería la siguiente:

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

Controladores angulares

Nuestro controlador (public / js / controllers / MainCtrl.js) es el siguiente:

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

Controller public / js / controllers / StudentCtrl.js es el siguiente:

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

Rutas angulares

Nuestro archivo de rutas (public / js / appRoutes.js) es el siguiente:

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

Ahora que tenemos nuestros controladores y rutas, los combinaremos todos e inyectaremos estos módulos en nuestro público principal / js / app.js de la siguiente manera:

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

Ver archivo

Angular usa el archivo de plantilla, que se puede inyectar en <div ng-view> </div> en el archivo index.html. La directiva ng-view crea un marcador de posición, donde se puede colocar una vista correspondiente (vista HTML o ng-template) según la configuración. Para obtener más información sobre vistas angulares, visite este enlace .

Cuando esté listo con el enrutamiento, cree archivos de plantilla más pequeños e inyéctelos en el archivo index.html . El archivo index.html tendrá el siguiente fragmento de código:

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

Aplicación en ejecución

Ejecución

Puede descargar el código fuente de esta aplicación en este enlace . Descargue el archivo zip; extraerlo en su sistema. Abra la terminal y ejecute el siguiente comando para instalar las dependencias del módulo npm.

$ cd mean-demo
$ npm install

A continuación, ejecute el siguiente comando:

$ node start

Obtendrá una confirmación como se muestra en la imagen a continuación:

Ahora, vaya al navegador y escriba http://localhost:3000. Obtendrá la página como se muestra en la imagen a continuación:

Haga clic en el enlace Estudiantes , verá la siguiente pantalla:

Nuestra interfaz angular usará el archivo de plantilla y lo inyectará en <div ng-view> </div> en nuestro archivo index.html . Lo hará sin actualizar la página.

↰ Previous page Next page ↱