ng-app et ng-controller

**Markos22** · 24/09/2018, 09h28

Bonjour,

Je débute tout juste avec Angular. J'ai cru comprendre qu'une application Angular ne nécessitait que le CDN Angular pour fonctionner. J'ai donc suivi un tuto, et j'ai essayé de créer l'application "Hello World!" qu'ils proposent. J'ai donc créé un dossier "Test-Angular", dans lequel j'ai un fichier "index.html" et un fichier "main.js", comme l'auteur l'indique. Voici mon fichier index.html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html data-ng-app="my-app">
<head>
	<title>angular.module &amp; ng-app</title>
	<script src="https://code.angularjs.org/1.4.6/angular.min.js"></script>
	<script src="main.js"></script>
</head>
<body>
	<div data-ng-controller="hello-world-controller">{{message}}</div>
</body>
</html>

Et voici mon fichier main.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var app = angular.module('my-app',[]);
 
	.controller('hello-world-controller', function($scope)
{
    $scope.message = "Hello world!";
});

Il me semble pourtant avoir suivi pas à pas les instructions. Mais le fichier index affiche :
{{message}}

c'est-à-dire que le contenu du <div> n'est pas interprété. Merci de m'expliquer pourquoi. J'insiste sur le fait que je suis grand débutant. Il y a sans doute une base qui m'a échappé.

Merci de votre aide.

**Marco46** · 24/09/2018, 10h47

J'ai déplacé ton topic dans la bonne section. Il s'agit d'un problème AngularJS et non Angular.

2 remarques :

- la version de AngularJS utilisée est obsolète et non maintenue (branche 1.4). Les deux seules branches maintenues jusqu'en 2021 sont la 1.2 (pour des raisons de compat avec les vieilles versions de IE) et la 1.7 (la dernière stable). Toutes les autres versions sont obsolètes et ne doivent pas être utilisées.
- le tuto date de 2015, en matière de web et en particulier sur ces technos JavaScript c'est la préhistoire (oui c'est dingue mais c'est comme ça !).
- tu devrais ignorer AngularJS qui ne recevra plus de développements mais seulement quelques patchs à droite à gauche jusqu'à sa mort en 2021. Une partie des gens qui étaient sur AngularJS ne migrent pas vers Angular mais vont vers d'autres horizons (Vue.js, React, ...). Les Javaistes adorent Angular du fait de son usage de TypeScript et du système d'injection de dépendances qui est en phase avec ce qui se fait dans le monde Java mais qui est d'une inutilité déconcertante dès lors qu'on a un peu poussé son apprentissage de JavaScript.

Donc en résumé si tu es à l'aise avec Java et que tu ne souhaites pas apprendre trop dans le détail le JavaScript je te conseille d'aller vers Angular ça fera le boulot, sinon il vaut mieux aller vers quelque chose plus mainstream comme React ou Vue.

Enfin pour ton problème, c'est simplement que tu as ajouté un ; après la déclaration de ton module dans le main.js. Du coup ton contrôleur n'est pas déclaré ni référencé par l'injecteur. Enfin je pense que c'est ça j'ai pas exécuté.

**Markos22** · 24/09/2018, 11h14

Merci, Marco46.

En effet, l'erreur était toute bête. La fonction controller() est une méthode de app, et le point-virgule était en trop. Le problème est donc résolu.
Pour répondre à tes remarques sur AngularJs :
Je viens effectivement de Java, et Typescript me semble sympathique, puisque j'y retrouve un mode de fonctionnement que je connais bien. Je connais Javascript, mais je ne connaissais pas Angular. JavaScript me semble indispensable pour faire des applications web, et j'ai bien l'intention d'approfondir mes connaissances dans ce langage, qui est de plus en plus incontournable. Angular fait partie des fondamentaux qui me paraissaient indispensable de connaître. Tu me dis que React et Vue sont "plus mainstream". J'en prends note.
Mon objectif à plus long terme, en apprenant Angular, c'est de me lancer dans Ionic pour créer des applications mobiles. Or, je crois que connaître Angular est nécessaire, car (corrige-moi si je me trompe) c'est un des frameworks qui composent Ionic. Saurais-tu si on peut programmer avec Ionic en utilisant Vue ou React ?

Merci en tout cas pour toutes ces précisions.
A+

**Marco46** · 24/09/2018, 11h53

Ionic est une surcouche de AngularJS dans sa version 1.x et de Angular dans sa version 2+. Cette surcouche sert à combiner le framework avec Cordova pour générer des applications natives.

Du coup oui il est nécessaire de connaitre Angular pour utiliser Ionic. En revanche je ne vois pas l'utilité d'apprendre AngularJS.

Attention à ne pas confondre AngularJS et Angular qui sont deux frameworks différents, le tuto que tu fais n'est pas pour Angular mais pour AngularJS, et pire pour une version obsolète de AngularJS.

Je ne pense pas qu'on puisse utiliser Vue ou React avec Ionic mais si le but c'est d'utiliser Ionic go Angular ya pas de soucis.

**Markos22** · 24/09/2018, 12h06

Merci pour ces précisions.
En effet, je croyais que Angular était la même chose qu'AngularJS, que le "JS" avait été supprimé de l'appellation. Quelle est la différence, plus précisément ?

**Marco46** · 24/09/2018, 12h30

C'est pas les mêmes frameworks :

- AngularJS : https://angularjs.org/
- Angular : https://angular.io/

Google a d'abord développé AngularJS de 2012 (si on prend la 1ère version production ready) à aujourd'hui en gros et ensuite Angular de fin 2016 à aujourd'hui.

AngularJS est passé en LTS cet été, il n'est plus développé activement et il sera totalement abandonné en 2021.

**Markos22** · 24/09/2018, 14h03

Merci pour toutes ces infos. Je laisse donc tomber (pour l'instant) ce tuto, puisque la mort d'AngularJS est annoncée, et je continue avec l'apprentissage d'Angular.
A bientôt

ng-app et ng-controller

AngularJS

Discussions similaires

Partager

Partager