I am new to angularjs in this angular code i want to increase the
value of the fib variable. For this i made a function named as fibapp
. here i have the html and angular code below please help to run it.
ang.js
`
var mod=angular.module("myModule",[]);
mod.controller("events",function($scope)
{
fib=0;
$scope.fib=fib;
$scope.fibapp=function(fib)
{
fib++;
}
}
);
`
HTML code using the Above angular code
`
<html>
<head>
<script src="E:/angular.min.js"></script>
<script src="E:/ang.js"></script>
</head>
<body ng-app="myModule">
<div ng-controller="events">
<p>{{fib}}</p>
<input type="button" ng-click="fibapp(fib)">
</div>
</body>
</html>
`
Use this:
var mod=angular.module("myModule",[]);
mod.controller("events",function($scope)
{
fib=0;
$scope.fib=fib;
$scope.fibapp=function(fib)
{
$scope.fib++;
}
}
Here is a jsfiddle
Related
I've started to work with Knockout.js and wanted to write some simple component, but the code I've written didn't display template's elements. I'm only seeing the text inside "h1" tag.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Component</title>
<script type="text/javascript" src="knockout-3.4.2.js"></script>
</head>
<body>
<h1>Counter starting at 1:</h1>
<counter params="initialCount: 1"></counter>
<script type="text/javascript">
function viewModel(params) {
const self = this;
self.count = ko.observable(params.initialCount);
self.increment = () => self.count(self.count() + 1);
}
const template =
`<div>
<span data-bind="text: count"></span>
<button type="button" data-bind="click: increment">
Increment
</button>
</div>`;
ko.components.register('counter', { viewModel, template });
</script>
</body>
</html>
What I'm doing wrong?
Try adding ko.applyBindings(); at the end of your script.
Hello, I am new to HTML and JS therefore would like to ask for some help.
Here I want to display two different HTML elements according if statement is true or false. However, it does not work.
Could I get some help? (:
<!DOCTYPE html>
<html>
<body>
<script>
if (!user) {
<h1> there is no user </h1>
} </script>
if (user) {
<button type="button">Click Me!</button>
} </script>
</body>
</html>
Here is a native Javascript alternative
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="content"></div>
<script>
var el = document.getElementById('content');
var content;
if (!user) {
content = '<h1>there is no user</h1>';
}
if (user) {
content = '<button type="button">Click Me!</button>';
}
el.insertAdjacentHTML('afterbegin', content);
</script>
</body>
</html>
This won't work as is unless the user variable is defined, though, but I'm assuming you already have it available at runtime.
If you have more html in this div you can use a different insert position, see the documentation about it here: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
Using jQuery you would do something like this
html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>
JS
if(!user){
$('body').append('<h1>There is no user</h1>')
} else if(user) {
$('body').append('<button>Login</button>')
}
See js fiddle here.
Also, note that if you want to use jquery include the script in the head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Unfortunately you can't add HTML directly in a block of javascript. What you can do instead though is use jQuery to append a block of HTML.
To do this, you would load jQuery by adding this line to your head tag
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
And then replace your inline javascript with the following:
<script>
if (!user) {
$(document.body).append( "<h1> there is no user </h1>" );
}
if (user) {
$(document.body).append( "<button type='button'>Click Me!</button>" );
} </script>
Can some body explain me why below directive is not getting called? Its getting called if I directly add the directive to the button. I tried it adding using $timeout but still no luck.
<html>
<head>
<title>AngularJS</title>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp',[]);
app.controller('MyCtrl',function($scope,$timeout){
document.getElementById('myBtn').setAttribute('my-directive','');
});
app.directive('myDirecitive',function(){
function linkFn (scope,element,attrs){
element.bind('click',function(){
alert('Clicked');
});
}
return {
restrict:'A',
link:linkFn
}
});
</script>
</head>
<body ng-app="MyApp", ng-controller="MyCtrl">
<button id="myBtn">Test</button>
</body>
</html>
app.directive('myDirecitive',function(){
should be
app.directive('myDirective',function(){
it's best not to query the DOM inside the controller. Don't do this
document.getElementById('myBtn').setAttribute('my-directive','');
my-directive was created as an attribute directive, so it would be best to add that directly to the element like this.
<button id="myBtn" my-directive>Test</button>
I created a plunker
https://plnkr.co/edit/pispsMzbJIxrIDyIv81N?p=preview
I have what I think is a pretty basic Angular JS question. Can someone please explain to me why the expression.
{{hi}}
Is not evaluating and I am getting the following error:
Uncaught TypeError: angular.module is not a function
Here's the plunker and the code is below.
Html:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/2.0.0-alpha.20/angular2.sfx.dev.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="expressionExample">
<div ng-controller="ExampleController" class="expressions">
{{hi}}
</div>
<cmp></cmp>
</body>
</html>
js:
angular.module('expressionExample', [])
.controller('ExampleController', ['$scope', function($scope) {
var exprs = $scope.exprs = [];
$scope.expr = '3*10|currency';
$scope.hi= 'hi';
$scope.addExp = function(expr) {
exprs.push(expr);
};
$scope.removeExp = function(index) {
exprs.splice(index, 1);
};
}]);
You are using Angular 2.0 reference
Once I updated the reference to 1.4.0-rc1
It worked correctly. Here is the updated plunker :
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.0-rc.1" data-semver="1.4.0-rc.1" src="https://code.angularjs.org/1.4.0-rc.1/angular.js"></script>
<script src="main.es6.js"></script>
</head>
<body ng-app="expressionExample">
<div ng-controller="ExampleController" class="expressions">
{{hi}}
</div>
<cmp></cmp>
</body>
</html>
Hi you are using in your code Angular 2.0 plugin
you have written angular 1 syntax, so you have to write angular 1.4.0 plugin in html , then it will may work perfectly
I am brand new to AngularJS and I'm following an example from a book but am running into issues with the HTML rendering in a simple example.
Code is working with no problems in JSFiddle - http://jsfiddle.net/2436t/
I am running this in Firefox 30.0 and I just get the following output and no errors in Firebug
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<script type="text/javascript" src="angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-app>
<div ng-controller="HelloController">
<p>{{greeting.text}}</p>
</div>
</body>
</html>
Javascript (in external controllers.js file):
function HelloController($scope)
{
$scope.greeting = {text:"Hello"};
}
I am sure I'm missing something simple but any help would be greatly appreciated,
Sean
You are missing ng-app="????"
You also need to inject the controller in the module.
Here is the jsfiddle
http://jsfiddle.net/yogeshgadge/2436t/14/
The HTML
<body ng-app="myApp">
<div ng-controller="HelloController">
<p>{{greeting.text}}</p>
</div>
</body>
The JS part
var app = angular.module('myApp', []);
app.controller('HelloController',
function($scope) {
$scope.greeting = {
text: "Hello"
};
}
);