I am trying to cache my angularjs application's html files, following this suggestion: https://gist.github.com/ProLoser/6181026.
I am appending a dynamic cache key like ?v=123456790 to all html files (except those in the templates directory used by angular ui bootstrap).
For partials in their own files, i.e. app/views/customer/customer-history.html this works perfectly. However, for partials in script form, e.g. <script type='text/ng-template' id='customer-history'> the template is not found and a server request is made, resulting in a 404.
E.g. localhost:8080/customer-history/?v=1234567890
I can see the templates in question are in the $templateCache. The ones using ng-template are just the name ie customer-history whereas the separate files ones are by path app/views/customer/customer-history.html as you might expect.
It's a large app so going through and moving them all to their own files etc would not be trivial. I've scoured everywhere and I'm not turning anything up so I'm guessing it's something basic with how the templateCache is implemented.
I'm using gulp-templatecache plugin during the build process but the docs are quite limited and I don't think the issue lies there.
My current solution is just to skip the offending templates for now in the function appending the version number by decorating an inCache function onto the $templateCache factory and using it during the check to append the cacheKey. But I feel this is kind of missing the point.
Answering my own question here.
Because the script tags are part of the containing html file that gets loaded into the $templateCache, the script is already there. When a request is made for the templateUrl, it shouldn't have the cache busting appendix.
The simplest way to avoid all this is to just set the cache busting hash or string on the "templates.js", or whatever the template output of the build process is. That way the entire file gets invalidated and reloaded as needed.
Related
I am working on a project that uses Angular1, we hit the problem where when we change an html template the users will not see the change until a hard refresh is performed. Ideal would be to have the cache service to check a timestamp and invalidate the cached file. As an example now I edited a template used by the $stateProvider.
My questions is what solutions or best practices are used to solve the problem?
P.S since our JS files are combined in 1 file we fixed the problem there by appending a timestamp in the script tag from our PHP backend
Interesting question! We've had the same issue in a project that uses Angular1.x. We solved it using angular-cache-buster.
It basically helps you put a httpInterceptor. All you need is have ngCacheBuster in module dependency injection, and inject httpRequestInterceptorCacheBusterProvider in the .config of your app to set the match list.
For example,
httpRequestInterceptorCacheBusterProvider.setMatchlist([/.*api.*/], true);
this tells it to cache everything except REST api requests. You can learn more about the configuration here.
I am writting an app from scratch in Angular with node.js and I was wondering if I am doing things correctly.
I want to split the content of my index into smaller html modules with their respective controllers, this way, everything will look more structured and easy to find when the project gets bigger.
For example :
index.html <--- main file
/views/menu.html <--- menu module
/views/content.html
/js/menu.js <---controller for the html module
/js/content.js
...
I can manage those files by just adding ng-include :
e.g
< ng-include src=" 'views/menu.html' ">
My concern is that this is like a GET request per file and I was wondering if this would affect the load speed of my application. Because I am working in local, this loads in 2ms which is very quick but I was wondering how this would behave online.
My questions are :
Is this the best way to create a modular app with different html files and js controllers ?
Is there a better way to achieve what I want to do ?
I am still learning Angular, sorry if this is too basic.
Thanks
Its better to use index.html as basic load file which will load all css and js on the load of the app,
for ex:- you can make diffrent app for login and after login section. After login.
load all the js and css files through the app after login..it will improve the loading time and also be a modular
as suggested by #Dhruv Raj Singh It is good to use a different ng-app for pre-login and post-login.
It is always good to structure the code that you want.
Now ng-include
will Emitted event $includeContentRequested every time the ngInclude content is requested.
Now it up to the requirement use cases how to use and when to use.
If
the module is a sperate and special one which requires lots of resources specific to it only and will be used by few users and only few times then it is better to include them for that module only
else common resources should be included at ng-app level.
You can name and organised the resources whatever way you want but include them at post-login app creation.
I just learned how to create custom directives with angular today via codeschool and it is fantastic! The way it taught me was to make a directive in my JS file, link it to an html file, then write the tag accordingly in the index.html file which is my main file.
My question is does creating a whole new html file for a custom directive hurt load times on the main page? If you want a reference to the section I'm in, it is shaping up with angular level 4 (custom directives).
It depends on whether or not you precompile the templates directly into your main.js or not.
If you precompile them, your main.js will take longer to load, but, when rendering the view, angular won't need to send an http request to get the template so rendering will happen faster.
If you don't precompile them, the up front load time will be faster, but rendering the view may be slower the first time because angular needs to send an http request to get the template for the first time. after the first load, it will be cached in the template cache.
You could also use a hybrid solution, precompiling things needed for the main entry to your app, and letting angular request the rest as needed.
which one is better is a debate not suited for stackoverflow.
I am making a mobile, AngularJS, cross-browser, offline spa with angular-route.js using no server at all. I feel changing browser defaults to allow Ajax loading of local files unacceptable for my situation. Ideally I would like an external-to-library code work-around that allows loading files via script-tag src attribute manipulation. But, I am willing to explore modifying or extending an open source library file such as angular-route.js if I knew the best version + file + line to start with.
It seems that you need to use $templateCache, you can specify the templates directly in your html using a <script> tag.
<script type="text/ng-template" id"path/to/template.html">...</script>
Of course you will probably want to have each partial in a separate file, in which case you will have to add a task that will make the partials available to $templateCache. There are plugins that will do this for you, take a look at grunt-ng-template.
I'm an Angular noob coming from Backbone+Marionette+Require.
If you have an app with a bunch of views and a bunch of directives each with their own HTML where are you putting all the HTML snippets? Most of the examples I see are storing them either inline, in their own script tags, or loaded asynchronously. One thing I love about RequireJS is that templates can live in their own files but can be compiled into the main JS file for production. I assume there's a grunt task or something similar? Maybe one that takes HTML from individual files and embeds them into individual script tags in a consolidated HTML file at build time?
Thanks.
There is indeed a Grunt task to do this! Originally created by the Angular-UI Bootstrap team, the html2js task will take your templates and compile them into a JavaScript file (using angular's $templateCache) that can be concatenated with the rest of your scripts to form a single payload.
I haven't released it yet as I am still adding documentation, but take a look at ngBoilerplate, an AngularJS project kickstarter, to see it in context.
Update (28 Feb 2013): I just made a release of ngBoilerplate. You can check out the official site here: http://bit.ly/ngBoilerplate.