Im using angular-ui-bootstrap with Grails 2.3.x asset-pipeline:1.6.1 plugin. One of the components - alert.js is attempting to load /template/alert/alert.html but this resolves to 404.
I tried including grails.assets.includes=[*/.html], did not help.
Any workaround for this? Anyway to let asset-pipeline include partial templates?
Is template located in assets, if so remember the first level folders inside of assets are flattened so you may want to nest your templates one more level or adjust your path
I have tried putting the /partials directory under /web-app. It ends up like:
/web-app/partials/content.html
I don't need to mess about with asset-pipeline, it just works!
The versions I use are:
Grails: 2.4.2
compile ":asset-pipeline:1.8.11"
Hope this helps anyone who upgrades their Grails version as well.
thanks for your great blog about AngularJS and Grails, which jumpstarted me on this topic.
Regarding partials, I assume the assets directory is not the right place to put them, because they get concatenated and minified in production mode.
Instead, I use GSP templates as AngularJS partials. For example, I have
views/partials/login.gsp
<div>Hello World!</div>
conf/UrlMappings.groovy
static mappings = {
...
'/partials/login'(view:'/partials/_login')
}
grails-app/assets/javascript/
...
templateUrl: 'partials/login',
...
Advantage: You may even use script lets and taglibs in the partials.
An alternative to using GSP directly would be James Kleeh's approach in this thread.
Best regards,
Björn
Related
I'm starting my first AngularJS 5.0.1 application using this theme: https://themeforest.net/item/ubold-responsive-web-app-kit/13489470
But I'm having some problems... The .js files required for the theme that I've put on angular-cli.json are loaded before the HTML, so the script can't find the elements to apply the necessary events to the theme. I need firstly load the HTML, and only after that, load de .js files. Someone could help me, please?
I used to do that on AngularJS by adding a $timeout around ~150ms and then load the functions I need.
Hope it's useful for you.
I am trying to develop a desktop application using Electron. I am also using AngularJS.
The problem I am running into is that when I create a custom directive, and load a templateUrl, the view doesn't load and the console says it doesn't exist. Yes, the path is correct, I am sure of it.
The problem is that the application is already running index.html, so it can't load the second file. Needless to say, I am not experienced enough to solve this problem on my own.
I know that Electron uses node on the backend, so I suppose setting routes and/or setting a path to my static files might resolve the problem, but I don't know how to do it.
I have searched the whole web for a solution, but I couldn't find a clear answer.
One way you could easily do it, is by adding your template as an inline template on the angular side, for example in your index.html:
<script type="text/ng-template" id="temp1.html">
....
</script>
Then you can reference it from your directive, like templateUrl: temp1.html.
Otherwise, you could also use a module bundler. Webpack has a ng-template loader which does that for you. Gulp and Grunt also have equivalents
Another thing to try, if you need to reference paths from the js side, is to use __dirname nodejs variable. Here an example
I am using webpack in my Project, here is the tools:
HTML as - jade-html-loader
CSS as - sass-loader
Project written with AngularJS - all with components & templateUrl (ngTemplate-loader in webpack)
So I got 1 JS file in the end of the process.
All this stuff pretty cool, but I think that it will be good to create static HTML files for clients...
It's going to Improve performance(caching / no need to draw DOM elements throw JS) and it's better for browser - to download few small files, not one big JS...
I am wrong? I can't find good tools that generates static assets(html, css)/cache files.
In the end of the line - I need to find an easy way to require Jade files as templates(templateUrl) into Angular Component, but files needs to be static - so I can see them in "Sources" of the browser...
It is hard to explain - so I hope you can understand me =(.
I been there and what i learned is angular cache template are faster then static. You can also copy static html files to dist map using npm cpy tool but i will highly recommend you to use angular cache template. There is this tool you can use for converting you jade to html.
You don't need to build only one single file you could build one for the vendors and one for your app this will keep your app more clean and you can also make one for the only templates which load in angular from cache on demand. I hope i could explain. webpack come with lot's awesome plugins witch can make life easier! good luck
After week I agree that cache templates works fantastic! =).
I used plugin "webpack.optimize.CommonsChunkPlugin" to generate 2 files for my app:
Vendor - all node_modules/bower_components/libs (js+css).
App - all source of app - controllers/models/business logic/views (js,css(sass),html(jade+ngTemplate for angular)).
My entry looks like:
entry: {
app: './src/app.js',
vendor: [
"angular",
"angular-route",
... and other libs...
],
},
And there I found really cool thing: html-webpack-plugin - this plugin creates index.html file and automatically attaches all your generated JS files.
Add Used "hash" string to my files.
My dist looks like this:
/dist
/index.html
/app.xxxxxxxxx.js
/vendor.xxxxxxxxxx.js
Little magic with webpack.optimize.UglifyJsPlugin to minify all files.
And now I got lightweight, small app that waiting for deploy! =)
If I want to build a large application with ExtJS how am I supposed to use Modularized architecture?
Ex,
/app
/registration
/app
/model
/view
/controller
index.html
/lab
/app
/model
/controller
/view
index.html
index.html
(got it from somehwere :D)
is this the recommended approach?
I need to use MVC architecture too, advice? suggestion?
Simple version of my question :
How to put the code into modules while using MVC with ExtJS
:)
=================================================
updated on 03-29-2012 :D
I'm new to ExtJS, so i'm still having the problem :(
My intension is to put code in to sperate manageble modules
like,
core - for core functionality
radio - separate module, something realted to Radio
tv - separate module, something related to TV
This is what i need
/core
/controller
/(...)
/radio
/controller
/(...)
/(...)
But as Dimitry told, may be this is impossible (current framework)
So....
are we supposed to do something like below?
/controller
/CoreController
/RadioController
/(...)
If this is the case, im sure i will run in to problems very soon :(
Thanks
As a start point, I'd recommend reading over the sencha documentation on using their client side MVC architecture.
The link can be found here: http://www.sencha.com/learn/the-mvc-application-architecture/
The current version of framework does not have a straight forward way to modularize an app.
What people generaly do is initialize secondary controllers when they are needed instead of at strartup by app.js
The key is to call init() method on the secondary controller. That sets up it's listeners.
Here is an example of such solution: https://stackoverflow.com/a/7649658/834424
Edit: this means you only have one app.js not two as in your original question.
There is a symfony 2 project with extjs4 frontend. I started with an extjs bundle which contains now the entire extjs app. The problem is it will be difficult to manage as the project grows.
I think , the best solution would be to relocate all extjs file to the related bundle
(e.g.: to the UserBundle all forms, panel, grid etc. ) and use a central Extjs bundle to load them.
What is the best practice to organize a project in this manner?
And how to include the js files from another bundle?
Or should I create extjs app to every bundle (I'm not sure it would be wise) ?
I'm not sure this is best practice, but I know this works on ExtJs 4.0.7.
So for example I have the following folder structure:
proj
index.htm
proj
app.js
app
view
SimpleIFrame.js
So in app.js I have the following code:
Ext.Loader.setConfig(
{
enabled: true
});
Ext.Loader.setPath('proj.view', './proj/app/view');
Ext.Loader.require([
'proj.view.SimpleIFrame'
])
In SimpleIFrame I have the following code:
Ext.define('proj.view.SimpleIFrame', {
extend: 'Ext.Panel',
alias: 'widget.simpleiframe',
...
});
So then later in app.js I can do the following:
var panel = Ext.create('adminClaiming.view.SimpleIFrame', {
title: 'Hello',
...
});
That allows me to separate the whole app.js into separate files. Up until I figured this out I kept getting the dreaded:
Uncaught TypeError: object is not a function
Which just meant that I'd forgotten to call Ext.Loader.setPath.
Now don't quote me on this next bit, but it seems that if you remove the Ext.require then SimpleIFrame.js is loaded in the global namespace, which is not really what you want, but it's still loaded, and it does work, which is more important.
Hope that helps. And mind you I will be most likely all be wrong ;), and had just gotten lucky in my case; what can I do, I'm still a n00b.
You could make separates bundles with your JS files inside Resources/public/js of each of them.
Then, on your main html template you could include all your JS Files using assetic.