0

Trabajo con AngularJS v1, el problema es que no me muestra el resultado en la pagina solo me muestra {{resultado}} no me muestra el valor que contiene esa variable, muestro el código.

<!DOCTYPE html>
<html lang="en" ng-app="operacion">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Angular y bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javasript" src="js/angular.min.js"></script>
</head>
<body>

    <div class="container text-center" ng-controller="preguntasController">
        <div class="jumbotron">
            <h1>Angular JS + Bootstrap</h1>
        </div>

        <div class="panel panel-default col-sm-6 col-sm-offset-3">
            <div class="panel-body">
                <p>¿Cuál es el resultado de la siguiente operación 6*9-12?</p>
                <button class="btn btn-primary" data-toggle="modal" data-target=".ventanaModal" ng-click="respuesta()" type="button">Calcular</button>
            </div>
        </div>

        <div class="modal fade ventanaModal">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-body">
                        <h1>{{resultado}}</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>



<script type="text/javascript">
    var miApp = angular.module('operacion', []);
    miApp.controller('preguntasController', function($scope){
        $scope.respuesta = function () {
            $scope.resultado = 6*9-12;
        }
    });
</script>

</body>
</html>

Error: Error angular

ruta del archivo angular.min.js ruta del archivo js

vs code

7
  • revisa tu consola si tienes algún error? aparentemente es por un error de referencia en tus archivos javascript, creo que es el angular.min.js no lo estas referenciando bien.
    – zerokira
    Commented el 17 sept. 2018 a las 16:44
  • @TheVicious Es verdad me da error dice que esta mal la referencia pero yo lo veo bien en la ruta correcta, llevo haciendo mas de 20 ejemplos y este no me funciona. Commented el 17 sept. 2018 a las 16:55
  • puedes mostrar el error de la consola, así sabemos en que estas fallando.
    – zerokira
    Commented el 17 sept. 2018 a las 17:13
  • @TheVicious Actualizado el post Commented el 17 sept. 2018 a las 17:34
  • En tu ruta local cuando haces la peticion angular.min.js <script type="text/javasript" src="angular.min.js"></script> Fijate que este correcto el directorio donde esta el archivo js
    – DaY
    Commented el 17 sept. 2018 a las 19:12

2 respuestas 2

0

Usando CDNs funciona, debe ser algún error en las rutas

var miApp = angular.module('operacion', []);
miApp.controller('preguntasController', function($scope) {
  $scope.respuesta = function() {
    $scope.resultado = 6 * 9 - 12;
  }
});
<!DOCTYPE html>
<html lang="en" ng-app="operacion">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Angular y bootstrap</title>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" crossorigin="anonymous" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha256-VsEqElsCHSGmnmHXGQzvoWjWwoznFSZc6hs7ARLRacQ=" crossorigin="anonymous"></script>


</head>

<body>

  <div class="container text-center" ng-controller="preguntasController">
    <div class="jumbotron">
      <h1>Angular JS + Bootstrap</h1>
    </div>

    <div class="panel panel-default col-sm-6 col-sm-offset-3">
      <div class="panel-body">
        <p>¿Cuál es el resultado de la siguiente operación 6*9-12?</p>
        <button class="btn btn-primary" data-toggle="modal" data-target=".ventanaModal" ng-click="respuesta()" type="button">Calcular</button>
      </div>
    </div>

    <div class="modal fade ventanaModal">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-body">
            <h1>{{resultado}}</h1>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

1
  • Lo rato es que antes funcionaba y ahora no, he cambiado de ruta el archivo js de angular, lo he vuelto a descargar y me sigue dando el mismo problema, efectivamente si funciona con CDN. Commented el 17 sept. 2018 a las 19:11
0

Ya vi el error gracias a todos por su tiempo. Error

<script type="text/javasript" src="js/angular.min.js"></script>

Correción

<script type="text/javascript" src="js/angular.min.js"></script>

Faltaba una "c"

Saludos!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.