Situation
I started an app with Playframework (Scala) and AngularJS v1.3.
(Exactly the template Play Silhouette Angular Seed)
Goal
Loading difference templates using ng-include or a directive.
Problem
Always that I put a reference in Angular code, it doesn't work.
Example:
<div ng-include="'/tpl.html'"></div>
<script type="text/ng-template" id="/tpl.html">
Content of the template.
</script>
Result: works!!
Now, if I put the template tpl.html in a file in the same directory:
<div ng-include="'tpl.html'"></div>
Result: Doesn't work!! (And in other directories, I tried all the possible routes...)
The same problem occurs in directives, if I put the template inside the directory it works well, but if I try to put in another file it doesn't work.
Question
I used Angular in other projects and never occurs something like this. I think that this happens because Scala (language of Playframework) needs to be compiled and the files .scala.html are converted in .html.
How can I create some templates .html and then with ng-include
put the correct reference?
The root directory is the same that index.htmlfile (path: ui/app).
If the file view1.html is in the path ui/app, the ng-include will be like this:
<div ng-include="'./view1.html'"></div>
Because ui/app is the root path.
Related
I'm trying to include some HTML on my software's webpage using ng-include, and I can't seem to get it to work. For now, I am using simplified versions of my end goals for testing purposes.
Relevant snippet of my project tree:
-web
--dragonweb
---src
----app
-----dragon
-------dragon.css
-------dragon.html
-------dragon.spec.ts
-------dragon.ts
-------test.html
dragon.html
<div ng-app = "" ng-controller="test">
testing
<div ng-include="" src="'app/src/dragon/test.html'"></div>
</div>
test.html
<div>
This is an included file
</div>
Expected output on the web page:
testing
This is an included file.
Actual output on the web page:
testing
I've tried using different lengths of the path to test.html, with no luck. I've also been playing around with the use of the ng-controller tag, and syntax for the ng-include tag, with no luck. There are no console errors in the web page. Any idea why it doesn't seem to be working?
Backstory/disclaimer: I was the intern on this project before inheriting it after the lead dev suddenly left, this is my first time doing any sort of web development, and I'm just learning on the job from trial and error. So if I'm doing things wildly incorrect, I am absolutely all ears for how I can improve this process! I chose to try to use ng-include because we already have Angular implemented, and based on my research this seemed like the theoretically easiest way to accomplish what I wanted.
You need to pass the src to ng-include directive not the src attribute:
Ex:
<div ng-include="'app/src/dragon/test.html'"></div>
or use relative path:
<div ng-include="'./test.html'"></div>
Please check out the official documentation for details
Usage:
as element:
<ng-include
src="'string_url'">
...
</ng-include>
as attribute:
<ANY_ELEMENT_TAG
ng-include="'string_url'">
...
</ANY_ELEMENT_TAG>
as CSS class:
<ANY class="ng-include: string; [onload: string;] [autoscroll: string;]"> ... </ANY>
I'm trying to use a ng-include to include a template within a template in a component, the folder structure is as follows
-DE
--de
---test.html
-template.html
template.html content
<div>
<ng-include src "'/DE/de/test.html''"></ng-include>
</div>
This is what I get rendered in the page html
<!-- ngInclude: undefined -->
EDIT
I've edited the html as follows
<ng-include src="'/DE/de/test.html'"></ng-include>
Still getting the same error
Starting the path with a slash / makes it as absolute path. This should work fine till your app's root is pointing to same folder in which template.html is put.
But, if that's not the case, you need to use relative path to make it work:
<ng-include src="'DE/de/test.html'"></ng-include>
This way, AngularJS fetches the source file, with path relative to the current folder.
Note that you have several mistakes in the posted code:
Missing equal sign for the src attribute
Extra single quote inside the path value
NOTE : you do not need single quotes, the value of the src attribute is assumed to be a string
Fixed version:
<div>
<ng-include src="/DE/de/test.html"></ng-include>
</div>
I have a file index.html with the following code:
<div ng-include="'fragment-1.html'"></div>
The code of fragment-1.html:
<b>Inside Fragment 1</b>
<script type="text/javascript">
alert("Inside Fragment 1");
</script>
When I load index.html into the browser, output is:
Inside Fragment 1
The DOM has the <script> tags but the alert is not shown.
My hypothesis:
Because the DOM loads first along with the Angular modules and then Angular checks and binds the data(in this case, fragment-1.html file content) to the view(index.html), it just adds the elements of fragment-1.html in DOM. To execute the JS inside fragment-1.html, we should create a hack for it. Am I right in this explanation? Or is there something else that I may be missing?
I had to load jQuery before loading Angular. The explanation is in the link specified above. Explanation: script not running in templateurl
To include another partial HTML file in your parent HTML file, one can also use Angular directives, depending on the situation. See this answer for when to use ng-include and when to use directives: https://stackoverflow.com/a/24172025/3132646
You don't need to hack. Angular gives you a neat and simple solution to what you want to achieve with your code.
Controller
.controller('fragmentOneCtrl', function ($scope) {
alert('"Inside Fragment 1"');
})
View
<div ng-repeat="go in ['go', 'gogo']" ng-include="'includeThis'">
</div>
<script type="text/ng-template" id="includeThis">
<div ng-controller="fragmentOneCtrl">
</div>
</script>
You may want to use $sce.trustAsHtml before injecting the resource in html
I am using angularjs ui bootstrap, and I have my popover template all set up and working. Here is what I have.
directive.html
...
popover-title="Title"
popover-template="'popover.template.html'"
...
A bit lower in the same directive I have the template:
<script type="text/ng-template" id="popover.template.html">
<label>Popup Title:</label>
<span>Popup content</span>
</script>
Now I will need this popover for a few elements, so how can I put it in an actual popover.template.html file in my source tree I just made in the same directory in the simplest way (least lines of code) possible?
The solution was this:
leave the script tags needed for inline tags behind
give the template parameter the full path
create a new file in the desired place, no header needed inside
then add to the element you want popover to work on this:
popover-template="'app/templates/popover.template.html'"
No need for templateCache or any other tricks, the site only sends a single request, even with multiple elements using the same template. It loads on first request.
I'm using AngularJS to "include" html partials in my web app. I'm using a nested ng-include for this.
I also have an animation on the outer most ng-include. It all works fine. The only problem is that the outer ng-include template is loaded first. Then the included HTML file also has an ng-include which also loads an HTML file.
The last included HTML file causes the div to suddenly expand in size and that makes the animation look jumpy and weird.
This problem could be solved if all the nested ng-includes could be preloaded somehow. Is something like that possible in AngularJS?
The code I have looks something like this:
My main view:
<div class="animation-grow-in animation-grow-out" ng-repeat="myList">
<div ng-include"base-partial.html"></div>
</div>
The base-partial.html file:
<div ng-switch="myList.type">
<div ng-switch-when="file1">
<div ng-include="'file1.html'"></div>
</div>
<div ng-switch-when="file2">
<div ng-include="'file2.html'"></div>
</div>
</div>
The file1.html and file2.html contain forms.
But because filex.html is loaded with a delay that makes it all look jumpy. So is there a solution for this problem? Can I preload all nested ng-includes?
You can use angularjs template caching service to cache your template. When boot strapping your application, put all your templates inside a cache so that it will not make XHR calls for your templates.
https://docs.angularjs.org/api/ng/service/$templateCache