alert() in angularjs causes 5 messages instead one - javascript

Probably it is "old school" using alerts when learn or debug JS, but sometimes I decline to such approach. I am learning angularjs, and it is very difficult to understand scheduling, I mean step by step how angularjs is executing different directives.
As an instance, here small app in angularjs, and I can not understand why on one alert there are 5 messages???
http://plnkr.co/edit/8j7D0J0a6By447whhpa3?p=preview
<!doctype html>
<html>
<head>
<title></title>
<style>
.red
{
color:red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="demoApp">
<div ng-controller="testCntr">
<span ng-class="{red: setClass()}">Test color</span>
<div>{{setClass()}}</div>
</div>
</body>
</html>
JS
demoApp = angular.module('demoApp',[]);
demoApp.controller('testCntr', function ($scope) {
$scope.setClass = function () {
alert('test');
return true;
}
});


The problem is that you're calling that function over and over again. Change it to be event driven and you'll be good:
http://plnkr.co/edit/zh0kIs?p=preview
html
<body ng-app="demoApp">
<div ng-controller="testCntr">
<span ng-class="{'red': changeClassModel}">Test color</span>
<br><br>
<button ng-click="setClass()">Hooray Alerts!</button>
</div>
</body>
js:
demoApp = angular.module('demoApp',[]);
demoApp.controller('testCntr', function ($scope) {
$scope.changeClassModel = false;
$scope.setClass = function () {
alert('test');
$scope.changeClassModel = true;
return true;
}
});

Related

Trying to create a simple ng-href page

I'm trying to create a very simple ng-href page in AngularJS but it is not working and I cannot understand why.
<!DOCTYPE html>
<html ng-app="href">
<head>
<title>ngHref</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-controller="ngh">
<div>
<p>Go to<a ng-href="{{base}}">{{base}}</a></p>
</div>
<script>
var a = angular.module('href', [])
a.controller('ngh', function() {
this.base = 'www.google.com';
});
</script>
</body>
</html>

You should use $scope to bind something to DOM. If you want use something with this. you should do something like:
HTML
<body ng-controller="ngh as vm">
JS
var a = angular.module('href', [])
a.controller('ngh', function() {
var vm = this;
vm.base = 'www.google.com'; // or this.base
});
<!DOCTYPE html>
<html ng-app="href">
<head>
<title>ngHref</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-controller="ngh">
<div>
<p>Go to<a ng-href="{{base}}">{{base}}</a></p>
</div>
<script>
var a = angular.module('href', [])
a.controller('ngh', function($scope) {
$scope.base = 'www.google.com';
});
</script>
</body>
</html>

In which sequence or manner multiple functions is called if i call them inside ng-click?

I have this code.
<button type="button" ng-click="func1(); func2(); func3()">Click</button>
I want to know that how func1,func2, and func3 will be called? Is it according to their sequence or parallelly?

It's very simple, it will call in sequence.
First func1() will be called and then func2() and then func3().

It's sequentially, you can simply test it:
angular.module("app", [])
.controller('mainCtrl', function($scope) {
$scope.func1 = function() {
console.log('1');
}
$scope.func2 = function() {
console.log('2');
}
$scope.func3 = function() {
console.log('3');
}
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl">
<button type="button" ng-click="func1(); func2(); func3()">Click</button>
</body>
</html>

According to sequence
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button type="button" ng-click="func1(); func2(); func3()">Click</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.func1= function(){
alert("1");
};
$scope.func2= function(){
alert("2");
};
$scope.func3= function(){
alert("3");
};
});
</script>
</body>
</html>
http://codepen.io/nagasai/pen/vKWRwr

Issue in using ng-repeat,ng-click in angular js

Iam newbie in Angular js,I have started working on few snippets in angular but didnt get answers while working with two snippets.I have been scratching my head to understand ,Any help is greatly appreciated.In the below code whenever I am pressing the button the value isnt getting changed
<html ng-app="secondmodule">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script>
var demo = angular.module("secondmodule", []);
demo.controller("controlsample", function() {
var app = this;
app.myname = "xyz";
app.mysurname = "mno";
app.myaddress = "pqr";
app.changeme = function() {
app.myname = "abc";
};
});
</script>
</head>
<body ng-controller="controlsample as samp">
<h1>hey iam {{samp.myname}}</h1>
<h2>{{samp.myaddress}}</h2>
<button ng-click="samp.changeme">clickme</button>
</body>
</html>
In the below code I have used ng-repeat ,but no output is being generated
<html ng-app="mymodule">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script>
angular.module("mymodule", []).controller("mycontrol", function() {
this.bikes = [{
id: 1,
name: 'a',
not: 3
}, {
id: 4,
name: 'b',
not: 6
}, {
id: 7,
name: 'c',
not: 9
}];
});
</script>
</head>
<body ng-controller="mycontrol as ctrl">
<h1 ng-repeat=bikedemo in ctrl.bikes>
<h2 ng-bind="bikedemo.id"></h2>
<h2>{{bikedemo.name}}</h2>
<h2>{{bikedemo.not}}</h2>
</h1>
</body>
</html>
Thanks for your help in advance,Any resources suggested in learning angular will be of great use to me

first one
<script>
var demo=angular.module("secondmodule",[]);
demo.controller("controlsample",function($scope)
{
$scope.myname="xyz";
$scope.mysurname="mno";
$scope.myaddress="pqr";
$scope.changeme=function()
{
$scope.myname="abc";
};
});
</script>
<body ng-app = "secondmodule" ng-controller="controlsample">
<h1 >hey iam {{myname}}</h1>
<h2>{{myaddress}}</h2>
<button ng-click="changeme()">clickme</button>
</body>
second one
<html >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script>
angular.module("mymodule",[]).controller("mycontrol",function($scope)
{
$scope.bikes=[{id:1,name:'a',not:3},
{id:4,name:'b',not:6},
{id:7,name:'c',not:9}
];
});
</script>
</head>
<body ng-app="mymodule" ng-controller="mycontrol">
<ul ng-repeat ="bikedemo in bikes">
<li>
<h2 ng-bind="bikedemo.id"></h2>
<h2>{{bikedemo.name}}</h2>
<h2>{{bikedemo.not}}</h2>
</li>
</ul>
</body>
</html>

1st you miss open and closing bracket when execute a function
<button ng-click="samp.changeme()">clickme</button>
2nd replace h1 with div or ul/li tag. you could not nested header tag.
<div ng-repeat="bikedemo in ctrl.bikes">
<h2 ng-bind="bikedemo.id"></h2>
<h2>{{bikedemo.name}}</h2>
<h2>{{bikedemo.not}}</h2>
</div>

For first :
<html ng-app="secondmodule">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script>
var demo=angular.module("secondmodule",[]);
demo.controller("controlsample",function()
{
var app=this;
app.myname="xyz";
app.mysurname="mno";
app.myaddress="pqr";
app.changeme=function()
{
app.myname="abc";
};
});
</script>
</head>
<body ng-controller="controlsample as samp">
<h1 >hey iam {{samp.myname}}</h1>
<h2>{{samp.myaddress}}</h2>
<button ng-click="samp.changeme()">clickme</button>
</body>
You missed calling the function ie functionName(). Just add those brackets.
For the second one, try this :
<html ng-app="mymodule">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script>
angular.module("mymodule",[]).controller("mycontrol",function()
{
this.bikes=[{id:1,name:'a',not:3},
{id:4,name:'b',not:6},
{id:7,name:'c',not:9}
];
});
</script>
</head>
<body ng-controller="mycontrol as ctrl">
<h1 ng-repeat =bikedemo in ctrl.bikes>
{{bikedemo.id"}}
{{bikedemo.name}}
{{bikedemo.not}}
</h1>
</body>
</html>

Regarding the resources to learn AngularJS you can start with,
Shaping up with Angular.js - Code School a great course for Angular.js fundamentals.
Then you can follow up with,
A Better Way to Learn AngularJS - Thinkster and courses from egghead.io and you can read some book too, this book Pro AngularJS by Adam Freeman is great.
The courses from Pluralsight are great too

Your code has some errors:
For 1st Code Snippet
You did not specified your ng-app
Calling the function in ng-click should contain parenthesis as if you're calling a function in javascript ng-click="samp.changeme()"
For 2nd Code Snippet
Header tags cannot be nested with other header tags
Your ng-repeat expression is not enclosed in double quotes

doesn't work an expression in angular ng-disabled

I'm new in Angular, so maybe I missing something. Does anybody know, what's wrong with expression state in such case:
The value 'isDisable.state' change in 'p' tag, but not in 'ng-disabled'. The button doesn't change it state to disabled.
Here is the plunk:http://plnkr.co/edit/zc8k9oCUxlMRCkZKjQa5?p=preview
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example53-production</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>
<script type="text/javascript">
var myapp = angular.module('switcher',[]);
myapp.controller('switchState', function ($scope) {
$scope.isDisable = {'state':false};
$scope.toggle = function () {
$scope.isDisable.state = !$scope.isDisable.state;
}
});
</script>
</head>
<body ng-app="switcher">
<div ng-controller="switchState">
<button ng-click="toggle()">toggle</button>
<button ng-disabled="{{isDisable.state}}">Disabled</button>
<p>{{isDisable.state}}</p>
</div>
</body>
</html>

Remove the {{}}
ng-disabled="isDisable.state"

Angular Js scope.$apply does not work

I am new to angular js. I am trying out an example from http://egghead.io/lessons/angularjs-directives-talking-to-controllers but somehow it does not seem to work correctly for me.
here is my html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="js/twitterApp.js"></script>
</head>
<body>
<div ng-app="twitterApp">
<div app-controller="AppCtrl">
<div enter="loadMoreTweets()">Roll over to load tweets.</div>
</div>
</div>
</body>
</html>
here is app, controller and directive
var tApp= angular.module("twitterApp",[])
tApp.controller("AppCtrl", function ($scope) {
$scope.loadMoreTweets = function () {
alert('Loading tweets.');
}
})
tApp.directive("enter", function () {
return function (scope, element, attrs) {
element.bind("mouseenter", function () {
scope.$apply(attrs.enter);
})
}
})
the problem is below statement seems to be failing and I can't figure out the reason since I did exactly the way it is done in demo.
scope.$apply(attrs.enter)
I even tried following but error console displays loadMoreTweets is not found, any help is greatly appreciated.
scope.loadMoreTweets()

<div app-controller="AppCtrl">
should be
<div ng-controller="AppCtrl">

Categories