I've got a template in a html page to include in another page. This is because the two html are very long and i can't use only one page to both. So i decided to separate them. Summary this is my case:
in partials/template.html
<script type="text/ng-template" id="myTemplate">
myTemplate..
</script>
and in partials/my_layout.html
<ng-include src="'./partials/template.html'"></div>
But it's not working now. Nothing is showing when the page is loaded. How can i access to the template of the template.html page?
Its likely a relative path issue. The path should be from index.html to your template, not the path from one template to another. Try something like this:
<ng-include src="'partials/template.html'"></div>
EDIT
I just noticed this was a script template. The id that you give the template is the key that you can use to access it in the src of the ng-include. Try this:
<ng-include src="'myTemplate'"></div>
Related
I am working on a project that requires two angularjs files, textAngular-sanitize and angular-sanitize. When both of these files are loaded in the header or footer, the part of the document that requires the file that is loaded first will work, however the element that requires the file that is loaded after the first ceases to work. I.e when angular-sanitize is loaded first, then the textAngular dependent element stops working, whereas if the textAangular file is loaded first, then the angular-sanitize element stops working. This is presumably because both files are loaded and run over the entire document. Is there a way to confine the 'scope' of one of the files to only one element on the page so that both scripts can be run without interfering with one another?
Or perhaps, is there an alternative method of loading external scripts other than the <script> tag?
Here is an example of what is going on:
<head ng-app="myApp">
<script src="scripts/textAngular.min.js"></script>
<script src="scripts/angular-sanitize.min.js"></script>
</head>
<body ng-controller="MainController" ng-init="initialize()">
<div id="ngSanitizeElement">
<!-- This element won't work -->
</div>
<div id="textAngularSanitizeElement">
<!-- This element will work -->
</div>
</body>
Not sure to understand your problem, but if you're looking for something to load external files from your controllers or your router, try ocLazyLoad : https://oclazyload.readme.io/docs
Which backend do you use? PHP? I would then put in the script tag the value of the right file depending?
Or can't you use 2 different ng-controllers?
<div ng-controller="textAngular ">
<div ng-controlelr="angular-sanitize">
I am Developing a static responsive HTML website using bootstrap.
There are 10 pages in the website. here i need a menu(navbar) to access all pages, the menu is in the separate html page.
what i need to do is, include that menu.html page into all pages in my website.
I've tried the following,
<div id="menuArea" ng-controller="menuAreaCtrl" ng-view ng-include src="'menu.html'" ></div>
but it is not worked.
I've already include the angular js as same as below:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script>
Thanks in advance...
According to angularjs docs you can use ngInclude
<div ng-include="menu.html"></div>
Don't use ng view
<div id="menuArea" ng-controller="menuAreaCtrl" ng-include src="'menu.html'" ></div>
You can also simply use , something like this :
<?php require("navigation.php"); ?>
I am loading a html page via angular route inside a ng-view.
The page which I am loading contains a ng-include tag, pointing to
another html file.
I tried all the below syntax =
<div ng-include src="'some.jsp'"></div>
<div ng-include="'login.jsp'"></div>
<div ng-include src="include.url"></div>
None working. But If I put the same tag outside the ng-view
its working fine.
What am I doing wrong?
The url to the file should be relative to your index.html (main html file).
If your structure is like this:
index.html
template
template1.html
template2.html
and in template1 you want to ng-include template2.html,
you should do
<div ng-include="'template/template2.html'"></div>
Here is a working example.
Here's the structure of my app: I have two HTML files:
index.html
items.html
items.html contains different data-role="page" divs.
<div data-role="page" id="myitem" data-title = "Items1">
...
</div>
In my page "index.html", I would like to do a changePage to a specific page located in items.html ( with something that would look like $.mobile.changePage('items.html#myitem')
Any ideas ?
Mixing single-page and multi-page templates is not supported. You either have to put everything in one file, or to split everything in multiple files.
I have some HTML files, and each one of them I want to partially render in another HTML file, for example header.html and footer.html in order to observe DRY concept.
HTML files should look like this:
<!--render header.html-->
<div>
Content
</div>
<!--render footer.html-->
How can I do that?
If you're just using plain HTML and Javascript, you could include jQuery and use an AJAX request to load the contend of another HTML page in your main page.
Have a look at the jQuery 'load()' function here:
http://api.jquery.com/load/
Assuming your have the following html:
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
your usage would look something like this:
$('#header').load('header.html');
$('#footer').load('footer.html');
Here's a link (first one from Google I might add) that explains how to do this in various languages.
Also note that some IDEs take care of this for you. Dreamweaver being one example; in ASP.NET there are master pages; and so on.
PHP:
<?php
require($DOCUMENT_ROOT . "path to file/include-file.html");
?>
ASP:
<!--#include file="path to file/include-file.html"-->
JS:
JavaScript is another way to include HTML within the pages of your
site. This has the advantage of not requiring server-level
programming. But it's a little more complicated than the server-level
include methods.
Save the HTML for the common elements of your site to a JavaScript
file. Any HTML written in this file, must be printed to the screen
with the document.write function.
Use a script tag to include the
JavaScript file on your pages.
<script type="text/javascript" src="path to file/include-file.js">
Use that same code on
every page that you want to include the file.
PLEASE NOTE that the JS version is NOT ideal.
1. JS may be disabled or unavailable in the browser.
2. The page won't be rendered/loaded all at once.
Also, I don't think DRY really counts for this one. Consider using an IDE that will create page templates for you (like Dreamweaver for example).
If you are brave enough (and a little bit old fashioned) and you can't use any of the above, consider using an iframe for your content:
<html>
<body>
<div>my header</div>
<iframe src="mycontent.html" />
<div>my fooder</div>
</body>
</html>
DISCLAIMER
I would rather cut off my own hands than implement the iframe or JS approach. Give deep consideration towards whether you actually NEED to do this.
If you are looking for a client side only solution that is html/js only you should have a look at AngularJS and its ngInclude syntax.
http://docs.angularjs.org/#!/api/ng.directive:ngInclude
If you are using server-side programming, you can use server-side include else if your host file is an HTML file then you can use html SCRIPT tag to include the header.html and footer.html files. Though, am not sure as to what do you really mean by partially rendering HTML file?
As others said, it looks like it can't be done with HTML alone. Another way it could be done on the server-side, if you are using Java, is with Thymeleaf.
For example, adding a main menu on every page with
<div th:replace="fragments/mainmenu.html"></div> . Then mainmenu.html could just contain a bunch of divs. The fragment doesn't need to be a full HTML page.