how can add i18n in js for internationalization - internationalization

I have a control with jquery, when I do the one respecting the internationalization it considers it as a chain and do not do the translation, I think the way by which one declares the internationalization in js and differenet of html
this is my code js:
$("#borne").attr("placeholder", "{{ 'key.borne.vide' | localize }}");
Any idea please!!!

It seems you're using W20-framework for the front of your application. If so, a localize function is provided out-of-the-box by this framework (in angular CultureService).
This function should able you to translate your messages in the GUI. Be sure to add a dependency on 'CultureService' in your angular module / controler.

Related

Use Nativescript Core plugin in Nativescript Angular project

I am using in my Nativescript Angular app the nativescript-google-maps-sdk plugin which works great.
My issue is that I want to use cached images to display in a custom InfoWindow. For this purpose I am using the nativescript-web-image-cache plugin app-wide. When I use the regular <WebImage> tag in the infoWindow it complains that it is not a registered component:
Module 'ui/web-image' not found for element 'WebImage'
Everywhere else in the app it works just fine. In this issue is it suggested that:
that InfoWindowTemplate content is parsed as Vanilla NativeScript XML, not as Angular XML thus it is not able to find custom Angular Component you created
So the question is how can I still use this plugin? Is there a way I can somehow register the <WebImage> component so it will work in the custom InfoWindow?
Just to make sure there is not another issue, I added the nativescript-web-image-cache plugin to the plain NativesScript nativescript-google-maps-sdk demo project and then the <WebImage> tag works just fine.
Any pointers are highly appreciated!
Anything registered in Angular is not available in Core the same way; so if you have to create a core template; you must also pass in the xmlns:blah="ns-blah" as part of the core template, so that it is registered properly in that core template. The angular registerElement does not do anything for Core. Now you can easily do <IC:WebImage xmlns:IC="nativescript-web-image-cache" ...> and then it is valid in the template. However, I would recommend you put the xmlns:IC on the topmost element you can; as it makes reading the code a lot simpler. But in cases you don't have a parent wrapping element around the item, this is valid code to register it on the same element using it.
NS-Core templates are different than NS-Angular templates; if you attempt to use things that work in Angular like <IC:WebImage [param]="value" (param)="value"/> both the [param] and (param) will totally break template parsing in core. NS-Core's parser is like HTML, nothing is supposed to surround the param and the value should be in quotes. The value can have {{ boundvalue }} to bind a dynamic value into the template.
Normally when passing a NS-Core template into whatever function you need; you want to pass in just the minimal parts; you rarely need to use things like <Page>, <Frame> or any other top level elements. In fact this can cause problems. You normally need just the piece of the layout you are going to have it view. So in this case <StackLayout xmlns:IC=...><IC:WebImage...></StackLayout>
Finally when troubleshooting using Core features in Angular; I highly recommend you put fixed Width/Height and Background colors on each element. This can sometimes show you what is failing.
As InfoWindowTemplate content is parsed as Vanilla NativeScript XML, you could add xmlns:IC="nativescript-web-image-cache" to the root / parent element of your component. Also use <IC:WebImage> instead of WebImage.

Angular 7 i18n translation inside service, component and without template

I am trying to migrate from ngx-translate to Angular i18n approach and wanted to make sure a few points before migration.
Is it possible to translate inside the service and component without any template? In ngx-translate it was possible using translate pipe.
Is there any approach which angular has introduced for V7 or planning to introduce in v8 for translating inside component and service level?
Is this currently only possible using workaround and there is no angular way to do it? If yes, shall i go with angular i18n approach OR better to continue with ng-tranlate package?
Thanks in advance!
You can find the corresponding gitlab issue here. There is still no milestone set to it, so I guess it will take some more time for this feature to be implemented.
For those who are looking for a possible workaround to get translations inside Angular 7- components: I personally use the following workaround, which you also can find together with some other proposals in the gitlab issue:
Create hidden elements in the template
<span style="display: none;" #trans-foo i18n>foo</span>
Bind them using
#ViewChild('trans-foo') transFoo : ElementRef;
Then retrieve the translated value
transFoo.nativeElement.textContent

Symfony and AngularJS for Ajax: Angular-ify Symfony or Symfony-ify Angular?

When it comes to Ajax, it looks like Symfony (v. 2.7) and AngularJS (v. 1.4) don't go well together ;-)
I see two ways to make them cooperate - my question is: Which one is better?
Adapt AngularJS to be compatible with Symfony
Adapt Symfony to be compatible with AngularJS
For 1, this is the best instruction I found:
http://harmssite.com/2014/09/mixing-angular-and-symfony/
Advantage: Can use $form->handleRequest($request); in Symfony to get all form fields at once.
Disadvantage: Cannot set default value's for <input>'s, cause AngularJS overwrites them. Solution:
Set it in Angular's controller (i.e. in app.js). But if the value comes from the database (i.e. Symfony), how can you get it into app.js? Render the entire app.js file through Symfony's templating system? => Looks like overkill to me.
Set it inside the HTML/twig file with ng-init, as shown here:
AngularJS - Value attribute on an input text box is ignored when there is a ng-model used?
=> This is more a workaround than a solution ;-)
For 2, the major disadvantage is that you need to read each form field separately into Symfony, using $post = $this->getRequest()->getContent(); as shown here:
AngularsJS POST JSON data to Symfony2
I haven't tried this approach, so I don't know if there are further problems down the way ;-)
After fiddling around with this for a while, I finally came to a solution: Kick out AngularJS completely!
As far as I understand it now, AngularJS is only the way to go, if you are processing your forms completely (or at least mainly) on the client-side. I guess, that's what they mean by "Single Page Application (SPA)".
If you're using Symfony for form processing, AngularJS probably makes your life harder, not easier.
I'm now using plain jQuery for JavaScript, and everything works like a charm (including Ajax), much more hassle-free than AngularJS was.
If you just need to handle AJAX Requests from AngularJS to Symfony2 server, using classic forms (without Symfony2 form builder), you can use this bundle :
qandidate/symfony-json-request-transformer
Add it as a dependency in your composer.json and handle your requests (POST & other methods) in the same way as classic request.
You can See my post about this problem : Handling HTTP Requests from AngularJS to Symfony2
Other tip, to use AngularJS in your twig templates, add this in your angular app :
var app = angular.module('yourApp', [],
function($interpolateProvider){
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
This will change your start symbol from {{ to <% and your end symbol from }} to %>
In my case, use AngularJS make my work easier and me more productive, especially coupled to a Symfony back-end, but it's very personal, and depending on why/how angular is used.

What ajax framework can i use for organize my javascript code in a single page application entirely server side rendering?

My website is an ajax single page application with serverside rendering. What are some javascript framework i can use for made a better organization of my javascript code?
BreezeJS you can use for rich data centric apps, which can be used with knockout or angularJS.
I prefer u to use HotTowel SPA template and take a look on this link
http://www.johnpapa.net/spa/
And before asking any questions You should be clear for what you need and why u need. So take your time and look around you will get.
You can look into breezeJS which is used to build rich Data-Centric application, for DOM manipulation you can use some JQueryUI or KendoUI, for dynamic Data bindings which will allow you to change the content of your Views you can prefer Knockout or Angular. Using AngularJS will be much appreciated as it provides rich AngularUI which helps you to change your view to manipulate DOM. Based on type of application you want to develop, you can select from the above suggestions.

Share templates between Laravel and JavaScript

How do I share template information between my PHP backend and JavaScript / AJAX requests?
Times ago I just sent my AJAX requests and had the HTML generated by the server and sent as such. Today I have my AJAX data as JSON but I have no idea how to use the same template (e.g. a users list) at the server side and (for refreshing, filtering etc.) at client side without creating redundant layout code.
Is there a template language with parsers as well for PHP/Laravel and JavaScript?
The Laravel template engine Blade is obviously not usable in JavaScript.
The only sharing template language I found via Google was Mustache, but the parser for Laravel was outdated.
Is there anything else out there and which approach do you use for that?
Your boiled down question:
Is there a template language with parsers as well for PHP/Laravel and
JavaScript?
Laravel and Mustache | server side:
conarwelsh/mustache-l4 is a Mustache.php wrapper for Laravel 4. They seems to keep up very well as opposed to what you tell (I presume you mean michaelenger/mustacheview which is actually a Laravel 3 bundle). I stand corrected if am wrong.
Laravel's Blade doesn't rule out Mustache at all. You just have to create a Mustache partial without using blade.php extension and include it within a regular Blade template using #include (More details here)
Serving Mustache template:
You can even coin any custom Response you need using Response Macros such Response::mustache(...) leveraging Response::make(...) (see here for more details).
Some samples of interest:
Combining Laravel 4 and Backbone.
Sharing Templates Between PHP and JavaScript | PHP but still relevant!
My short answer (Updated):
Don't look elsewhere: Laravel + Mustache + Javascript if a mix of server|client side rendering is part of your requirements.
Get your hands dirty! :)
I had the same issue with Laravel and Angularjs, what I did is that I created a route to return templates http://domain.com/templates/name
This route will View::make('templates'.$name);, this is an AngularJs template that will be filled with data returned by JSON API. Remember to use non conflicting tags I used {{ for Laravel and <% for Angular.
RENDER YOUR TEMPLATE SERVER SIDE! I'm not sure at what point someone decided you needed to send JSON to the front end, but that's not how they do it in Rails. In Rails, they actually render the template server side, then send it back to the front end and your JS appends it to the page (or, actually sends back the JS + the markup to attach). This saves a ton of time and headache, trust me.

Resources