<!DOCTYPE html>
<html ng-app="myApp" >
<head>
<title>myApp.html</title>
</head>
<body ng-controller="myCtrl as vm">
<br><br>
<div>
<p> Inserisci un colore <input style="background-color:{{colore}}" ng-model="colore" value="{{colore}}"> </p>
<body bgcolor="{{colore}}">
</div>
<div >
<p>Nome: <input style="background-color:{{colore}}" type="text" id="nome" onkeyup="" ng-model="vm.utente.nome"></p>
<p>Cognome: <input style="background-color:{{colore}}" type="text" id="cognome" ng-model="vm.utente.cognome"></p>
<p id="prova" value="test">{{myFunction}}</p>
<p>{{vm.saluta() | uppercase}}</p>
</div>
<p id="demo">prova</p>
<button onclick= vm.myFunction()> Prova</button>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script type="text/javascript" src="C:\Users\user1\Desktop\myCtrl.js"></script>
</body>
</html>
myCtrl.js
(function() {
'use strict';
var app = angular.module('myApp', []);
app.controller('myCtrl', function() {
var vm=this;
vm.utente = {nome: "Mario", cognome: "Rossi"};
vm.saluta = function() {
return "Buongiorno " +
this.utente.nome + " " +
this.utente.cognome + "!"
};
vm.myFunction = function() {
var text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML = text.toUpperCase();
};
function test2() {
console.log("Hello!");
};
});
})();
i'm struggling with understanding AngularJS and trying to solve errors in my code. I've seen examples where everything is in a single HTML file with script tags, but I prefer separating the controller into a separate file. In my approach, I am connecting the controller without using $scope, simply replacing "this" with vm (var vm = this). I just want to run some basic tests with functions, but always encounter this error:
myApp.html: 30 Uncaught ReferenceError: vm is not defined at HTMLButtonElement.onclick (myApp.html: 30)
The first function works fine, I get the output from "vm.saluto()" only if I call it using the format: {{vm.saluto}}. Why doesn't onclick and others work?
Can anyone provide assistance? Where am I making a mistake?
I have looked at similar cases and discussions, but haven't been able to find a solution yet.