none
Problemas AngularJs en ASP.NET Core 2 (C#) RRS feed

  • Pregunta

  • Buenas, tengo un problema. Estoy haciendo una página en ASP.NET Core 2 MVC con Angular (no tengo mucha idea porque arranqué el viernes con esos dos lenguajes jaja). 

    Quiero cargar unos datos de una DB MySQL en una tabla pero es como si no me reconociera a Angular. Probé descargando la librería AngularJs y AngularJs Core de NuGet pero no funciona. Probé importando el archivo angular.min.js descargado de la página de angular pero tampoco.

    Dejó el código que uso:

    Tengo una carpeta "Scripts" y dentro una llamada "app". Dentro de "app" hay una carpeta llamada "controladores" (la cual contiene un archivo llamado "EjemploControler.js") y un archivo app.js

    Este es el código de app.js

    var misDatos = angular.module('datosApp', []); //declaro el módulo

    Este es el código de "EjemploControler.js"

    misDatos.controller('controladorDatos', function ($scope, $http) {
    
            $scope.importar = function () {
    
                $http.get('\php\listar.php').success(function (datos) {
    
                    $scope.equipo = datos;
    
                });
    
            }
    
            $scope.importar();
    
    });

    Esa última función lee un archivo .php (el cual lee otro) para conectarse a la base de datos y traer la info.


    @{
        ViewData["Title"] = "Mostrar";
    }
    
    @section scripts {
        //Acá leo los dos archivos .js donde está el módulo y el controlador
        <script src="~/Scripts/app/app.js"></script>
        <script src="~/Scripts/app/controladores/EjemploControler.js"></script>
    
    }
    
    <div ng-app="datosApp">  //llamo al módulo
    
        <h2></h2>
    
        <div ng-controller="controladorDatos"> //llamo al controlador
    
            <table class="table table-hover">
                    <thead>
                        <tr> //cargo las cabeceras de la tabla
                            <th>ID</th>
                            <th>Usuario</th>
                            <th>Nombre</th>
                            <th>Apellido</th>
                            <th>Teléfono</th>
                            <th>Email</th>
                            <th>Estado</th>
                        </tr>
                    </thead> 
                    <tr class="danger" ng-repeat="usuario in equipo" style="vertical-align: central"> //cargo los datos que se obtienen desde la base de datos
                        <td>{{usuario.id}}</td>
                        <td>{{usuario.usuario}}</td>
                        <td>{{usuario.nombre}}</td>
                        <td>{{usuario.apellido}}</td>
                        <td>{{usuario.Telefono}}</td>
                        <td>{{usuario.email}}</td>
                        <td>{{usuario.estado | cambiar}}</td>
                    </tr>
                </table>
    
        </div>
    
    </div>
    Así aparece


    Gracias :)


    miércoles, 8 de abril de 2020 21:54

Todas las respuestas

  • hola

    Que estructura json tiene la variable "datos" ?que recibes en el get

    Puedes usar el developer tools del browser (accedes con F12) para poner un breakpoint en el codigo javascript, o sino usar el

    console.log(datos);

    para verlo en la solapa Console

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    miércoles, 8 de abril de 2020 22:05
  • La variable Datos la declaro dentro del function()

    Skull

    miércoles, 8 de abril de 2020 23:04
  • si claro, eso lo veo y la asignas al $scope

    pero de la llamada al php que estructura json recibes?

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina


    miércoles, 8 de abril de 2020 23:52
  • Este es el Listar.php

    <?php
    // incluir archivo de conexión
    include('conexion.php');
      // asignamos la función de conexion a una variable
      $con = conexion();
      // realizamos la consulta SQL para recuperar todos los registros de la tabla
      $resultado = $con->query("SELECT * FROM usuarios");
      // creamo una variable del tipo array la cual almacena todos los registros
      $datos = array();
      // iteramos todos los registros devueltos y llenamos el array
      while ($row = $resultado->fetch_assoc()){
    
       $datos[] = $row;
       
      }
    
      // convertimos el array al formato json y mostramos para que angular JS pueda formatear la información
      echo json_encode($datos);
    
    ?>

    Y este es el conexion.php

    <?php
    //*******FUNCION PRINCIPAL PARA LA CONEXION A LA BASE DE DATOS MySQL*********//
    function conexion()
    { 
    // ** Ajustes de MySQL ** // 
    global $DB_HOST; 
    global $DB_USER; 
    global $DB_PASSWORD; 
    global $DB_NAME; 
    /** Host de MySQL (es muy probable que no necesites cambiarlo) */ 
    $DB_HOST = 'localhost';
    /** Tu nombre de usuario de MySQL */ 
    $DB_USER = 'root';
    /** Tu password de MySQL */ 
    $DB_PASSWORD = '';
    /** El nombre de tu base de datos */ 
    $DB_NAME = 'prueba';
    
    
    $mysqli = @new mysqli($DB_HOST, $DB_USER, $DB_PASSWORD, $DB_NAME); 
     if (mysqli_connect_errno()) {
        printf(error_db_connect());
        exit();
        }
        return $mysqli;
    }
    
    ?>


    Skull

    jueves, 9 de abril de 2020 12:06
  • hola

    No hace falta el codigo del php, hace falta ver que json recibes

    sabes como ver el developer tools del browser? porque alli podrias ver el json si analizas lo que envias en el

    console.log()

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    jueves, 9 de abril de 2020 14:23
  • No, la verdad que ni idea de como fijarme eso jaja

    Skull

    jueves, 9 de abril de 2020 23:04
  • hola

    >>la verdad que ni idea de como fijarme eso

    pero si lo escribi, no lo lesite? lo que menciones de F12 en el browser para abrir el developer tools y en la solapa Console ver el json que se registra cuando pones en tu codigo la linea

    console.log(datos);

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    jueves, 9 de abril de 2020 23:15
  • Ahh, oka. Que animal! xd

    Bueno, apenas pueda solucionar otro error que me da ahora (no me reconoce el archivo AccountController.cs) lo pruebo y te digo.


    Skull

    viernes, 10 de abril de 2020 1:40
  • Cuando abro la consola con F12 me dice 

    Falló la carga de <script> con fuente “https://localhost:44304/Home/Scripts/app/app.js”.


    Skull

    lunes, 13 de abril de 2020 13:53
  • hola

    >>Falló la carga de <script> con fuente

    bueno entonces ni siquiera es un problema con el json que obtienes porque en realidad los .js no se estan ejecutando, o sea Angular no aplica

    puedes validar que esa url es correcta? si pones esas url en el browser puedes ver el codigo javascript?

    lo pregunto porque me suena raro que diga Home en el url, por lo general la carpeta Scripts esta por fuera de cualquier carpeta de una view en concreto

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    lunes, 13 de abril de 2020 22:28