2016-02-27 8 views
-1

J'ai écrit ce code simple en angulaire comme un exercice d'apprentissage, mais je ne comprends pas pourquoi je reçois le mauvais résultat dans mon navigateur.pourquoi mon code angulaire ne fonctionne pas?

Le résultat que je vois dans le navigateur est le texte « {{HelloMessage}} » et non « Bonjour tout le monde ».

Le code:

<!DOCTYPE html> 
<html lang="en" ng-app> 
<head> 
<meta charset="UTF-8"> 
<title>Hello World</title> 
</head> 
<body> 

<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1> 

<script src="angular.js"></script> 
<script type="text/javascript"> 
    function HelloWorldCtrl($scope){ 
     $scope.helloMessage = "Hello World"; 
    } 
</script> 

</body> 
</html> 

Ceci est la sortie, et je ne vois pas d'erreur dans le navigateur:

enter image description here

+0

Quelle est votre erreur? –

+0

peut être angular.js pas importer correctement !!! –

+0

angular.js est importé correctement à coup sûr. – Yanshof

Répondre

3

ceci est votre travail correctement code !!!!!!

function HelloWorldCtrl($scope){ 
 
     $scope.helloMessage = "Hello World"; 
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app> 
 
    <h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1> 
 
</div>

+0

vous a upvoted pour votre belle conclusion. Mais injecter le src au sommet est un must –

2
<!DOCTYPE html> 

// call your myApp 
<html lang="en" ng-app="myApp"> 

<head> 
<meta charset="UTF-8"> 
<title>Hello World</title> 
</head> 
<body> 

<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1> 
<script src="angular.js"></script> 

// create your angular app 
var app = angular.module("myApp",[]); 

// create ng-controller inside your angular myApp 
app.controller('MainCtrl', function($scope) { 
    $scope.helloMessage = "Hello World"; 
} 

Cocher cette travail plunkr

2

Votre code ne fonctionne pas pour quelques raisons.

  1. Vous ne créez pas une instance d'une application Angular. Les contrôleurs doivent exister en tant que propriété sur une application angulaire existante. Il peut être créé comme ceci. angular.module('app',[]) et maintenant le contrôleur pourrait être rajoutée comme ceci:

    angular.module('app', []) 
        .controller('HelloWorldCtrl',HelloWorldCtrl); 
    
    function HelloWorldCtrl($scope){ 
        $scope.helloMessage = "Hello World"; 
    } 
    
  2. Vous n'utilisez pas l'injection de dépendance angulaire correctement. Vous pouvez vous assurer que le paramètre de votre $scope est injecté à l'exécution en utilisant la propriété $inject comme ceci:

    angular.module('app', []) 
        .controller('HelloWorldCtrl',HelloWorldCtrl); 
    
    HelloWorldCtrl.$inject = ['$scope']; 
    
    function HelloWorldCtrl($scope){ 
        $scope.helloMessage = "Hello World"; 
    } 
    

Avec ces modifications, le code fonctionne. Voir working CodePen

+0

Pas vrai, frère voir ma réponse et plunker de travail. il a juste injecté les angularjs après le contrôleur. Je mérite votre upvote: P –

+1

@AlexRumbaNicked Vous avez raison - et vous avez mon upvote. Je ne l'aime toujours pas cependant, c'est un peu trop jovial pour quelqu'un qui est nouveau à Angular et devrait apprendre les meilleures pratiques et la bonne manière de mettre les choses en place. – rwisch45

+0

yup, mais sa question se concentre sur une chose et vous venez de tuer la mouche avec un CANON :). Vous méritez upvote pour votre explication à travers si :) mais son code ne fonctionne pas pour la raison que vous avez fourni. –

2

Votre code va bien. Il suffit d'injecter le src i.e <script src="angular.js"></script> avant le ng-controller. Assurez-vous que votre fichier angular.js est dans la racine.
Votre code de plunker: http://plnkr.co/edit/Nhmg9FYJlHy9IwVsIJ0x?p=preview

<script src="angular.js"></script> 
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1> 
<script type="text/javascript"> 
    function HelloWorldCtrl($scope){ 
     $scope.helloMessage = "Hello World"; 
    } 
</script> 

MISE À JOUR: Je suppose que votre src à angularjs n'est pas à la racine. Essayez d'enlever <script src="angular.js"></script> et en ajoutant
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> à sa place.

+0

alors, pourquoi sur mon navigateur je vois quelque chose d'autre ??? – Yanshof

+0

où est ton frère ?? Je veux dire que les sources que vous avez fournies ne doivent pas être complètes à ce moment-là. Avez-vous quelque chose comme brother.html? –

+0

non, juste simple google chrome – Yanshof

0

lorsque vous voulez rendre une variable d'application angularJs En HTML, elle doit être définie dans un contexte angulaire.puisque cette fonction n'est pas définie dans un contexte angulaire mais seulement comme une fonction javascript, cela ne fonctionne pas.

fonction HelloWorldCtrl ($ scope) {$ scope.helloMessage = "Bonjour tout le monde"; }