So what am I doing wrong? I included the ng-include and tried every variation and it is not including the file(it keeps returning a 404 in the console), the directory location is as follows:
-App
--Layout
---Partials
----Navigation.tpl.html(File)
--Layout.tpl.html(File)
And the ng-include is located in the layout.tpl.html file:
<div data-ng-include="'layout/partials/Navigation.tpl.html'"></div>
Please note that I am using webpack for this project(that shouldn't matter). I am calling the layout.tpl.html file as the base layout, and the partials are included inside the layout.tpl.html file. Also, I am using vs having a ng-app on the DOM:
angular.element(document).ready(() => {
angular.bootstrap(document, ["app"]);
});
I have worked with angular in the past, and I am at a loss when such a simple task is taking so long time. Also note, when I use the
$templateCache.put('..','..')
and put in html minified string from the navigation.tpl.html with the same directory, it works just fine (but if I use $templateCache.get() or require() from the template location, it doesn't work), but the HTML string is pulling from the cache and I want to be able to update one file vs having to use minified code.
Sorry in advance if I missed something, I am in a rush to get this done, and it should be the simplest thing that is just not working.
Take a look at https://github.com/WearyMonkey/ngtemplate-loader
You should preload your template with the correct key in the $templateCache by requiring it in your bundle.
require('ngtemplate?module=[xx]&relativeTo=/layout/partials/!./layout/partials/Navigation.tpl.html');
That way you can ask for 'Navigation.tpl.html' in ng-include or with templateUrl
Related
I'm programming a project using HTML and JavaScript. I access my js code with the following script tags:
<script src="js/monthChanger.js"></script>
However, when running my program in Edge & Google Chrame, I keep getting
this error.
Why is this happening? Looking at my file directories there doesn't seem to be anything wrong with the way I declared the function.
check out this article on absolute and relative paths
you probably want this:
<script src="./js/monthChanger.js"></script>
The ./ makes it relative to the current folder.
Alright, so it turns out my issue had nothing to do with HTML.
I didn't specify this in the OP, but I was also using a Django's framework in my project. I had mistakenly assumed that static fields such as css, js, and images would be called the same way they are called in normal html files. However, after reading django's documentation on managing static files, I realize that this is not the case. I follow django's instructions and was able to get my code working.
I'd bet this question is already answered somewhere, but I'm coming up empty.
I'm using Angular 1.5.7 and wanting to import some external HTML, within my project, into a component controller (to use in a tooltip), and I can't figure out how to do it.
My structure within a folder is simply like this:
component.js
component_template.html
other_html.html
I've tried the following, using WebPack with the html and ngTemplate loaders (configured in my webpack config): Above my controller declaration, I add
import other_html from './other_html.html';
which is exactly how I get the template for the view (and which works with no further ado):
import component_template from './component_template.html';
angular.module(module).component('name', {templateUrl: component_template}, ...);
Inside the component controller, I've tried various combinations of $sce.trustAsUrl, $sce.getTrustedHtml, and $sce.getTrustedUrl to unwrap the content of my external HTML (in the variable 'other_html') as a string, but frankly these things just confuse me and the documentation doesn't help. It also seems that I'll need to compile the resulting string against the scope of my controller, but I need an HTML string first (I keep ending up with a URL string).
Can anyone demonstrate for me the best way of doing this, with or without relying on WebPack and the html and ngTemplate loaders in the process?
Thanks
Answering my own question. Not entirely my perfect solution, because I'm not compiling any values from my imported HTML, so I'm breaking it up to control as smaller fragments.
First off, I shouldn't have been using ngTemplate in the mix for this purpose. Secondly, the way around that is to prefix your loader chain with an exclamation point, to override the default from your webpack config.
So, this works to provide me with the string I need:
var other_template = require('!html!./other_template.html');
Since I'm using the string to populate a tooltip (jQuery tipso with a wrapping directive) and requires values only available in my component's $onInit callback, I don't think I even have the chance to compile it against my scope before it ends up as output. But in other cases, I'm sure I could compile it and have things work as expected.
Hope maybe this helps others.
I'm writing an Angular directive that needs a template. Loading a template in Angular is done by either embedding the template itself in the source code with <script type="text/ng-template"> or by providing a url in the directive's configuration, like templateUrl: "/path/to/template.html".
The first way is completely unacceptable for a 3rd party directive, because people won't npm install my directive and then do include("node_modules/mydirective/template.html")(or equivalent), it just feels dirty.
The second way won't work for the same reason. The template would be located inside the node_modules directory, which is not publicly accesible after packing/deploying a website.
My idea is to allow the developer to just include the template the same way the directive itself is included:
<script type="text/javascript" src="/path/to/directive.js"></script>
<script type="text/ng-template" src="/path/to/directive.html"></script>
The problem is that the second line won't work (browser will complain about unexpected characters, I assume because it still tries to parse the fetched content as JS.
I found that using ng-include instead of script src actually fetches the template. The problem with that is that by the time the template is fetched, my directive has already ran the link function and crashed (because it couldn't find the template).
Is there a way I can either delay my directive until the template is fetched or provide any sane way of loading the template?
What about inline templating with just template, instead of templateUrl? If its a library, I feel it's the simplest way to bundle the directive and template for distribution
One way to delay evaluation of your directive is to write a wrapping directive that does the request for the template, then $compile and append the initial directive to the page in the request callback. Still, not so pretty.
I have a very strange requirement that I need to bundle everything together in one HTML page with my Durandal Single Page application. I can make this away with my dependencies as I am defining them with a name:
define("models.mapper", [], function() {
});
However, it seems like it will not be possible to bundle durandal stuff as it defines modules without names:
define(['require', 'jquery'], function(require, $) {
// ....
}
This is fine when you want to make it work with path references but it seems like this will make it hard to inline this into HTML. Any ideas or suggestions on this?
Require.JS requires you to have only one anonymous define per file so that it can use the file path+name relative to the base path to give it a name. If you would like to have the durandal source inline on your page as well then you'll need to update their define lines to give them the appropriate names (i.e. define('durnadal/system', ......).
An easier approach may be to just build your source code in the structure of a normal durandal project and then use the RequireJS optimizer (http://requirejs.org/docs/optimization.html) to build them into a single JS file - if you configure this correctly without minification then you can just paste the file contents into a script tag on your page and it'll still be legible!
If you really wanted to you could then just continue developing in the single HTML file however you really should look at automating all of this into a grunt workflow and it shouldn't be too hard and you'll have much easier to manage code. Note that you may even be able to use the durandal grunt task to do this, but I'm not sure what options it allows you to provide but you can definitely use the requirejs grunt task and build it into your workflow without minification. With some templating task you could then inject that output into your final HTML page.
I'd like to split my views in Grails into 2 files a .gsp file and a .js file so that I get a cleaner Javascript separation from my views. So here's an example:
views/index.gsp
views/index.js
views/home/index.jsp
views/home/index.js
But when I simply add the index.js script reference like this:
<script src="index.js" type="text/javascript"></script>
all I get is a 404.
Does anyone knows how to deal with this?
A great benefit would be to have the ability to use view data inside the index.js file to produce the desired content.
Matthias.
Actually, it should be perfectly possible to serve a JS file (or any other file type) as a GSP from your grails-app/views/ directory. The only thing you have to do, is define a suitable URL mapping for those GSPs, e.g.:
"/javascript/home/index"(view:'/home/index.js')
With this URL mapping, you can put your JS code into grails-app/views/home/index.js.gsp (note the trailing .gsp) and you can use any grails tags in your JS source. To ensure that your JS is delivered with the correct content type, you may want to place
<%# page contentType="text/javascript"%>
at the beginning of your GSP.
Unfortunately, the createLink tag doesn't support link rewriting to views, but it should be easy to write your own tag to create those links.
Anyways, keep in mind that this won't have a very positive impact on your app's performance. It's usually better to have static JS files (and also serve them as static resources) while passing dynamic stuff as parameters to JS functions for example. This will also keep you from some headaches wrt. caching etc.
The idea is good, but Grails has this directory structure for a reason. The view folder is intended for a certain artifact type (views)..
You could clone your view folder structure under web-inf, but that gives you more work as I guess the idea behind this is to keep related files close together for convenience reasons.
Even though I'm not to excited about storing Javascript together with the view I loved Robert's idea of hooking into the build process by using build events to copy javascript sources into the right directory! If you decide to go down that road you might as well compress the sources while you're at it. ShrinkSafe is popular library.
I don't think you are allowed to access js inside views/
if you need to do that ... here is the trick
create your js and rename it with myjs.gsp (use "")
iniside _myjs.gsp type you js
... write down you js in here ...
inside you gsp (for example: index.gsp, view.gsp, etc)
type this tag to upload you js
Update 2:
Grails offer the possibility of hooking into the build lifecycle using custom events.
An event handler can be written which synchronises all JavaScript files under grails-app/views with the target folder of web-app/js.
Place the custom code in $PROJECT/scripts/Events.groovy. The PackagingEnd is a good target for the invocation, since it happens right after web.xml is generated.
eventPackagingEnd = { ->
// for each js file under grails-app/views move to web-app/js
}
Update
If you'd like the JavaScript files simply 'meshed' together, you can do that using symlinks, e.g.:
grails-app/views/view1/index.js -> webapp/js/view1/index.js
As far as I know, there is no way of forcing grails to directly serve content which is outside of web-app.
Alternatively, you can inline your JavaScript, but that can have performance implications.
JavaScript files belong under web-app/js.
Then you can reference them using <g:javascript src="index.js" />.