craigburke / angular-template-asset-pipeline Goto Github PK
View Code? Open in Web Editor NEWAngularJs Template module for the Asset Pipeline
AngularJs Template module for the Asset Pipeline
I have a simple test grails app that uses angular-template-asset-pipeline in Grails 2.4.4. It works fine using the following versions in BuildConfig.groovy
:
compile ":asset-pipeline:1.9.9"
compile ":angular-template-asset-pipeline:1.4.2"
But does not when using current versions:
compile ":asset-pipeline:2.0.10"
compile ":angular-template-asset-pipeline:2.0.1"
In 2.0.1, I do not see the JavaScript files generated by the plugin to cache the templates that should be included by a require_tree
directive in my main JavaScript file.
Hi,
I'm currently using :
asset-pipeline 1.9.9
angular-template-asset-pipeline 1.3.0
And I'm trying to update to versions :
asset-pipeline:2.1.1
angular-template-asset-pipeline:2.0.3
Unfortunately, the module names generated by the plugin in the .js file are not valid anymore. For example :
/assets/my-app/app-section/templates/hello.js Returns :
angular.module('myApp/appSection/templates/hello.tpl.htm').run(['$templateCache', function($templateCache) {
$templateCache.put('hello.htm', '<h1>Hello World!</h1>');
}]);
With version 1.3.0, it got :
angular.module('my-app/app-section').run(['$templateCache', function($templateCache) {
$templateCache.put('hello.htm', '<h1>Hello World!</h1>');
}]);
Perhaps the problem is coming from the fact that you use File.separator to split the path. File.separator on windows is '', but even on windows the path contains '/' ...
Having following code:
<div>
some content
</div>
<script type="text/ng-template" id="myTemplate.html">
<div>
test
</div>
</script>
is compressed to:
<div>some content</div><script type="text/ng-template" id="myTemplate.html"> n<div> n test n n </div> n</script>
Module name isn't generating correctly (using whole path instead of the part relative to the asset root).
removed content.
I'm using Grails 2.4.1 & the Asset Pipeline 1.9.7.
I don't THINK this is necessarily an issue with this plugin but i'm hoping for some help since it seems i'm stuck...
When building my application using 'run-app' or 'war' locally on my development PC everything seems to be fine and the angularjs templates are being included now just fine. However; when I attempt to build from Jenkins I get the following very strange lines of output related to the Angular Template Asset pipeline and the build fails:
Uninstalled plugin [angular-template-asset-pipeline]
| Error WAR packaging error: com.craigburke.angular.HtmlTemplateAssetFile
Build step 'Build With Grails' marked build as failure
Any thoughts on what could be causing this?
Something like this:
config = [templateModuleName: 'foo']
This would add all templates to the foo
module (regardless of the path and the value of the moduleNameBase
property).
Hi Craig, I left a comment on your blog about my implementation of the templates plugin not working with my templates, my comment was:
Hi Craig. I am currently attempting to implement a angular front end in to my grails applications following your example application and other examples that I have come across. I am using grails 2.4.3 and have tried using a number of versions of angular template and angular annotation plugin version but I have not been able to get it to work seamlessly.
The problem that I am having is with partial templates. I have followed all guidelines in the documentation regarding module names, template location and unique file names but whenever I try to reference a template in my directives I receive a 404 not found error for the template file I am referencing.
When I start the grails app the following is logged out which would suggest the templates are not being inserted into the cache:
Cache [:]
Cache [:]
Cache [:]Also, when using the developer tools in chrome I notice that the asset directory does not contain the template directory I created to hold the template files.
Could you help?
The test application is on git hub at https://github.com/JCDubs/AngularGrails. It contains all of the files and the angular implementation for reference.
When the TemplateProcessorUtil.formatHtml() is complete, a back slash is put on the next line.
As a result, I am getting 'Unterminated String Literal' in FireFox and 'Unexpected token ILLEGAL' in Chrome. Every template breaks.
create-edit.tpl.html:
<button class="btn btn-default" ng-click="onClick()" ng-disabled="isDisabled">
<span class="fa fa-plus-circle"></span> Create {{resourceName}}
</button>
Is being generated as:
angular.module('grails.directives.buttons').run(['$templateCache', function($templateCache) {
$templateCache.put('create-button.html', '<button class="btn btn-default" ng-click="onClick()" ng-disabled="isDisabled">
\
<span class="fa fa-plus-circle"></span> Create {{resourceName}}
\
</button>');
}]);
Need to make sure HTML comments are preserved (or at least provide the option) for the edge case that someone is applying a directive using a comment.
When I try to use this plugin the resulting JS outputs a.getAssetUrl("templates/grParticipantTemplate.tpl.html")
but (later in the same file) the templateCache is hydrated with a different key: a.put("/common/grParticipantTemplate.html",'<div...')
. I'm assuming the code is trying to fetch the grParticipantTemplate.tmp.html file because of the cache mismatch. Obviously that file doesnt exist because the .tmp.html file is not copied into the assets directory.
My directive looks like this (directives/grParticipant.js
):
(function(_) {
'use strict';
angular.module('member.common').directive('grParticipant', [
'urlService',
function(urlService) {
return {
controller: grParticipantController,
restrict: 'E',
scope: {
participant: '=',
coverageDate: '=?',
productType: '='
},
templateUrl:'templates/grParticipantTemplate.tpl.html'
};
}
]);
grParticipantController.$inject = [
'$scope',
'enums',
'enumService'
];
...
module.js:
//= require_self
//= require_tree .
(function() {
'use strict';
angular.module('member.common', [
'domain',
'ui.bootstrap'
]);
})();
Config:
grails.assets.angular = [
moduleNameBase: 'member'
]
grails.assets.minifyOptions = [
languageMode: 'ES5',
targetLanguage: 'ES5',
optimizationLevel: 'SIMPLE'
]
ngmodule "app" -> with own templatecache
ngmodule "app.submodule1" -> with own templatecache
ngmodule "app.submodule2" -> with own templatecache
in TemplateProcessorUtil.formatHtml() are only escaped "/n", if we have "/r/n", all will be broken.
When naming directories using camel case, the toCamelCase is transforming to lower case and breaking module template caches via case dependent pathing. As a case of irony, the toCamelCase actually destroys camel case. This is problematic due to the usage module imports through out the site still using the camel case. A temporary workaround it to lowercase or add - to all module directories, but this creates a disconnect with the actual module names on the other imports and the directory in which they live.
I have to use 2.1.0, since the latest Version is compiled with Java 8.
I want to set includePathInName to true, since its not default in that version (build.gradle):
assets {
configOptions = [
angular : [
templateFolder: 'templates',
moduleNameBase: '',
compressHtml: true,
preserveHtmlComments: false,
includePathInName: true
]
]
}
No matter what I change here, it will change nothing. It always loads the template without path
Hello, I use gsp
for templating and internationalization of angularjs views and want to move away from getting templates from server and use html templates without every time rendering.
Your plugin suggests, as I see, using of templateCache
for caching templates, it's cool and I used this approach a lot, but I would like to know the way to make internationalization.
For now I see several solutions:
gsp
files and put result (html
files into assets folder) for every languageangular-translate
So, could you say, what's the most correct solution in your opinion?
Please, ignore my message, if this isn't a good place to ask.
Thanks
We want to have a project structure like:
WAR packaging error: No signature of method: static asset.pipeline.AssetHelper.getAssetPathsByPlugin() is applicable for argument types: () values: []
Here is the error that comes out when I build my server after adding the line runtime ":angular-template-asset-pipeline:2.0.3" to my BuildConfig.groovy file
@craigburke adding windows related issues here which can be discussed separately and closed if not needed.
I tested using GenericAssetFile
public String getName() {
path.split("/")[-1]
}
but 6 tests failed, one of them is
Condition not satisfied:
TemplateProcessorUtil.getTemplateName(assetFile, 'templates', withPath) == result
| | | | |
| | true | \foo-bar1\foo-bar2\foo-bar3\foo-bar4\foobar.html
| | false
| | 36 differences (57% similarity)
| | \\foo-bar1\\foo-bar2\\foo-bar3\\foo-bar4\\foo(-)bar(1\\foo-bar2\\foo-bar3\\foo-bar4\\foobar).html
| | \\foo-bar1\\foo-bar2\\foo-bar3\\foo-bar4\\foo(-)bar(--~---------~---------~---------~------).html
| asset.pipeline.GenericAssetFile@11427db
\foo-bar1\foo-bar2\foo-bar3\foo-bar4\foo-bar1\foo-bar2\foo-bar3\foo-bar4\foobar.html
at com.craigburke.angular.TemplateProcessorUtilUnitSpec.covert path: #path to template name #withPathDescription(TemplateProcessorUtilSpec.groovy:46)
<script type="text/ng-template" id="ng-table/filters/codigoFilter.html">
<p>
content...
</p>
</script>
the htmlcompressor will only compress it is the type of tag to text/x-jquery-tmpl according to documentation.
"Any content within <pre>, <textarea>, <script> and <style> tags will be preserved and remain untouched (with the exception of <script type="text/x-jquery-tmpl"> tags which are compressed as HTML). Inline javascript inside tags (onclick="test()") will be preserved as well. You can wrap any part of the page in <!-- {{{ -->...<!-- }}} --> comments to preserve it, or provide a set of your own preservation rules (out of the box <?php...?>, <%...%>, and <!--#... --> are also supported)"
There's a lot of information out on this stack overflow question - http://stackoverflow.com/questions/25390307/how-do-i-reference-a-static-html-rsource-using-the-grails-asset-plugin
Any feedback would be greatly appreciated.
Thanks!
in app.js
//= require_self(1)
//= require_tree /app/templates
i get an exception for the templates loaded
template is in the path
sampleapp/assets/app/templates/operations/test.tpl.htm
below is the exception thrown
URI /sampleapp/assets/app/templates/operations/test.js
Class java.lang.NoSuchMethodError
Message asset.pipeline.AssetPipelineConfigHolder.getConfig()Ljava/util/Map;
----------------------------------------------------------------------------------------------------------------
Line | Method
->> 449 | executeChain in org.apache.shiro.web.servlet.AbstractShiroFilter
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
| 365 | call in org.apache.shiro.web.servlet.AbstractShiroFilter$1
| 90 | doCall . . . . . in org.apache.shiro.subject.support.SubjectCallable
| 83 | call in ''
| 383 | execute . . . . in org.apache.shiro.subject.support.DelegatingSubject
| 362 | doFilterInternal in org.apache.shiro.web.servlet.AbstractShiroFilter
| 125 | doFilter . . . . in org.apache.shiro.web.servlet.OncePerRequestFilter
| 1110 | runWorker in java.util.concurrent.ThreadPoolExecutor
| 603 | run . . . . . . in java.util.concurrent.ThreadPoolExecutor$Worker
^ 722 | run in java.lang.Thread
Caused by NoSuchMethodError: asset.pipeline.AssetPipelineConfigHolder.getConfig()Ljava/util/Map;
->> 16 | process in com.craigburke.angular.HTMLTemplateProcessor
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
| 87 | processedStream in asset.pipeline.AbstractAssetFile
| 291 | fileContents . . in asset.pipeline.DirectiveProcessor
| 65 | serveUncompiledAsset in asset.pipeline.AssetPipeline
| 98 | doFilter . . . . in AssetPipelineFilter.groovy
| 449 | executeChain in org.apache.shiro.web.servlet.AbstractShiroFilter
| 365 | call . . . . . . in org.apache.shiro.web.servlet.AbstractShiroFilter$1
| 90 | doCall in org.apache.shiro.subject.support.SubjectCallable
| 83 | call . . . . . . in ''
| 383 | execute in org.apache.shiro.subject.support.DelegatingSubject
| 362 | doFilterInternal in org.apache.shiro.web.servlet.AbstractShiroFilter
| 125 | doFilter in org.apache.shiro.web.servlet.OncePerRequestFilter
| 1110 | runWorker . . . in java.util.concurrent.ThreadPoolExecutor
| 603 | run in java.util.concurrent.ThreadPoolExecutor$Worker
^ 722 | run . . . . . . in java.lang.Thread
what am i doing wrong?
I had to redundantly place the plugin configuration params (templateFolder, templateModuleName) in application.groovy and build.gradle, so that they get applied when running in dev environment without war deployment and as well while building a war. In application.groovy I had to unwrap the angular specific configurations from configOptions. This is a bug that should be fixed. (HTMLTemplateProcessor)
If I create the following project my_todo
by doing:
grails create-app --profile angular -features hibernate,json-views my_todo
and running:
grails run-app
When I browse to http://localhost:8080/, I get the following error:
angular.js?compile=false:68 Uncaught Error: [$injector:nomod] Module 'myTodo.index' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.5.7/$injector/nomod?p0=myTodo.index(anonymous function) @ angular.js?compile=false:68(anonymous function) @ angular.js?compile=false:2075ensure @ angular.js?compile=false:1999(anonymous function) @ index.js?compile=false:1 angular.js?compile=false:11881 GET http://localhost:8080/my_todo/index/index.html 404 (Not Found)(anonymous function) @ angular.js?compile=false:11881sendReq @ angular.js?compile=false:11642serverRequest @ angular.js?compile=false:11352processQueue @ angular.js?compile=false:16170(anonymous function) @ angular.js?compile=false:16186$digest @ angular.js?compile=false:17257$apply @ angular.js?compile=false:17552bootstrapApply @ angular.js?compile=false:1754doBootstrap @ angular.js?compile=false:1752angularInit @ angular.js?compile=false:1657(anonymous function) @ angular.js?compile=false:31468trigger @ angular.js?compile=false:3198defaultHandlerWrapper @ angular.js?compile=false:3488eventHandler @ angular.js?compile=false:3476
If I create an other project todo
by doing:
grails create-app --profile angular -features hibernate,json-views todo
and running:
grails run-app
Everything is fine.
The problem is coming from how /assets/my_todo/index/templates/index.js?compile=false
is built.
It points to angular.module('myTodo.index')
that does not exists. I guess it should be my_todo.index
Create a new Grails 3 (latest snapshot, not RC1) sample project using Angular.js templates. Then run ./gradlew assemble
to build a runnable Jar. This Jar can be run in place java -jar build/libs/sample-0.1.jar
and everything works, but if you copy the Jar to another location on your hard-drive, it will fail to run just for pages that use these Angular.js templates.
There was a very similar Grails 3 bug for GSPs recently: https://jira.grails.org/browse/GRAILS-12077
Hi Craig,
I was after a feature in version 2.4.0. But realised that it has not been published. I am wondering if you plans to release version 2.4.0 soon?
temi
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.