I am using Angular with Node to create a Web-APP. The back-end will be building a standard JSON RESTful API, and that is going normally. As for the front end, I am running into a little bit of problems. So my website is designed in a way where there are essentially TWO main displays. Eg. Two windows inside the website that can change frequently. I have NO IDEA how I should implement this! So far I have split my website into directives, eg each "display window" is its own directive, and I was thinking maybe use $localStorage and just have a bunch of ng-ifs inside each HTML file for each directive, switching the view depending on some value in $localStorage. Eg. Person clicks a button, some value in local storage changes to 10, an ng-if inside the directive displays the correct "view" inside the display because the value 10 represents some view. The problem is that I will have to put ALL my HTML in one file, and Im not even sure if this will work! Any suggestions? Any help appreciated!
PS. The two "main displays" can change without the other one changing, hence why I didnt want to group them into 1 view. They are separate entities, and programatically it makes more sense to split them up! They are also physically seperated on the screen (bottom right and top right, seperated by a bar)
For displaying two separates views in the same page, you have to use AngularUI Router because the native ngView directive only supports one.
Related
I have a dropdown containing 100+ options in it. Can it be paginated so that when user selects the dropdown it shows only 10 options with pager.Is there any angular plugin to do so.Thanks
I've personally never seen such a widget and i think it's a bit weird to be honest. The user wouldn't expect that behaviour from a dropdown which harm the usability quite a bit.
I would recomment to simply use a normal dropdown instead - if you think of a standard country-dropdown for example (Germany, France, Italy etc.) it holds around 100 entries as well but doesn't do some unexpected behaviour like pagination in it.
The standard select doesn't support this behaviour for sure and i'm not aware of any public widget that does.
So if you really want to do this you will probably have to implement it on your own.
Yes it can, but the pagination should happen a little bit special way. There is a plugin, called ngInfiniteScroll which does the pagination based on where additional content for a web page is appended dynamically to the bottom of the page as the user approaches the end of the content.
You may try to use this, but then you have to have your custom dropdown built. In this way you can achieve a convenient usage of a dropdown without showing 100+ hits on start.
ngInfiniteScroll website: https://sroze.github.io/ngInfiniteScroll/
I am using AngularJS for a mobile web application and would like to get some "mobile-like" animations to make it look really sharp. My ideal goal would be animations similar to the iPhone's Gmail application, which incorporates lots of animations, like pages sliding from left/right/bottom. And the menu bar fades in/out simultaneously.
I think applying multiple animations at once would require more than one ng-view, which isn't supported at the moment, so I'll hold off on that.
Right now, I just want to be able to make a simple slide-left and slide-right animation similar to how many mobile apps work when you go back and forth between pages. I'd want to have a Back button in my application and somehow be able to specify that this animation should be right-to-left. And a Forward button that I can say has an animation of left-to-right, etc.
This page has exactly what I want (the second demo where the pages slide both left AND right):
http://blog.revolunet.com/blog/2013/04/30/angularjs-animations-mobile-applications/
However, this demo is using the deprecated ng-animate command. I haven't been able to convert it.
I attempted to make this using the new AngularJS way of animating. I THINK the issue I'm running into is that when I change routes, I have two ng-view's at the same time and the "old" one still has the animation applied to it, so it looks weird.
Here is my attempt: http://plnkr.co/edit/Xa6Mvbfmux4BAISj9tJb?p=preview
Try pressing Run/Stop each time. I like how when you first run it and press B, both pages slide out together. But then the 2nd time when you press A, one page maintains the slide-right animation while the other does the slide-left, which I don't like. I also tried just removing the ng-leave CSS classes, but that adds some weird issues as well.
How can I update this code to make standard left-to-right and right-to-left sliding animations work?
Bonus: How can I structure the code to easily specify how I want each route/view change to animate? (Example: A-to-B = Left/Right, B-to-A = Right/Left)
So, I'm starting out on my first Cake app, enjoying it so far and I've almost finished the first part of my app. I'm just now tidying up my code and making sure it's done the Cake way.
I know Cake like to have code in certain places, e.g. the fat model, skinny controller ethic, but how about in a layout?
I have a nav bar at the top of each page. The links are populated by the current controller and passed to the view in an array which arranges them in the nav bar.
Currently I have an ->extend in every view to pull this bar in, but that's repetition and I want to remove it.
My 2 options (I think unless there's another way)....
Code this nav bar directly in the layout. I'm not sure about doing this, not sure if you're supposed to but a lot of non-presentation code in the layout.
Or, I could create an element, have the code there and include it in the layout.
Which is the Cakeiest way of achieving this?
Am using angular in this simple search results page and instead of adding jquery masonry for layout and deal with timing issues I decided to give this directive a try since it plays nicely with the ng-repeat.
Unfortunately when I have a large dataset and the ng-repeat takes a second or two, the page gets all screw up and all items render on top of each other. Someone claimed that it has something to do with the last element in the ng-repeat not being loaded by the time the layout is created through the plugin.
Someone else recommended a timeout to create a delay, this option works but the user can see the layout being built, which is not the best solution.
Anyone out there that has use this directive to create a masonry layout with a large dataset?
I have a requirement which requires me to use a single dialog with two tabs. Each tab should have a CustomMultiField (multiple sets of four fields). I do not know anything about EXT JS. Can some one point me to right direction where I can find something about requirement as above.
I have built custom components without any explicit understanding of Ext JS. To understand how to set up a dialog with tabs, look at the code for the page component in /libs/foundation/component/page. A directory of all the xytpes you can use, like MultiField, is here.
If you need something that behave like one, but is not necessarily huge specific ExtJS component or custom xtype, and you do not want to dig hundreds of Adobe ‘support’ pages, trying to find some piece of useful doc.
You can simply use multifield xtype and write 4 pure JS listeners, that does what you need.