Underscore _.map function results in a paragraph - angularjs

I am calling an underscore _.map having a function, but I want the results in a paragraph. How can I achieve it?
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
</head>
<body>
<p> </P>
<script>
_.map([1,2,3],function(e){return e*3;});
</script>
</body>
</html>
The results must print inside my paragraph.

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
</head>
<body>
<p><script>
_.map([1,2,3],function(e){document.write(e*3);});
</script></p>
</body>
</html>
Update to accommodate comment request
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
</head>
<body>
<p id="target"></p>
<script>
_.map([1,2,3],function(e){
document.getElementById('target').innerHTML=(e*3);
});
</script>
</body>
</html>

Related

still getting angular not defined

this is html file
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>BlogIt!</title>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="myCtrl">
{{message}}
</body>
</html>
this is js file
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope){
$scope.message = "Welcome to BlogIt!";
})
Edit with this :
<head>
<title>BlogIt!</title>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
{{message}}
</body>

getting data from the controller

i've got 'app.js' with
var myApp = angular.module('myModule', []);
myApp.controller("myController",function($scope){
$scope.message = 'message';
});
and html
<html ng-app="myModule">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div ng-controller="myController">
<p>{{ message }}</p>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="/static/app.js"></script>
</html>
And i've got no idea why data from the scope object does not show. All files are included properly
could you add all these cdn and your js files, inside to head / body tag !!
You should all your script inside head/body.
Check this working sample:
<html ng-app="myModule">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div ng-controller="myController">
<p>{{ message }}</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
https://plnkr.co/edit/jLH0mVhX8shBWvI90b2i?p=preview

why this AngularJs code is not working as i tried to run some perfect codes too but my browser doesn't run them also

i'm running it using XAMPP but it's not working and showing output of {{"Hello"+"you"}} rather than Hello you
<!DOCTYPE HTML>
<html>
<head ng-app="store">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
</head>
<body>
<script type="text/javascript" src="angular.min.js">
</script>
<script >
var abc=angular.module('store',[]);
</script>
<p>
{{"Hello"+"you"}}
</p>
</body>
</html>
First, you should create a controller in your JS, then you use it in your view.
You can do it setting the ng-controller directive, as below:
<!DOCTYPE html>
<html ng-app="store">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script>
angular.module('store', [])
.controller('storeCtrl', function($scope) {
});
</script>
</head>
<body ng-controller="storeCtrl">
<p>
{{"Hello"+"you"}}
</p>
</body>

angular controllers is not a function

just for learning purpose--
index.html
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js"></script>
<script src="script.js"></script>
<script src="ctrl.js"></script>
</head>
<body ng-app="abc">
<h1 ng-controller="ctrl">{{data}}</h1>
</body>
</html>
script.js
angular.module('abc', []);
ctrl.js
angular.module('abc').controller('ctrl',function($scope){
$scope.data="hello";
});
js fiddle link
it showing error... what i ve done wrong here???
You named your controller file wrongly.
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js"></script>
<script src="script.js"></script>
<script src="cntrl.js"></script>
</head>

Can produce angular JS output

I am doing a simple hello world example straight out of book but somehow i cant get it correct. not sure what is going on here.
html Code, angular.js is the latest 1.3.x downloaded from angularjs site
<!DOCTYPE html>
<html ng-app>
<head>
<script src="angular.js"></script>
<script src="controller.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<p>{{greeting.text}}, World</p>
</body>
</html>
Controller.js
function HelloController($scope){
$scope.greeting={text:'Hello'};
}
why can i get Hello world in the output when i load the html page. Instead i see this
{{greeting.text}}, World
what is going on?
Here is what will work for you:
function HelloController($scope) {
$scope.greeting={text:'Hello'};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="HelloController">
<p>{{greeting.text}}, World</p>
</div>
</div>
<html>
<head>
<script src="angular.js"></script>
<script src="controller.js"></script>
</head>
<body ng-app>
<div ng-controller='HelloController'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>

Resources