How to make a Polymer CRUD app? - polymer

Does anyone know any example/tutorial of Polymer using core-ajax and ajax-form to build a CRUD application?
My main question is how to structure the app (best practices) to focus data access in "modules" (custom elements) like in Angular services.
Should I use a unique core-ajax by "module" for example and change this attributes (like url and method) in javascript or put multiple core-ajax in template? I know this is maybe a personal choice, but if an idea for this already exists I would follow it.
Thanks

The best choice is use Firebase!
http://polymer.github.io/firebase-element
Also there is the AngularJS binding for Firebase
https://www.firebase.com/docs/web/libraries/angular/quickstart.html

Related

How do i get the values from multiple forms in different pages in node js?

Im really new to node/MEAN stack and i would appreciate if somebody can help or guide me or point me to some related tutorials.
I have just purchased a wordpress template for a booking application. This came with different pages for choosing a date, selecting a room, the booking information and confirmation.
I have put the html pages inside the public directory and it was already running.
From the index, clicking booking will lead me to choose-date.html, then to booking info without touching the server side. How do I get the value from the date in the choose-date.html and booking-info.html? I planned to submit the information on the confirmation page.
In asp.net mvc, this could be done by having a controller and action for each and save a session in the server. If i use asp.net mvc, i have to modify the html to use a layout and such. This i want to avoid.
Angular is for single page only and as i understood it could not be applicable to this scenario though im planning to used it to post on the confirmation page.
Any suggestions? I very much appreciate any help and guidance.
Here my folder structure:
You have essentially three choices as I see it. 1) write a new app using the Wordpress template as inspiration. 2) write a Wordpress app using the template you provided. 3) write an Express app and use the template you bought for just the html.
If you do the third, there are a lot of options for doing a multi step process, but the basic pattern I've found useful is to just have one object in the database (eg your booking) and have each form be either a PUT request (so you send the whole object over the wire on each form submit) or a PATCH (where you only send the new info).
FWIW you could still do the ASP.NET method you described with storing things in session, I just don't think that's a great way to go regardless of framework.
edit
I guess arguably you could also use angularjs and treat each html chunk as an angular template that gets fetched as a directive demands it. But I think that'd be tricky to get right given where you're at with the project.

How to properly modularize AngularJS App?

How does one properly modularize an Angularjs app? I have an HTML page with separate parts, which I want to have separate controllers. At the moment I have one single controller, which serves the whole page. Different parts of the HTML page share the same scope data. Could someone provide a short and neat example with multiple controllers serving parts of the same page and sharing common scope data? I'm quite new to Angular.
Many thanks.
This question is too broad to be answered fully however here is some hints :
use directive/components when you need to manipulate the DOM
Controller should have the less code possible. Put the logic/server call in a service layer.
If you need a complex navigation system with multiple controller sharing data you might want to check ui-router (https://github.com/angular-ui/ui-router). It's a state machine in which you can nested state and their associated views. The controller of child state inherits from parent state allowing sharing datas.
If not ui-router 2 way of sharing data in a controller : events ($on, $emit), storing the data shared in a service and use $watch to watch for changes.

How to get change in HTML DOM in LabVIEW?

I am doing IOT related project in Labview using Arudino as hardware.
I was able switch off/on an led on Arudino by Pressing OFF/ON on website by using datasocket vi. Now what i want is to control the intensity of led from Website.
I have a range slider in my website and its real time value can be viewed in textarea,div,input type.
Is there any way i can get that real time value that is being changed in HTML DOM in Labview.
I know that datasocket vi returns the html source code but not the HTML DOM.
I dont want to use the Web Publishing Services as they dont work in my Laptop.
This is the link im referring for datasocket.
Datasocket Labview
You can do something like creating a web socket, but I expect the easiest thing is to use a web service. You can create one in LV and add a setLEDIntensity method to it and call it from your JS code. You can find a simple example here and in other documents in that community.
Use WebSocket API for LabVIEW to send and receive data from the web. This is the best option for you.
https://decibel.ni.com/content/docs/DOC-40572

How to handle multiple envoirnment urls in Polymer

I am developing a polymer component which is using firebase polymer element inside it.
I have seperate URls for firebase in staging and production, so I want to know what is the best design pattern to handle these environment urls in the polymer app.
If it's one instance, can you just change the location to your staging URL?
For something more advanced (e.g. using a mock endpoint with all instances of <firebase-element> or testing), Scott put together an example of how to use core-ajax with mock data that may be useful: https://github.com/PolymerLabs/mock-ajax.

How do I programmatically create a DragEvent?

This page describes the api for programmatically creating an event. Looking at the list, it indicates that Chrome and Safari do not support this api for creating DragEvents.
I'm trying to write automated tests for native html5 drag and drop behavior in an angular app. How can I programmatically mimic drag and drop events so I can do that?
You may want to use action chains (from selenium): https://code.google.com/p/selenium/wiki/AdvancedUserInteractions#Generating_Action_chains
We've used them on a non-angularjs app in the past for drag-drop. Anyway, as protractor (angularjs defacto tool for testing e2e apps) uses selenium webdriver, I bet you can use even protractor (https://github.com/angular/protractor) to accomplish that (with the object "browser.webdriver".
From protractors doc:
The browser.get method loads a page. Protractor expects Angular to be present on a page, so it will throw an error if the page it is attempting to load does not contain the Angular library. (If you need to interact with a non-Angular page, you may access the wrapped webdriver instance directly with browser.driver).
You're better off using the following protractor API:
https://code.google.com/p/selenium/source/browse/javascript/webdriver/actionsequence.js
You'll most likely want to use the following pattern:
browser
.actions()
.dragAndDrop(myEle, {x:100,y:100})
.perform();