How to properly use "x.js" library to format currency? - javascript

Im working on a test site, teaching myself how to use Angular and other web technologies. Please disregard "basic-ness" of the whole site, I've given myself about a year to complete it :).
I need to format currency properly i.e. make it look like $ 280,000.00 (I output the amounts using Angular). Page is HERE.
What I have found so far is this library "accounting.js" but I dont really understand how to make it all work together. The end goal is this:
have a small database (MySQL), with a few products
get/ update data with my web app, using one of the technologies (still unsure if Angular is what I'm looking for; if not I can work with PHP somewhat)
output data to the view using Angular
Should I and how do I use this .js library? I have included it in the page, now I dont understand where should I call the functions from it.
Thanks!

You are using AngularJS, simply use Angular built-in filter currency like:
{{ amount | currency }}
Please check the working demo: http://jsfiddle.net/ayLzxxsc/

Related

Dart wrapper over js library and use it in flutter app

Put it simple I want to make small currency exchange app (pet project- I want free API( 1000 requests per month including more currency is a perfect option)). I dont like the free APIs I have found so far but I have found this website https://bg.coinmill.com/ and I wanna use it for my purpose. Reading an answer to similar question:
The only way to make use of JS in Flutter is using WebView.
Dart compiles to JS only for browser applications, for Flutter it compiles >to native machine code.
convert js code direcly to dart, using package js
package JS doesn't convert JS, it just creates proxies for JS functions to >be able to call them from Dart, but that is also only supported in Dart web >applications.
Put it simple it isn't possible without hitting some compilation errors and some workarounds. However https://github.com/pichillilorenzo/flutter_inappbrowser looks promissing. Embedding the webpage that will look ugly and I won't have any control over ui/settings. My options now are looking for another free currency API or trying to find a workaround. I incline for another API, but not sure which one. Any suggestions ?
So basically what you actually want to do is use that website to do the currency conversion in the background (enter value, press "Convert"), then display the result in your Flutter app? You don't need javascript for that.
After entering pressing the submit button, the site simply redirects you to a different page (GET request) with an URL like this:
https://bg.coinmill.com/CAD_USD.html?CAD=22
Use dart's http library to perform the same request with the right currency/value parameters. The result of the request contains the source code of the web page.
Instead of displaying the web page, you just need to read the value you need from the source code of the web page:
<div id="currencyBox1">
<input class="currencyField" ... value="16.46" ...>
САЩ долар (USD)
</div>
So, how I understand your question, you have some js library, and you want to use it from Dart?
If question so, yes, you can do it using Dart JS Intertop. The more information in the link.
Edit
Yes, you are right, you can call js from Flutter only using evalJavascript function from flutter_webview_plugin.
You can use Firebase Cloud Functions and wrap your function in a callable function. You'll have all node js environment and Dart code will only call a function.

Execute <script> tags binded via ng-bind-html in AngularJS

I've searched and searched for a good answer to this and - I promise - and I know there a lot of answers out there that are similar.
I've read this: In AngularJS, any inline javascript code that included in HTML templates doesn't work
I've tried creating a directive that listens for the div to update and $compiles it again - something like this: http://www.bennadel.com/blog/2745-creating-custom-script-tag-directives-in-angularjs.htm
However, nothing I've found answers exactly what I need. Basically, I created a news site at work and the story pages are populated by producers via a Drupal install, that populates a Redis DB which powers our site via a REST API.
Then content of these pages is populated like so:
<div class="topExtraHtml" ng-bind-html="extras.html.top"></div>
From time to time the producers like to add embeds in stories that require external js, so the extras.html.top could potentially be something to the effect of:
<script src="http://outsidesource.com/embedcode.js"></script>
<div id="the-js-will-populate-me"></div>
Is it even possible to get this to work? I'm totally stumped.
If you are trying to embed javascript in real time, currently Angular 1.0 doesn't handle it. Angular 2.0 would be able to handle injection of scripts etc. One way to get around this is either use RequireJS or Browerserify. Would it be possible for the producers to put an entry into a JS file, (separate to the HTML)?

build html snippets with JSON data and inject the snippets into the DOM

I'm building a single page app similar to pininterest where I fetch JSON data in increments of 20. My project does not support Angularjs, backbone mustache or any such framework or libraries.
I need help in identifying a solution for my problems listed below:
I want to decouple my html for the tiles (with images and without) as templates.
On receiving the JSON data first 20 items, I want to build the tiles and inject it inside my main index.html
How do I make calls to get JSON data starting from 21-40 and 40-60. The JSON data has numbering property called rank:1, rank:2 etc..
I'm looking for a front-end solution with Javascript or jQuery.
You are describing what I do with my SPA applications. I implement a very similar feature on my blog's home view, http://love2dev.com. I don't do paging for new tiles though.
You are correct, you do not need any bulky framework to execute what you need. As for templating I use either MUSTACHE or something based on this article, http://tech.pro/tutorial/1743/javascript-template-engine-in-just-20-lines. I actually use the 20 line function in my Blog. In my new SPA book I use MUSTACHE, it is up to you.
To call the next 20 records you would need to configure your API to allow you to retrieve a paged dataset. This can be done with a querystring parameter, or a route variable. It is up to you. Normally you have a parameter for page # and total records. If you need help with the actual AJAX layer I would look at rolling your own or using reqwest, https://github.com/ded/reqwest?source=cc.

Implement Autosuggest/Typeahead in Custom UI built on AngularJS

I am trying to build a typeahead/suggestion feature similar to the one developed using App Builder.
My XQuery is:
xquery version "1.0-ml";
import module namespace search = "http://marklogic.com/appservices/search"
at "/MarkLogic/appservices/search/search.xqy";
let $options :=
<options xmlns="http://marklogic.com/appservices/search">
<additional-query>{cts:and-query((cts:collection-query("NY"),cts:element-value-query(xs:QName("Office"),"47","exact"),cts:element-value-query(xs:QName("Person"),"15","exact")))}
</additional-query>
<constraint name="Search_Element">
<range collation="http://marklogic.com/collation/"
type="xs:string" >
<element name="Account"/>
</range>
</constraint>
<suggestion-source ref="Search_Element">
<range collation="http://marklogic.com/collation/"
type="xs:string" facet="true" >
<element name="NUM_ACCT"/>
</range>
</suggestion-source>
</options>
return
search:suggest("Search_Element:103", $options)
This returns the desired suggestions.
But, now when i wish to integrate this in UI, I am unable to understand how it could be implemented.
REST API doesnt seem to be rich enough for above query as its does key/value, element value search etc.I want to implement typehead for instance,for account element in NY collection,for a particular office-person element values as in the above XQUERY
The App Builder uses extsuggest extension, but i could not get much information on this.
I have a text box, which on typeahead, will query marklogic server via REST or JSON/XML wayaround whichever can be implemented and display the results.
I am currently trying to use AngularJS typeahead feature as given here.
Please Advise !!!
From the looks of it, the extsuggest extension is just a convenience wrapper around search:suggest, mainly to easily get hold of the search options of an App Builder app, and returning any results as JSON.
Otherwise I am a little confused by your question. You say the above code gives the correct suggestions, but the second paragraph below the code seems to indicate it doesn't?
Or is your problem that you have correct suggestions, but don't know how to visualize them in the UI?
HTH!
To your first point about the REST API, you put the XQuery code above in a REST extension, as described here. If you call it "suggest", you'll end up accessing it at /v1/resources/suggest.
I'm not clear on your overall architecture, but you mentioned AngularJS and XCC for Java, so I'm guessing you have something like Tomcat serving up the UI and implementing business logic, with Java using XCC to talk to MarkLogic to get data. (An aside: since you're using the REST API, you might want to go with the MarkLogic Java API, which sits on top of the REST API.)
From the AngularJS side, the typeahead is going to need to work with a service that sends what has been typed so far back to your Java server, which will forward the request onto the MarkLogic endpoint. I found another StackOverflow question that shows how to set up the directive to send the request to a server.
The REST API in V7 has suggestions built in. You can access that directly.
http://docs.marklogic.com/REST/GET/v1/suggest
One of the things I've not yet covered in my MLJS JavaScript wrapper for MarkLogic[1] is auto suggest for the text search query bar widget. I have built this for the semantic (SPARQL) query bar widget though. If you're writing in JavaScript, MLJS has all the hard work done for you. Easy to plug in new rest functions of your own using the mljs core API's do() function. There's also a search widget API too.
[1] https://github.com/adamfowleruk/mljs/blob/master/README.md

symfony2 + javascript framework

My quick question is, should I begin using a javascript framework at the same time that I build my project with symfony or can I do it later without major troubles?
I have a small project of one page app written in flat PHP and jquery. Now I'm trying to port my project to symfony and I would like to use a javascript framework too. After one month of learning symfony I think that I begin to understand how it works, but I have a mess in my head with all those javascript frameworks available.
I think that is better to focus all my attention to symfony and once I fully understand how it works try to use a framework for javascript.
But I'm afraid of using a javascript framework implies changing a lot of my symfony code and twig templates. Right now, I'm using repositories and services to get data for the controller and then return it to javascript in JSON format. I understand that this shouldn't change (at least the part where I get the data) but I read some articles of people using bundles like FOSRestBundle and JMSSerializerBundle to return the data and using templates from javascript like mustache to render it, so I'm a little confused and I don't know if this will be a big change or if this is needed between symfony and javacript framework.
EDIT:
When I say javascript framework I'm talking about a combination of backbone + chaplin or marionette, for example. I think that jquery is just a library, not a framework, and backbone needs jquery to work.
All websites are completed by JS now, to be more user friendly and interactive, so yes of course you can use JQuery right now, from the beginning of your project because if you don't you will lose time by refactoring your actions to works with JS interactions and callback !
In addition, it will learn you how to manage JS in a Symfony project. You are free to use a vendor bundle or not to return JSON. You can simply do like that :
// action :
public function myAjaxAction()
{
// do something
return new Response(
json_encode(
array(
'success' => 0,
'error' => 'No image found.
)
));
}
And to finish, some documentation of Symfony2 use JQuery, like this : http://symfony.com/doc/current/cookbook/form/form_collections.html
So yes you can use JQuery now !
I'm not getting you. If you want to convert flat JS into JS framework in the future, why don't you use that from now on? From my experience, it's not easy work to convert your js(jquery way) into REAL Backbone way. Because you need to reconstruct all of your js code, even symfony code.
Though it's harder to use two new kind of technologies for you, I think you should try it.
Yes, you can use it very easily. Symfony is mostly for backend. You can put in Backbonejs or Angularjs for front-end stuff.

Categories