I'm thinking of moving my site to angularjs, and I want to start very small, by moving all my static server-side plain-text templating from django to angular (otherwise there will be syntax trouble with the '{{}}').
It seems that the best way to do that will be one of two options:
To have an ajax call that returns a JSON with all the texts of my site. The texts will be stored in a variable which is binded to my HTML elements so angular will update everything.
To store a static js file with the dictionary and include it in my HTML and bind the dictionary with angularjs.
Both options will allow me to switch between languages without reloading the page.
Which one is better? In general, is this a good approach or is there a more correct way?
I tried out a few different options, including Angular Translate, but I liked Angular-gettext the best so far.
One thing that helped tremendously is that there's a working demo for it where they i18n TodoMVC, called angular-gettext-example.
The workflow is simple:
Add the "translate" directive to your templates
Run grunt to extract .pot template(s)
Hand off the .pot to your translation vendor or DIY with POEdit or similar software
Drop the .po translation files back into your project
Run grunt to compile the .po files
Set the default language in your scope
Watch the magic!
I'm sure the other solutions posted here are good as well but I haven't seen an end-to-end example so nicely organized as angular-gettext-example.
Cheers,
JD
First of all, there is a way to change angular's delimiters to other symbols as answered here: Angular JS custom delimiter
The 2. option is easier. You include it once and you have all translations on page load. No async calls, no promises, nice and easy.
And yet i'd go with the first one. Services like $translate would really make your life easier following option 1. Plus it has many options for loading and storing loaded data in LocalStorage and cookies, so there's plenty of space for extension and customization. You can then translate your content with $translate service, directive or filter.
And don't forget that 2 option disables any options of cached requests. On each request to your start page the server has to read static file and include it in the html. With first option the user's browser can cache .json for as long as you like.
AngularJS supports il8n/L10n for currency, date and numbers filters only. According to this book:
(sorry for the low quality! cell phone camera)
I would say follow the first approach and load the translation dynamically. It would involve a lot of work but there's no other way around
Have a look at angular-translate :)
It solves both scenarios!
Related
I'm using ui-router/stateProvider to load various views for a single page app. Additionally I'm following what appears to be best practice for structuring code by breaking my code into components so I have, for example;
Index.html
\Components
\Component1
\page1.html
\page1.css
\page1-controllers.js
\page1-directives.js
\Component2
\page2.html
\page2.css
\page2-controllers.js
\page2-directives.js
I have quite a few different views/components (10+) and my question really relates to how to manage the loading of the js files (and the CSS files for that matter). I can put the JS files all in tags in the index.html file and all works fine, but looks a bit messy as it is a very long list.
So my question is: How should I manage the inclusion of the various scripts for each view; should they all remain in the index.html file or is there a better way of managing them, such as loading only when each view is called via the ui-router?
Many Thanks
I think that you need to use RequireJs, I will include a couple of sites with the documentation that explain how implement that.
http://www.javascripthtml.com/load-dynamically-javascript-file-in-angularjs-with-requirejs/
https://cdnjs.com/libraries/backbone.js/tutorials/organizing-backbone-using-modules
For css you may want to add a single class to each view then use a single css file for all views. I keep the css organized into modules for easy access. This will also help load times as it will require less requests.
For js I would create a universal js file that contains any code that is required for ALL views, then create individual js files for individual views. There really isn't a "right" way per se but preferred ways depending on the developers you work with. Keep it simple and easy for other developers to read. :)
I have the same problem as you, I think that the only solution for us is to add the script in the "index.hmtl" page.
I have been thinking implementing translation for my app and I have the following idea
Make the English and My language [Amharic] mirror jsons and render English if selected. Just configuration Json file from the server that gets called once app routed
Make all in one API to get the json once and persist
will it be a good idea,How is this implemented on real world
Don't need to implement it yourself. angular-translate is an excellent module, here you can take a look at it: https://angular-translate.github.io/ .It covers everything you need.
It is plenty of features and some of them are:
Flexibility
Pluralization
Directive
Filter
Service
Asynchronous loading
Keep in mind that this module has been there for a long time and many people use it. You can solve everything you need and there is no need to reinvent the wheel.
I'm working on an AngularJS project that will have considerable traffic.
While in development I'm stumbled upon the issue with partials cached and not updated on different actions. Sure, I can get rid of this using .run with $templateCache.removeAll(); for example,
but want to make sure this is actually a good idea.
Some partials are updated dynamically (user input, or automatically in intervals), while some are static or updated very infrequently.
What would be the best approach to caching in this case?
With non-angular sites I prefer to keep responsibilities cleanly split, for ex.:
1. Cache-headers are set on app level
2. nginx - just to serve sites per se
3. Varnish doing FPC + CDN for static assets or CDN doing full page caching (depending on a client/project, etc.) etc. etc. etc.
Key point: every part has its own distinct responsibility.
With this project I can use Varnish and CDN for static assets,
multi-server setup. Possibility to re-use Varnish for loadbalancing as well, i.e. I may have Varnish above several web-nodes. I have some flexibility in terms of infrastructure.
Please share your thoughts on the optimal setup?
In particular: is it still worth caching partials?
If yes, what would be the best place to set CC headers?
What would be the best way to flush their cache then, esp. if I need to flush only some sub-selection?
Thank you!!
D.
Posting the answer myself, as cannot select rob's reply as an answer. My solution is based on his suggestion which helped me a lot to move forward:
During the production build:
I'm using "gulp-rev-easy" gulp module for revving the previously
concatenated and uglified css & js files.
However, no existing revving modules could provide me with functionality I needed: replacing specific strings in an index.html template file with my own paths to CDN both for CSS and JS scripts. So I had to add my own function/override reveasy a little.
As per rob's I've started using templatecache and its works great in conjunction with revving.
Images are just going through a S3 -> CDN pair.
Some quick notes:
Using revving for "breaking" cache turned out to be the fastest and
easiest way to deal with caching, as CloudFront is taking approx. 20
minutes to invalidate a path, other CDNs - less, but you still have
to issue the request etc.
For dynamically updated images having same names, like avatar images
that a user can update via his profile areas, I suggest adding a
timestamp or some random string to the file name. While adding a
random URL path sounds easier, you won't be able to cache this.
Hope this helps,
Dennis
I saw a similar question on the Google groups and also here on Stackoverflow. Both times the question was not answered. The code in this file doesn't make it very clear about what exactly it does and how it is used. Also it's not clear from the Angular documentation.
Can someone explain how this is used. Also can this be used along with Require.js?
Angular loader allows your angular scripts to be loaded in any order.
As angular-seed project shows us, Angular loader does not have any specific api, you just put it at the top of your index file (so that it's executed first) and then proceed to load your application files anyway you prefer.
But, the most important thing for your use case is that you don't really need angular loader at all. RequireJS also allows your files to be loaded in any order, but it also provides you with many other features that angular loader just isn't made for.
So, yes, you may use it with RequireJS, but you don't need to, because it becomes redundant.
Angular modules solve the problem of removing global state from the application and provide a way of configuring the injector. As opposed to AMD or require.js modules, Angular modules don't try to solve the problem of script load ordering or lazy script fetching. These goals are orthogonal and both module systems can live side by side and fulfil their goals.
http://docs.angularjs.org/tutorial/step_07#anoteaboutdiinjectorandproviders
It allows for you asynchronously load files when bootstrapping your angular application. A good example is the angular-seed project that has an index-async.html file that does this.
index-async.html
This is useful for using other libraries that load in modules asynchronously.
See angular-async-loader:
https://github.com/subchen/angular-async-loader/
To async load following components:
List item
controller
services
filter
directive
value
constant
provider
decorator
I made a simple app using backbone.js and require.js. Earlier i used to have just one index.html file and used to dynamically render/hide different views. Now with require.js, i still have index.html file but i have created separate html files for each of my four views in the app, and i put them all in templates folder. Main point is, these four html files don't have the <!DOCTYPE html></html> tags, just the <div> tags for the view.
I'm not sure this is the right way to do it using require.js. Should i integrate all html code into just one index.html and using <script> tags for templating?
You shouldn't put your templates into one big html file, require.js and Backbone.js are the perfect combination to have everything in highly flexible modules, loaded only when neccessary.
With only a few modules you may not notice their advantages, but trust me, if you write more complex, dynamically growing high speed web applications, you save yourself hours of debugging and refactoring, and your code will be very simple to read and modify.
You have several ways to handle templates with Backbone, e.x. this.$el.html( _.template(template, this.model.toJSON() )) if you loaded your template into a template variable.
It won't affect speed, templates are only a few kilobytes. Comparing to the fact that your page is likely to already load a dozen files(many icons, a few images, css-es, js-es) even without BB.js or Require.js and modules, a new few-kilobyte-big file will not be noticable. Also, you can cache templates after first load if you use Require.js to load them.
Depends...
Mostly I would separate them because it fells more organized and easier to maintain, but... if you have too many of them (lets call them "Tiles") it can make your site slow because you will be doing several server trips to draw the site, I've read somewhere that when the browser have to make more than 4 request HTTP at the same time you will be punished for it with a slower performance, I will try to find the source and post here.
If your tiles are always together, I think putting everything in a single HTML with is ok, so you can fetch all of them with a single HTTP request, but the down side is that when you update a single template the client side cache of all templates goes to hell.
Another solution is to have them in separate files so they are more organized and using a build tool you create a big minified template file that you use on production, but that will require some work.
So you got to find the best way for your site.
P.S:Are you using a templating mechanism ? I find them really helpful in this situations.