Angular ng-model and controller won't work - javascript

I'm fairly new to Angular and I am trying to use ng-model and ng-controller to change some text using an input box.
This issue is that my initial text(john) doesn't show up on the page. Every tutorial says this is the way to do it. Am I missing some import or declaration somewhere in the component.ts?
Here is my code.
var app = angular.module('myApp', [])
app.controller('myCtrl', function($scope){
$scope.firstName = "john";
});
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{firstName}}</h1>
Name: <input ng-model="firstName">
</div>

You forgot to inject $scope into your controller.
myApp.controller('myCtrl', ['$scope', function($scope) {
$scope.firstName = 'john';
}]);
Any dependency (services, filters..) you want to have in the controller you must inject.

Add the angular.js library as a <script> element:
var app = angular.module('myApp', [])
app.controller('myCtrl', function($scope){
$scope.firstName = "john";
});
<script src="//unpkg.com/angular/angular.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{firstName}}</h1>
Name: <input ng-model="firstName">
</div>

You didn't miss any declaration, but the problem might be because you did not include angular and your code inside html.
Try this:
<html>
<head></head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<h1>{{firstName}}</h1>
Name: <input ng-model="firstName">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="./component.ts"></script> <!--your component file location-->
</body>
</html>

I don't see where you're including angular though. Add it into your code.
Example:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{firstName}}</h1>
Name: <input ng-model="firstName">
</div>
<script>
var app = angular.module('myApp', [])
app.controller('myCtrl', function($scope){
$scope.firstName = "johns";
});
</script>
</body>
</html>

Related

Why $scope is not defined here in the following code

I am working with Angular 1.x and here is the code which was giving errors:-
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Controllers</title>
</head>
<body>
<div ng-app="app">
<h1>Controllers</h1>
<div ng-controller="MainCtrl">
<p>{{message}}</p>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script type="text/javascript">
angular.module('app', [])
.controller('MainCtrl', [$scope, function($scope){
$scope.message = "Hello";
}]);
</script>
</body>
</html>
It was giving error ReferenceError: $scope is not defined
I thought may be $scope is not getting injected then I addded a dependency of $scope in the array to the 'app' module like this :-
angular.module('app', [$scope])
but to no avail. But what worked was the following code:-
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Controllers</title>
</head>
<body>
<div ng-app="app">
<h1>Controllers</h1>
<div ng-controller="MainCtrl as ctrl">
<p>{{ctrl.message}}</p>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script type="text/javascript">
angular.module('app', [])
.controller('MainCtrl', [function(){
this.message = "Hello";
}]);
</script>
</body>
</html>
I am referring the message model in HTML using ctrl.messaage, only then its appearing not otherwise.But why!!
Why can't I use $scope here, if I can how!!
/
Basically what is the difference between this and the earlier code?
Try something like this
angular.module('app', [])
.controller('MainCtrl', ['$scope', function($scope){
$scope.message = "Hello";
}]);
it shoulde be like this.
angular.module('app', [])
.controller('MainCtrl', ["$scope", function($scope){
$scope.message = "Hello";
}]);
and it's better use controllerAs syntax
angular.module('app', [])
.controller('MainCtrl', ["$scope", function($scope){
var vm = this;
vm.message = "Hello";
}]);
and in view use
<div ng-controller="MainCtrl as ctrl">
When using an array as the second argument of the controller-method you have to use strings as values. This allows you to rename dependency modules.
<script type="text/javascript">
angular.module('app', [])
.controller('MainCtrl', ["$scope", function($scope){
$scope.message = "Hello";
}]);
</script>
You need to add quotes around $scope when you're injecting it into your controller. AngularJS will look at these string variables to determine what it needs to safely inject into your application.
angular.module('app', [])
.controller('MainCtrl', ['$scope', function($scope){
$scope.message = "Hello";
}]);

Accessing JSP variable from javascript [Angular JS]

I am working with angular JS and JSP. i need to retrieve the session attribute variable from the JSP to my controller. My code is below
JSP
<html lang="en" ng-app="myApp">
<body>
<div data-ng-controller="myCtrl as vm" style="height:100%">
<md-content layout="row" style="height:100%">
<div class="widget">
<h2>Header</h2>
<div ui-view></div>
</div>
</md-content>
</div>
<script type="text/javascript" src="/root/script/script.js"></script>
<%
String policy = session.getAttribute("POLICY_CHANGE");
%>
</body>
</html>
JS
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
// i want to get the JSP variable here
});
Set session value to hidden input.
<div data-ng-controller="myCtrl as vm">
<input type="hidden" id="sessionData" />
</div>
<script>
var data = '<%=request.getSession().getAttribute("POLICY_CHANGE")%>';
document.getElementById("sessionData").value = data;
</script>
and get value
app.controller('myCtrl', function($scope, $document) {
$scope.data = $document[0].getElementById("sessionData").value;
console.log($scope.data);
});
You can output the variable using expression language as a data attribute, like this:
<div data-my-variable="${myVariable}" id="myDiv"></div>
And if you are using Jquery, you can use the attr function:
var output = $("#myDiv").attr("data-my-variable");
Try (I've never tried this - just and idea... please post if it is working):
<script>
angular.module('jspVariablesService', [])
.value("valueName",${yourVariable});
</script>
in <head></head> or at the beginning of body and then import jspVariableService in
var app = angular.module('myApp', ["jspVariableService"]);
and use it in controller:
app.controller('myCtrl', ["$scope", "valueName" function($scope,valueName) {
//use your value!
});

two controllers inside one module not working

I am trying to print scope value from 2 controllers. It is not printing the value from the second controller. What is my mistake?
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Ctrl1">
{{carname}}
</div>
<div ng-app="myApp" ng-controller="Ctrl2">
{{carname}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('Ctrl1', function($scope) {
$scope.carname = "Honda";
});
app.controller('Ctrl2', function($scope) {
$scope.carname = "Toyota";
});
</script>
You defined two ng-app, angular will bootstrap the first app it finds on the page and not the second one. Therefore second one doesn't work.
Define app on the element covering all the controller elements.
Example Snippet:
var app = angular.module('myApp', []);
app.controller('Ctrl1', function($scope) {
$scope.carname = "Honda";
});
app.controller('Ctrl2', function($scope) {
$scope.carname = "Toyota";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="Ctrl1">
{{carname}}
</div>
<div ng-controller="Ctrl2">
{{carname}}
</div>
</div>
You don't need ng-app for each div, change your html like this:
<body ng-app="myApp">
<div ng-controller="Ctrl1">
{{carname}}
</div>
<div ng-controller="Ctrl2">
{{carname}}
</div>
</body>
Because you defined your app twice. Try to use this code:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="Ctrl1">
{{carname}}
</div>
<div ng-controller="Ctrl2">
{{carname}}
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('Ctrl1', function($scope) {
$scope.carname = "Honda";
});
app.controller('Ctrl2', function($scope) {
$scope.carname = "Toyota";
});
</script>
Two ng-app on single page doesn't work, it will compile only the 1st instance of ng-app and the other will get ignored.
It seems like you wanted to use two controllers on the same page. What you can do is you can move ng-app directive on body level & have ng-controller on two different divs.
<body ng-app="myApp">
<div ng-controller="Ctrl1">
{{carname}}
</div>
<div ng-controller="Ctrl2">
{{carname}}
</div>
</body>

ng-show on the basis of model value of some other html element

I have a simple Angular Program in which the span must show only if the input value is 'Peter'. I was hoping that if I change input value then span must vanish, but when I am trying to change the value of input box, it is not allowing me do so. What is the issue due to which I am unable to change input value ?
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="name"/>
<span ng-show="name='peter'">{{name}}</span>
<script>
//module declaration
var app = angular.module('myApp', []);
//controller declaration
app.controller('myCtrl',function($scope){
$scope.name = "Peter";
});
</script>
</body>
</html>
Change ng-show to
<span ng-show="name.toLowerCase()==='peter'">{{name}}</span>
You are using assignment operator but you need to compare the values and also change the case of input value.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.4.8" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="name"/>
<span ng-show="name.toLowerCase()==='peter'">{{name}}</span>
<script>
//module declaration
var app = angular.module('myApp', []);
//controller declaration
app.controller('myCtrl',function($scope){
$scope.name = "Peter";
});
</script>
</body>
</html>
Try this.
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="name">
<p ng-hide="name!== 'peter'">peter</p>
<p ng-show="name!== 'peter'"></p>
<script>
//module declaration
var app = angular.module('myApp', []);
//controller declaration
app.controller('myCtrl',function($scope){
});
</script>

Style properties not working in IE using AngularJs and HTML

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div style="color:{{color}}">Testing</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.color = "#996600";
});
</script>
</body>
Color properties not working in IE, but chrome and firefox are working
Instead of using expression using {{}}, use ng-style directive.
<div ng-style="{color: color}">Testing</div>
Angular has issues when using style. Refer
This is the updated code:
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-style="{color:color}">Testing</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.color = "#996600";
});
</script>
As you are using angularJs you need to define ng-style
Try using the ng-style directive:
https://docs.angularjs.org/api/ng/directive/ngStyle
style is HTML attribute where as ng-style in Angular Attribute.
So that Please use below notation
<div ng-style="{color:color}">Testing</div>
if want angular Notification
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-style="color:{{color}}">Testing</div>
</div>
</body>

Categories