TUTORIALES

Configuración del proyecto AngularJS

abril 10, 2024 ,
¡Este artículo es para versiones deprecadas de Angular!
Visita el curso ACTUALIZADO a la última versión


Para configurar un proyecto de AngularJS, puedes seguir estos pasos:

  1. Configurar el entorno de desarrollo:

    • Asegúrate de tener Node.js y npm instalados en tu sistema siguiendo las instrucciones que proporcioné anteriormente.

  2. Crear un nuevo proyecto:

    • Crea un directorio para tu proyecto AngularJS y navega a él desde la línea de comandos.

  3. Inicializar un nuevo proyecto npm:

    • Ejecuta el siguiente comando para inicializar un nuevo proyecto npm en tu directorio: 

      npm init -y

    Esto creará un archivo package.json con la configuración predeterminada en tu directorio.

  4. Instalar AngularJS:

    • Utiliza npm para instalar AngularJS como una dependencia de tu proyecto: 

      npm install angular@17.x.x --save

    Reemplaza 17.x.x con la versión específica de AngularJS que deseas instalar (por ejemplo, 15.8.2).

  5. Organizar la estructura del proyecto:

    • Decide cómo deseas organizar la estructura de tu proyecto. Puedes optar por una estructura simple que incluya archivos HTML, CSS y JavaScript en un solo directorio, o puedes utilizar una estructura más modular con directorios separados para diferentes componentes de tu aplicación.

  6. Crear archivos HTML y JavaScript:

    • Crea un archivo HTML para tu aplicación AngularJS y un archivo JavaScript para el código de AngularJS. Por ejemplo:

      index.html: 

      <!DOCTYPE html>
<html lang="es" ng-app="miApp">
<head>
  <meta charset="UTF-8">
  <title>Aplicación AngularJS</title>
  <script src="node_modules/angular/angular.min.js"></script>
  <script src="app.js"></script>
</head>
<body>
  <div ng-controller="MiControlador">
    {{ mensaje }}
  </div>
</body>
</html>

      app.js: 

      angular.module('miApp', [])
  .controller('MiControlador', function($scope) {
    $scope.mensaje = 'Hola Mundo!';
  });

    • En este ejemplo, se incluye AngularJS desde el directorio node_modules y se define un controlador que muestra un mensaje en la vista.

  7. Ejecutar la aplicación:

    • Abre tu archivo HTML en un navegador web para ver tu aplicación en funcionamiento.

Con estos pasos, deberías poder configurar un proyecto básico de AngularJS y comenzar a desarrollar tu aplicación. A partir de aquí, puedes agregar más funcionalidades, estructurar tu código de manera más modular y explorar las capacidades de AngularJS para crear aplicaciones más complejas.





0 Comments:

Publicar un comentario

Blogger Templates Created by ThemeXpose