I'd like to include a template html with angularjs like:
<div ng-include src="'template/slider.html'"></div>
I will take the template from http://www.jssor.com, which requires also some <head><script>... tags in the template itself:
Question: is it the correct way to create a template with a schema as follows, or should I move the elements somewhere else?
slider.html:
<head>
<script src="jssor.slider.min.js"></script>
<script>
jssor_slider1_starter = function (containerId) {
...
};
</script>
</head>
<div id="slider1_container">
<!-- Slides Container -->
<div ... />
<script>jssor_slider1_starter('slider1_container');</script>
</div>
Your angular templates do not need to have the <head> tag, there should only be one <head> tag in your html page, and it should not be enclosed between the <body> tags. Having multiple <head> tags breaks validation and will cause unpredictable behavior.
Related
I have a very long string that is made by few HTML documents jammed together like this:
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
some head info
</head>
<body>
<div > some content with other HTML tags that I want to preserve </div>
<body>
</html>
<html>
<div> another content with other HTML tags that I want to preserve </div>
</html>
<html xmlns="http://www.w3.org/TR/REC-html40">
<head>
some head info
</head>
<body>
<div> some other content with other HTML tags that I want to preserve </div>
<body>
</html>
and I would like to turn them into something like this:
<div > some content with other HTML tags that I want to preserve </div>
<div> another content with other HTML tags that I want to preserve </div>
<div> some other content with other HTML tags that I want to preserve </div>
Basically Im looking for a Regex to remove just the <html> </html> tags (not the other/inner html elements) from a huge html string. Please note that I should preserve the html content and just get rid of the parent tags.
Thanks in advance
(Please note that I have done an extensive search to make sure this is not a duplicate question)
As an important note: https://stackoverflow.com/a/1732454/3498950
But if you must, I might use something like /<\/?html.*?>/g
const html = `<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>head info</head>
<div>other content</div>
</html>`;
console.log(html.replace(/<\/?html.*?>/g, '').trim());
And for tweaking the regex: https://regex101.com/r/EeTv68/1
I get the output only if I remove one of the directives i.e. ng-app - demo1 and the models. Why I can't have two ng-app working at the same time. I am new to Angular JS and building up my fundamentals. I get the desired output if I run one directive at a time. So, in this example if I remove the demo ng-app, scripts and controller, I get the desired output. If I remove the demo1 ng-app scripts and controller, I get the first part working fine. How can I get both the directives working at the same time?
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<h1> Guru99 Global Event </h1>
<script src="lib/angular.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-3.2.1.js"> </script>
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name: <input type="text" ng-model="tutorialName"> <br>
<br>
This tutorial is {{tutorialName}}
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope)
{
$scope.tutorialName = "Checking Angular JS" ;
}
);
</script>
<div ng-app="DemoApp1" ng-controller="DemoController1">
<! behaviour >
{{fullName("Guru","99")}}
</div>
<script type="text/javascript">
var app = angular.module('DemoApp1', []);
app.controller('DemoController1',function($scope)
{
$scope.fullName=function(firstName, lastName)
{
return firstName + lastName;
}
});
</script>
</body>
</html>
The output is
Guru99 Global Event
Tutorial Name:
This tutorial is Checking Angular JS
{{fullName("Guru","99")}}
From the Docs:
There are a few things to keep in mind when using ngApp:
only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead.
— AngularJS ng-app Directive API Reference
This question already has answers here:
Placement of the ng-app directive (html vs body)
(3 answers)
Closed 7 years ago.
I'm new to AngularJS. My lecturer said ng-app can use in html, body, div tags etc. My question is, if ng-app can use in html tag and body tag, is there a any use if i use it in html tag rather than body tag?
What I mean is, the head tag is middle of body and html. Is there any effect cause in head tags when I use it html tag or not. hope my question is clear.
The reason that you would place the ng-app inside the html tag over the body tag is because you want to manipulate something inside of the head and body using angularjs. Here is an example:
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
<title ng-bind="'Title - ' + title"></title>
<link rel="stylesheet" href="/css/style.css" />
</head>
<body>
...
Notice in the title I have a ng-bind, this way i can use the variable name title to change the title of the web page the user is on. The title will always be Title - what ever link their on In the app.js I make the title var a global variable. This is just one reason to put ng-app in the html tag instead of body.
No. ng-app has no effect on <head> unless you intend to. It should be added to the element which is the scope of your app, the root element html.
Most of the time it is better to use it on body tag unless you want to change something in head e.g. title. For dynamic value of title, ng-app should be added to the <html>.
yes there are some benefits if you put ng-app in the <html> tag,
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
if u put it in html then you can control all the things between html tag, that mean all html can be manipulate using angularjs, for EX you can change the title.
But if you put it in <body> then you loose the control of the <title> or something inside the <head> tags and you can control the inside the <body> tag only.
here is the DOC for NG-APP
Use this directive to auto-bootstrap an AngularJS application. The ngApp directive designates the root element of the application and is typically placed near the root element of the page - e.g. on the <body> or <html> tags.
I'm creating a site using Harp, and I was wondering if there is a way to use Jade blocks alongside the normal != yield way of working. Basically, for page specific scripts, I'd like to pass a block into my layout. At the moment, whatever I have in a block in my template just gets passed through as is into my layout.
For example:
// _layout.jade
html
head
title Hello, world
body
!= yield
div Random delimiter
block scripts
// index.jade
h1 Hello, world
block scripts
script(src='/some/script.js').
div Not working
Outputs:
<html>
<head>
<title>Hello, world</title>
</head>
<body>
<h1>Hello, world</h1>
<div>Not working</div>
<div>Random delimiter</div>
</body>
</html>
Any ideas?
Yes, you could do something like this:
// _custom_layout.jade
html
head
title Hello World
body
block main_content
//- Default main content
div Delimiter
block scripts
//- Default scripts here
And
// index.jade
extends _custom_layout.jade
block main_content
h1 Hello From Index
block scripts
script(src='/some/script.js').
That should output
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello From Index</h1>
<div>Delimiter</div>
<script src="/some/script.js"></script>
</body>
</html>
To take advantage of jade's block feature, use something other than _layout.jade because that file name has a defined use in Harp. You'll have to assign the custom templates to pages using _data.json.
I haven't tested this code, comment if there's anything wrong with it and I'll fix it.
I’m trying to include an HTML snippet inside of an ng-repeat, but I can’t get the include to work. It seems the current syntax of ng-include is different than what it was previously: I see many examples using
<div ng-include src="path/file.html"></div>
But in the official docs, it says to use
<div ng-include="path/file.html"></div>
But then down the page it is shown as
<div ng-include src="path/file.html"></div>
Regardless, I tried
<div ng-include="views/sidepanel.html"></div>
<div ng-include src="views/sidepanel.html"></div>
<ng-include src="views/sidepanel.html"></ng-include>
<ng-include="views/sidepanel.html"></ng-include>
<ng:include src="views/sidepanel.html"></ng:include>
My snippet is not very much code, but it’s got a lot going on; I read in Dynamically load template inside ng-repeat that that could cause a problem, so I replaced the content of sidepanel.html with just the word foo, and still nothing.
I also tried declaring the template directly in the page like this:
<script type="text/ng-template" id="tmpl">
foo
</script>
And running through all the variations of ng-include referencing the script’s id, and still nothing.
My page had a lot more in it, but now I’ve stripped it down to just this:
<!-- index.html -->
<html>
<head>
<!-- angular includes -->
</head>
<body ng-view="views/main.html"> <!-- view is actually set in the router -->
<!-- views/main.html -->
<header>
<h2>Blah</h2>
</header>
<article id="sidepanel">
<section class="panel"> <!-- will have ng-repeat="panel in panels" -->
<div ng-include src="views/sidepanel.html"></div>
</section>
</article>
<!-- index.html -->
</body>
</html>
The header renders, but then my template doesn’t. I get no errors in the console or from Node, and if I click the link in src="views/sidepanel.html" in dev tools, it takes me to my template (and displays foo).
You have to single quote your src string inside of the double quotes:
<div ng-include src="'views/sidepanel.html'"></div>
Source
<ng-include src="'views/sidepanel.html'"></ng-include>
OR
<div ng-include="'views/sidepanel.html'"></div>
OR
<div ng-include src="'views/sidepanel.html'"></div>
Points To Remember:
--> No spaces in src
--> Remember to use single quotation in double quotation for src
For those trouble shooting, it is important to know that ng-include requires the url path to be from the app root directory and not from the same directory where the partial.html lives. (whereas partial.html is the view file that the inline ng-include markup tag can be found).
For example:
Correct:
div ng-include src=" '/views/partials/tabSlides/add-more.html' ">
Incorrect:
div ng-include src=" 'add-more.html' ">
For those who are looking for the shortest possible "item renderer" solution from a partial, so a combo of ng-repeat and ng-include:
<div ng-repeat="item in items" ng-include src="'views/partials/item.html'" />
Actually, if you use it like this for one repeater, it will work, but won't for 2 of them!
Angular (v1.2.16) will freak out for some reason if you have 2 of these one after another, so it is safer to close the div the pre-xhtml way:
<div ng-repeat="item in items" ng-include src="'views/partials/item.html'"></div>
Maybe this will help for beginners
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title></title>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="custom.css">
</head>
<body>
<div ng-include src="'view/01.html'"></div>
<div ng-include src="'view/02.html'"></div>
<script src="angular.min.js"></script>
</body>
</html>
This worked for me:
ng-include src="'views/templates/drivingskills.html'"
complete div:
<div id="drivivgskills" ng-controller="DrivingSkillsCtrl" ng-view ng-include src="'views/templates/drivingskills.html'" ></div>
try this
<div ng-app="myApp" ng-controller="customersCtrl">
<div ng-include="'myTable.htm'"></div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("customers.php").then(function (response) {
$scope.names = response.data.records;
});
});
</script>
On ng-build, file not found(404) error occur. So we can use below code
<ng-include src="'views/transaction/test.html'"></ng-include>
insted of,
<div ng-include="'views/transaction/test.html'"></div>