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.
Related
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.
I'm starting with web development these days and I would prefer so called client side rendering. In practice that ajax request needed data and add them to the html file ( which has already the static content, and dynamic data is added via 2nd request ). I like this approach, cause of a clean seperation between client and server. You just need to define an API and you can seperate the work.
So if you don't create the dynamic content on server side, how dou you persist data between page requests.
For example, you are on a overview for a list of adresses. You can click a button to edit a specific adress with id "25". That will requiere a new html file for that task, which will be loaded and rendered. How does the javascript included in that html file know, which adress should be loaded. How can it access the id "25"?
Approach 1. You don't persist anything on the client and simply reload everything as you go back and forth between the list page and the editor page. Editor page gets the id "25" and loads corresponding item either using AJAX, as you want, or on the server.
Approach 2. You do everything on the same page (SPA). You use JavaScript and probably some framework like Angular to maintain your page state.
I have a drupal site that is being used strictly as a CMS that produces JSON feeds using services and services_views, which are consumed by a separate site. What I would like to do (and I have a working proof of concept of this) is allow for a "live preview" on the real site, by intercepting the node form preview / submit, encoding the node as JSON, and loading a special page on the live site that consumes that JSON and displays the page accordingly.
The problem with this JSONized node is, it's different from the JSON being produced by my view (using services_views). My end goal is to produce JSON that is identical for both previewed and non-previewed objects, without having to maintain separate output methods (I could easily hand-customize the json but then when my view for the public api changes I have to make the same changes to the preview json. Trying to avoid this).
I'm looking for feedback on this approach. Is what I'm attempting even possible? The ideas I've been able to come up with so far are:
being able to (conditionally) drive my view with data from a non-databse source
sneakily inserting data into the view object during one of the stages of execution? Kludgy but I'm not above that :)
saving a "clone" node (or revision?) of the node being previewed and let the view use that to display the preview JSON?
Maybe this is the wrong approach altogether and there's something better? (Trying to intercept and format the services output in my module... maybe avoid services_views altogether?)
If anyone can offer some advice, insight or opinions on how to best proceed here, I'd be really grateful.
in a custom module, you could set up a page that grabs the json output from the view page.
$JSON = file_get_contents($url);
that way the preview stays bound to the view, even if the view changes.
First I think it's not an easy task what you are trying to achieve. So before all, good luck.
I think you could intercept the node submission data, then create a node programatically, then render that node, and then export the rendered node to JSON. Inmediately after you get the JSON, delete this node, because the programmatically created node is only for preview.
This task could be more CPU demanding but think that previewing content exactly as the content will look is difficult.
Your rss feeds that your site reads could be filtered with some parameter to avoid programmatically created nodes (prewiew nodes), despite these nodes will be available for a very short time.
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.
I'm writing a UI for a client that parses some very nested JSON data. This UI is in PySide and I'd like to include some visualization of the data as well. I've recently come across QWebView and this seems like a great way to quickly embed 'stunning' charts into my UI that can potentially also be configured.
So the question is, how can I send 'signals' and data to the page? The one approach that would work is to manually create the page as a temp file and have the webview browse to that, but I think there should be a better way. Is there?
You're probably looking for QWebFrame::addToJavaScriptWindowObject(). With that method, you can export QObjects to JavaScript. These objects can have signals you can connect to in JS, and you can also use properties or methods with return values to obtain some data.
See https://qt-project.org/doc/qt-4.8/qtwebkit-bridge.html for a complete overview on how the C++<->JS bridge works.