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>
Related
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>
I am trying to include a processing Canvas inside a angularjs view.It works inside the index.html but not work inside a view.Sample is given below.
https://plnkr.co/edit/3ZaLzswnnVcf71bwrrgp?p=preview
Home.html
<div class="container">
<canvas data-processing-sources="hello.pde" ></canvas>
Back
</div>
Index.html
<!DOCTYPE html>
<html>
<head lang="en">
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing.min.js"></script>
</head>
<body>
<div ng-app="mainApp">
<ng-view></ng-view>
</div>
</body>
</html>
ng-view is a directive from ngRoute. What you should do instead is just include your template:
<div ng-include="Home.html"></div>
If you want to use ng-view you must setup your app to work with ngRoute.
Example
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>
I am not able to get the template snippets from template cache (which looks like the following:)
<script id="sub1.html" type="text/ng-template">
<div> sub1 Content</div></script>
I think it is because of line number 11 in index.html file
<div class="hiddenContent" ng-include="'templates.html'">
If I replace this line with the templates.html it works.
How to make this work keeping the line number 11?
Look at my code in Plunkr Code
It works, try moving the template into the index.html
http://plnkr.co/edit/MOwCD8UyRT2IBmaeeAMX?p=preview
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.2.16" data-semver="1.2.16" src="https://code.angularjs.org/1.2.16/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
<div class="hiddenContent" ng-include="'templates.html'">
</div>
<h1>Hello Plunker!</h1>
{{test}}
<myapp-directive></myapp-directive>
</div>
</body>
</html>
<script id="sub1.html" type="text/ng-template">
<div>sub1 Content</div>
</script>
<script id="sub2.html" type="text/ng-template">
<div>sub2 Content</div>
</script>
Maybe the problem is AngularJS can't find the ng-template in another file. It also work if you define the sub1.html in templateCache:
var app=angular.module("myApp",[]);
app.run(["$templateCache", function ($templateCache) {
$templateCache.put("sub1.html","<div> sub1 Content</div>");
}]);
I wanted to make input mask, in case CNPJ.
Then I saw it here.
https://github.com/assisrafael/angular-input-masks/
But not getting to implement.
See the excerpt from my code, in which case it did not work.
<html>
<head>
<meta charset="utf-8">
<script src="angular.js"></script>
<script src="js/masks.min.js"></script>
<script>
angular.module('ui.utils.masks');
</script>
</head>
<body ng-app>
<ul>
<li>Teste</li>
</ul>
<div>
<label>CNPJ:</label>
<input type="text" ng-model="cnpj" ui-br-cnpj-mask>
</div>
</body>
</html>
What is missing to work?
Declare module like below.
angular.module('app',['ui.utils.masks'])
And then change ng-app on HTML like below.
ng-app="app"
This would help you. Thanks.