<!doctype html>
<html lang='en'>
<head>
<meta charset-"UTF-8">
<title>devang</title>
<link rel="stylesheet" href="bootstrap.css">
<script> src="lib/onsen/js/angular/angular.min.js" </script>
<script> src="lib/onsen/js/angular/angular.js" </script>
</head>
<body>
<div class="container" ng-app="App">
<div ng-controller="controller">
<ul>
<li ng-repeat="artist in artists">
{{artist.name}}
</li>
</ul>
</div>
</div>
<script>
angular.module('App',[]).
controller('controller',function($scope,$http){
$http.get('artists.json').success(function(data){
$scope.artists = data;
});
});
</script>
</body>
</html>
when i execute it shows error
angular is not defined
The character encoding of the HTML document was not declared.
The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.
need your suggesions
Your script tags are defined incorrectly.
the SRC should be an attribute of the script tag.
<script src="lib/onsen/js/angular/angular.min.js"></script>
<script src="lib/onsen/js/angular/angular.js"></script>
Related
I want to get the data from the another html file using angularjs $http get method, but i did't get anything
below is my code
<!DOCTYPE html>
<html>
<head ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<p>{{welcome}}</p><br />
<h1>{{error}}</h1>
</div>
<script>
var app=angular.module('myApp',[])
app.controller('myCtrl',['$scope','$http',function($scope,$http){
$http.get('home.html').than(function(response){
$scope.welcome=response.data;
},function(reason){
$scope.error=reason.data;
});
}]);
</script>
</body>
</html>
Below is my another html file code
<p>This is home page</p>
it should be then not than
.then(function(response){
Demo
I created a web page wherein I want to display there another HTML file. I used jQuery to do this but wasn't able to display the content of the file I have included. Why do you think this happened. Thanks a lot.
Here's my code for my mainpage.
sample.html
<html>
<head>
<title> Sample Only </title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script>
$(function(){
$('#footerLang').load("sampleFooter.html");
});
</script>
</head>
<body>
<div id="footerLang">
<h1></h1>
</div>
</body>
</html>
sampleFooter.html
<p> THIS IS A FOOTER </p>
It is highly possibly because you are placing the following block in head without $(document).on("ready", function() { ...; });
$(function(){
$('#footerLang').load("sampleFooter.html");
});
In this case jQuery will unable to find the #footerLang element since the DOM is not ready, you could revise the script as follow
$(function(){
$(document).on("ready", function () {
$('#footerLang').load("sampleFooter.html");
});
});
or move the script tag just before the </body>
<html>
<head>
<title> Sample Only </title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
</head>
<body>
<div id="footerLang">
<h1></h1>
</div>
<script>
$(function(){
$('#footerLang').load("sampleFooter.html");
});
</script>
</body>
</html>
I found out that this was just a browser compatibility issue. I launch it in Firefox and it worked.
Source.HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red">Hello World</h1>
<p id="demo" style="color:red">Click the button below to remove the style attribute from the header above.</p>
</body>
</html>
Parser.html
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Parse</button>
<script>
function myFunction()
{
document.getElementsByTagName("H1")[0].removeAttribute("style");
document.getElementsByTagName("P")[0].removeAttribute("style");
};
</script>
</body>
</html>
Now what i need guidance for was , i need the Parse button from parser.html to apply the functions for source.html and save as output.html in same path of source.html...
Kindly help me out ...
What Willshaw said is correct. Javascript don't have that much power to solve your problem. You need to go for some serverside scripting.
I agree with the previous answer, it is a pretty strange way to do.
But, the DOM parsing being really easy with javascript, you could do the parsing on the client side, I guess, and then send the processed html to your backend, and save it in result.html.
I will use Jquery for the example, way easier.
Parser.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="btnLoad">Load Source</button>
<button id="btnParse">Parse</button>
<button id="btnSave">Save</button>
<div style="display:none" id="sourceContainer"></div>
<script>
$(document).ready( function() {
$(".btnLoad").click(function(){$("#sourceContainer").load("/source.html");})
$(".btnParse").click(function(){
$(".sourceContainer h1").removeAttr("style");
$(".sourceContainer p").removeAttr("style");
})
$(".btnSave").click(function(){
var data = {
html: $("#sourceContainer").html()
};
//replace first param by the backend url, add callback function
$.post("http://...", data, ...);
})
});
</script>
</body>
</html>
Maybe is a stupid question but I'm really new with Angular and trying to pick up some knowledges. So I have a scope which I get via API ($http) and after conversion is a html markup
<li>some list</li>
and I would like to project this one in DOM, trying
<ul>{{myscopevariable}}</ul>
but I get just the raw text
with php would be like <ul><?= myscopevariable ?></ul>
JS
angular.module("myApp", ["ngSanitize"]).controller("MyCtrl", function($scope){
$scope.someHTML = "<li>just testing</li>";
})
HTML
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular-sanitize.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="MyCtrl">
<h1>Hello Plunker!</h1>
<ul ng-bind-html="someHTML">
</ul>
</body>
</html>
http://plnkr.co/edit/e1zoOrEVwqdIDPujMpPC?p=preview
Use the ng-bind-html directive (Documentation here). Prior to 1.2 there also existed ng-bind-html-unsafe.
In your example:
<ul>some list</list>
<li ng-bind-html='myscopevariable'></li>
....
</ul>
You have to include the ngSanitize module to have it work (e.g. <script src="http://code.angularjs.org/1.2.14/angular-sanitize.js"></script> in Header and var app = angular.module('plunker', ['ngSanitize']);)
See this plunker example for some working code.
I have following code, and let you know that i am new to angularjs
<!DOCTYPE html>
<html data-ng-app="">
<head>
<!-- <script src="scripts/angular.js"></script>-->
<title>Angular js</title>
</head>
<body data-ng-init="names=['Ran','Run','Run']">
<br />
<ul>
<li data-ng-repeat="personName in names">{{personName}}</li>
</ul>
<script src="scripts/angular.min.js"></script>
</body>
</html>
There is no value shown from the names in li .....
any Help or suggestion to solve the issue
If you open console of your browser, you can see error:
Duplicates in a repeater are not allowed.
Use 'track by' expression to specify unique keys. Repeater: personName in ['Ran','Run','Run'], Duplicate key: string:Run
You have two same items in array (Run).
Delete last "Run" from array, and it will work fine.
Please, see:
Plunker
Please remove one 'Run' from your data-ng-init
And it will work fine..
<!DOCTYPE html>
<html data-ng-app="">
<head>
<!-- <script src="scripts/angular.js"></script>-->
<title>Angular js</title>
</head>
<body data-ng-init="names=['Ran','Run']">
<br />
<ul>
<li data-ng-repeat="personName in names">{{personName}}</li>
</ul>
<script src="JS/angular-1.2.10.min.js"></script>
</body>
</html>