Porque é que o meu código AngularJS não funciona? Ele funciona no editor W3Schools, mas não em qualquer navegador

Question

Porque é que o meu código AngularJS não funciona? Ele funciona no editor W3Schools, mas não em qualquer navegador

<!DOCTYPE html>
<html ng-app = "" ng-controller = "myController">
	<head>
		<title>YouToDo</title>
		<script src="lib/angular/angular.min.js"></script>
	</head>
	<body>
		<input type = "text" maxlength = "256" width = "256" ng-model = "task"><br><br>
		<input type = "button" value = "Add" ng-click = "addTask()"><br><br>
		<table border = "0">
			<tr></tr>
		</table>
		<script>
			function myController($scope) {
    			$scope.addTask = function() {
     				var myEl = angular.element( document.querySelector( 'tr' ) );
     				myEl.prepend('<tr><td>' + $scope.task + '</td></tr>');     
    			}
			}
		</script>
		
	</body>
</html>

funciona no editor W3Schools mas não em qualquer navegador! Nem no cromado nem no Firefox. Tenho AngularJS 1.5.6. Ajudar.

2

javascript angularjs

Author: Nitish Kulshrestha, 2016-05-30

Source

7 answers

score 1 · Answer 1

Pode haver algumas questões

não está a carregar correctamente angular framework
ng-app = "" está vazio. Deve ter um nome que necessitará de instanciar a estrutura angular na sua aplicação
angular.module('name you provided in ng-app',[]) desapareceu. Também é necessário arrancar angular com a sua aplicação.
VEJA TAMBÉM Como escrever um controller

score 0 · Answer 2

Bem, você não pode executar angular diretamente no seu navegador você precisa ter a biblioteca localmente.

Por favor, dê uma olhada neste vídeo para ajudá-lo a configurar o seu ambiente. Ele realmente me ajudou, também tem algumas ferramentas recomendadas para lidar com diferentes aspectos de aplicações angulares.

Https://www.youtube.com/watch?v=ofASsumsf7E&list=PLEDbaVSIL58MB78qU6_I_FZZgNe_Mcb5j

score 0 · Answer 3

Porque é que o meu código AngularJS não funciona? Porque não tens o angular.minuto.o ficheiro js na sua pasta 'lib / angular'. Mas o servidor deles tem.

A solução rápida é usar o Google hospedado um.

Substituir:

src="lib/angular/angular.min.js"

Com

src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"

score 0 · Answer 4

Acho que te escapou alguma coisa. Lá em baixo estão as coisas que perdeste.

modulename Angular
declarar módulo angular
Adicionar construtor do controlador

  

<!DOCTYPE html>
<html ng-app="demoApp" ng-controller = "myController">
    <head>
        <title>YouToDo</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    </head>
    <body>
        <input type = "text" maxlength = "256" width = "256" ng-model = "task"><br><br>
        <input type = "button" value = "Add" ng-click = "addTask()"><br><br>
        <table border = "0">
            <tr></tr>
        </table>
        <script>
            angular.module('demoApp',[]) //call the module
                .controller('myController',myController); // controller constructor

            function myController($scope) {
                $scope.addTask = function() {
                    var myEl = angular.element( document.querySelector( 'tr' ) );
                    myEl.prepend('<tr><td>' + $scope.task + '</td></tr>');     
                }
            }
        </script>

    </body>
</html>

score 0 · Answer 5

Tenho a sensação de que você é novo para angular, então pode haver algumas coisas a correr mal,

A Sua Fonte
Este caminho existe mesmo no teu pc ?, se não eu recomendaria usar um CDN como
Tente procurar mais no seu código angular, o código angular básico seria

angular.module('myApp', []).controller("myCtrl", ['$scope',
  function($scope) {
    $scope.tasks = [];
    $scope.addTask = function (){
       $scope.tasks.push({taskName : $scope.task});
      $scope.task = null;
    };
  }
]);

<!DOCTYPE html>
<html>

<head>
  <title>Angular JS</title>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
</head>

<body ng-app="myApp">

  <div ng-controller="myCtrl">
    
    <input type = "text" maxlength = "256" width = "256" ng-model = "task"><br><br>
	<input type = "button" value = "Add" ng-click = "addTask()"><br><br>
    
    <table border = "0">
			<tr ng-repeat = "x in tasks">
              <td>{{x.taskName}}</td>
            </tr>
	</table>
    
  </div>
</body>

</html>

Tente usar o máximo angular que puder, como pode ver usei ng-repeat que é uma maneira melhor e mais limpa de mostrar uma lista. Também vou sugerir que use um ângulo normal.ficheiro js em vez de angular.minuto.js arquivo porque é mais fácil de olhar para erros na versão não minificada, é apenas para o desenvolvimento, no momento do lançamento apenas usar a versão minificada como é mais rápido de baixar. Espero que ache isto útil.

score 0 · Answer 6

Não está a ficar angular.minuto.ficheiro js Seria melhor se usasse CDN

Https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js

No script tag

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

score 0 · Answer 7

Substituir simplesmente

<script src="lib/angular/angular.min.js"></script>

Com

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

O primeiro funciona no W3School porque eles têm os ficheiros angularjs nesse local enquanto você não o faz. ou o faz ou muda o src como eu mostrei acima.

<!DOCTYPE html>
<html ng-app="" ng-controller="myController">

<head>
  <title>YouToDo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body>
  <input type="text" maxlength="256" width="256" ng-model="task">
  <br>
  <br>
  <input type="button" value="Add" ng-click="addTask()">
  <br>
  <br>
  <table border="0">
    <tr></tr>
  </table>
  <script>
    function myController($scope) {
      $scope.addTask = function() {
        var myEl = angular.element(document.querySelector('tr'));
        myEl.prepend('<tr><td>' + $scope.task + '</td></tr>');
      }
    }
  </script>

</body>

</html>