I inherited an app that uses backbone.js and require.js. I wanted to cache CSS, Images and JS files on the browser for infinite time and did not want to cache HTML. So, when I have any changes to the CSS or JS or images I can update the query parameter in the HTML and the browser would fetch the latest version of the asset.
Our app is on Glassfish 3.1.2 so I could not use mod_headers like in Apache to control the behavior. What I ended up doing was add a filter and add Cache-control response header to all css, js and images. This works for css and images fine but all those models and collections that are a result of using backbone.js are not being updated. Well, I could not figure out how to erase them from the cache if I have an updated version on the server.
Any pointers on this issue would help me figure this out.
Thanks.
You should use bust ( look here ), so when you have a new version, just update it's version in bust, something like this in production.
urlArgs: "bust=" + v2
and all older js stuff will be fetched again.
Cheers !
Related
I have recently put an admin-on-rest app into production and it works great. However, when I update the app, the updated files within my project src directory are cached. For example I made a change to the restClient.js file, but this only gets loaded after users do a CTRL+F5 in the app.
What is the recommended way to handle this? Can I somehow add a cachebust to the files? Or should I simply set expires in the index.html file head section?
Ps. this questions is maybe more related to React apps in general then admin-on-rest..
Ok so I have looked around and cannot find the exact answer I am looking for. When developing a Sails app (which I am new to) it appears that by default it creates its own frontend using EJS.
Is this correct?
If this is correct then why is there an npm for sails generate frontend
If I want to use an Angular frontend is sails-generate-frontend-angular the best route to go?
Thanks!
First you need to separate server templating (EJS) from angular.
Just because sails defaults to an EJS template engine does not mean that you can not still put angular is your asset library and create and angular app. EJS is (the default but not the only option) what sails uses as a programming language for building its templates on the server that then get delivered to the client. Angular templates are used once delivered to the client to display information and perform tasks specifically already in the client machine.
1.) See above
2.) Sails-generate-frontend helps to setup your asset pipeline. It creates grunt tasks to copy image files and setup your javascript libraries such as ANGULAR.js, jQuery ect for use in your front-end.
3.) It could be. It depends, what a lot of people do is setup 2 projects. They use Sails as their API and then setup a second project for their Angular app (especially if its a SPA).
If instead your just using angular is specific places in your app (think jQuery style), then you would use a something like generate-front-end to take the angular library from someplace (like bower_compenents) and place it in your assets when you lift your app. It also makes it avaiable so that it can be placed in your html to be included in your app.
I on the other hand, use sails templates (I use Jade instead of EJS) to create and modify my angular templates on the server before they reach the client. This is a slightly advanced practice and can get confusing if you don't understand the difference between generating html on the server vs client.
An alternate method of thinking about this would be creating your index page on the server. This page would include your css and scripts. It would possibly be the only page on your server and everything else would be angular templates rendered on the client asking for JSON calls. In this scenario you would be using SAILS (ejs, or jade or whatever) to render only a single page INDEX.js and that might be the only server template you have.
However, this being said. Sails ships with this stuff already. You don't need sails-generate-frontend. Its is already inside a standard sails app.
This isn't a problem question, but a theory/possibility question. I have made a polymer portfolio site with a list of image links that points to a html page in my file directory for example /projects/test.html. The problem that I have is that every time I click on the link it loads the new page because I have it as a separate html.
I read AngularJS can provide partial view. So if I can combine angular, I can keep my website header and just load the content of the links into the partial view.
I was wondering if this is doable, and do I have to fully install angular and change the file structure or can I just import AngularJS file and code from there?
Also AngularJS does provide routing which I will love as it make my url cleaner.I am just asking so I don't have to waste time if this attempt will not work.
Yes, all of this is easily achievable with Angular; you will not need to modify Angular. A couple things to get you going. This won't make sense right now but come back once you've dug in a little.
For prettier urls set $locationProvider.html5Mode(true);
You will want your server to serve all 404s for text/html requests to return your Angular application (probably /index.html on your server). This is so that if someone goes to https://mycoolsite.com/projects/neato (which exists in your Angular app, but NOT on the server) your Angular application will load and the router will display the correct route.
I have an ASP.net application which uses AngularJs, Javascript, HTML5.
The problem is everytime I deploy the browser may cache some files which results in errors because the user is not getting the latest Html and javascript files.
I understand HTML5 has a manifest file which can force files to download but is there a more efficient way to download the file when the file has actually changed?
I understand bundles only do this for Javascript files not HTML files?
I am not sure if it is angularjs related as a number of these HTML files are swapped out using ng-views and templates.
Any clues would be appreciated.
I am trying to make use of bundles but not sure if this applies to html files using AngularJs
Thanks
in general, to control included web resources js/css/... cache behavior, i would suggest to manage some type of version id and append it to your including element.
for example:
<script src=".../.../app.js?<version id>" />
or
<script src=".../.../app/<version id>.js" />
or even
<script src=".../<version id>/.../app.js" />
once you deployed your new application, the browser will ignore the previews cached files and use the newer files
in case are using a source control (git/svn/...), you can use the latest commit id as the version id. otherwise, manage this version id manually (incremental number).
in case are using a build server, you can add a rule to your build script that automates this procedure for you.
Updated answer
I am not sure if it is angularjs related as a number of these HTML
files are swapped out using ng-views and templates.
Bundling reduces the number of requests to the server. For AngularJS you could use a technique at build time to inline the templates with javascript. This is a plugin for a Grunt based build system.
Grunt AngularJS Template Inlining
Now you can use bundles for JS.
Other options are around browser caching and not even worry about bundling the templates.
Grunt based builds have a good cache busting mechanism. Described further down.
I would advise you to look at caching options and some important points below. The caching options are set at the web server level.
Rule of thumb
Never cache the first page (index.html) or cache with if-modified headers.
Cache every resource that is resolved from the main page.
For the referenced resources
Use Grunt based build and a plugin https://www.npmjs.org/package/grunt-cache-bust
The way this plugins works is that it will calculate the HASH of each resources referenced in the HTML and renames the file with the file.HASH making sure its references are also updated.
It is also smart enough to ignore CDN based remote URLs.
You can't do anything from the server if the client does not even send you the request.
HTML5 Cache Manifest does not work on all browsers (IE<=9 :()
you can configure web.config to disable caching in asp.net application
<system.webServer>
<staticContent>
<clientCache cacheControlMode="DisableCache" />
</staticContent>
</system.webServer>
No, html files are not bundled in ASP.NET MVC. This can be done with js or css, but html files generally need to be directly addressable via URL.
A simple way to get Angular to load in a new version of the template is to just append a unique query string parameter onto the template URL wherever you use it in Angular:
module.directive('myDirective', function() {
return {
// add querystring with deploy date, or whatever
templateUrl: '/Path/Template.html' + '?noCache=08102014',
controller: controller
};
});
Of course, a cleaner, more maintainable solution would be to compile your templates to javascript strings, which could then be bundled like any other part of your Angular app. grunt-angular-templates would be one candidate for this approach.
I recently started to digg in to angularjs, and would help me a lot with my new project, but im stucked with the view structure part.
So what i dont really understand is, how to build it up.
Is it okay if i create html angular partials and not creating laravel views, so laravel would only handle the database instert fecth edit delete, and the angular partial views would handle the result show, and forms.
So my buold up would look like this.
My assets folder
/css
/img
/js
/lib
/partials
/home
index.html
/users
users.html
details.html
And creating restful controllers for them what handlets listed above
Or if someone could show my a basic exaple about this, just the controller and view part, how to build up a singple page with showing result, and one with grabing by id i would really be grateful.
Thank you
When starting a Laravel & AngularJS project you are in charge of the backend and frontend. Basically you have 3 options.
Keep the entire app in the same folder, and the angularjs stuff in the public folder.
Keep the entire app in the same folder and AngularJS views in the laravel view folder.
Separate your backend and frontend completely.
The first & second option are the simplest, and its OK if you have a small/medium sized application. In this case just keep all the AngularJS files in the public folder, or if you choose to mix them with laravel views just drop the .blade extension (or change the laravel blade/angularjs template syntax)
I see its best to keep the backend as restful as possible when doing a SPA app, the point is to push the logic to the browser, this means your app can become a mess if you mix php with js too much.
The folder structure is totally up to you, and it does not matter what option you choose. But a good start is separating you app into a logical parts.
/app
application.js
/partials
user.html
login.html
etc.html
/vendor
Angular.js
Lodash.js
Etc.js
/controllers
User.js
Etc.js
/directives
Charts.js
Etc.js
/filters
Custom.js
Etc.js
/services
Backend.js
Etc.js
You can also check this for a good angularjs styleguide.
The above is a basic folder structure, just customize it as you see best. If you have a small app, you could drop the folders and just have a controllers.js directives.js and services.js (etc)and keep all your javascript in the same file. This is totally up to you. Separate when the application grows, and always refactor.
If you choose the third option you will have to customize the backend a bit. This might be the hardest option, but it also gives you great flexibility. Basically you could drop laravel all together, and build the backend in node.js, or use laravel as a backend for another SPA app written in Ember.js without making any changes in the code. Note if you are choosing this option you cannot make use of some laravel stuff, like the blade templating. You will also have to setup your laravel app for CORS, and note, there can be some more coding when it comes to security, like CSRF tokens and such.
When going to production with you app you can use a build tool to min & concat you frontend app into one file. Checkout ng-min for minification.
This is one of the project I am working on. You can see the way how I have partial views in angular js. As suggested above, there is no need putting your view files in public folder.
https://github.com/naveensky/wm-demo-tracker