I am new to AngularJS and I've learned quite a bit in the last few weeks, however I have several questions. So currently I have a jQuery prototype that I would like to convert to use AngularJS. For any animations or page transitions I am using css transitions. To change pages, I am changing the body class with jQuery which in turn animates elements on or off the page.
In AngularJS, views are displayed and removed with no animation at all. The way I need it, some views would use some elements from the last view.
For example, there is a start view and a search view that contains a search input field that animates. When the page is loaded, the start view is loaded. When the user clicks submit, it would then load the search view but the search bar should stay there and animate to the top for future searches.
I am somewhat confused as to how to go about doing this. Any suggestions?
When possible use the unstable / development versions of angular.js. (There are pretty stable).
The newest have an ng-animate directive which is usable for the most use cases.
Also there is nganimate.org with a lot of examples and there this article and this one which should get you started.
Related
I'm developing a PhoneGap/Cordova application with AngularJS. Since my target platform is Android I looked into different approaches for activity transitions. In other words; How to animate the transition between form A and form B while providing a native and intuitive user experience.
My application will be implementing the material design guidelines and I stumbled upon a transition animation called "shared element transition" which I think would work perfectly for most of my application flows.
I actually really like this approach and was wondering about how to achieve an implementation based on Angular 1.5 which is as generic and flexible as possible and easy to use across the application.
Since I'm still new to AngularJS, I wanted to check back with the community to find a neat way to implement something along the lines of the shared element transition or maybe get pointed to an already existing implementation.
For those wondering, I'm using Angular 1.5 and MaterializeCSS to empower my app. Thank you very much!
Check this tutorial (ready made component to use as well), it animates hero elements between different views and maintains proper routes.
http://blog.scottlogic.com/2014/12/19/angular-hero-transitions.html
To summarize, the hero element has to exist between the two views being transitioned. When transitioning, the hero element is temporarily hidden in the target view till the position animation ends. If the target view is being loaded directly (refresh, bookmark), no animation takes place and the hero element is there.
Im using Bootstrap and AngularJS with .Net Web API for my backend services. Im still a bit new to AngularJS. When considering the different sections of the layout, my app directive is currently at the container level named "Bottom". However, my individual views will be in the area named "main-content" (these are div boundaries).
The layout also contains an area named "sidebar" which will only be used on one page, the rest of my pages will expand "content-wrapper" from 10 to the full 12 column width of the page.
So Im trying to decide on how to use either use one layout (in terms of our MVC _layout.cshtml typically used for the template) for both types of pages, or use two separate layouts. The latter seems "cleaner", since trying to use a single layout for all scenarios seems more trouble. I think Ive used separate master pages with ASP.Net web forms in the past in these cases. Same idea here? I think this would make things cleaner also with regards to setting up the AngularJS code, as I can separate the two page types with different modules with their own controllers. Does this seem like a good approach, considering not just the mvc layout, but any impact on Angular/Javascript code?
TL;DR: Use one layout CSHTML page.
It's hard to give a confident recommendation without having a deeper knowledge of your application. Ultimately, it's your decision to make based on the information you have.
That being said, if indeed that sidebar is only used on one page, it should be considered part of that page. With that in mind, Container in the image you attached would serve as the host element for the router's view directive and the page with the sidebar will have that sidebar in its template.
If, however, the sidebar may appear on other pages in the future, I would simply hide it based on the current page with the view directive on the content-wrapper in your example. I have a similar situation in an app I'm working in which the sidebar behaves as a sort of internal navigation. If the current page does not have any sensible links to put in that sidebar, we hide it. Something like that may work for you in this case.
In either case, I would recommend against using multiple CSHTML layout pages because of the potential strangeness in the user's experience with some pages using a nice, AJAX-driven navigation and others using an old-school, "white-flash" kind of navigation.
Take a look at ui-router, which is an alternative to the default routing that Angular comes with. It allows you to have multiple views, the content of which can change based on the route. If you are used to using a templating system to layout applications pages and your pages have a generalized sort of layout (ie all pages have a top nav, a main body, and a footer, or something similar) then ui-router goes a long way towards making this much easier in Angular.
I would like to ask if there are any examples related to Polymer's animated pages ( http://www.polymer-project.org/docs/elements/core-elements.html#core-animated-pages ) and how we can build a similar demo using the resources provided in the Angular/material repo (https://github.com/angular/material).
I would like to achieve http://www.polymer-project.org/components/core-animated-pages/demos/music.html but I don't want to use Polymer since I would like to use Angular.
Can you please provide me some directions in order to start?
What they typically do with Polymer is have two connected elements which shows only one and when you perform some action, the other gets shown (from display: none) and animates from certain dimentions to its final form. Sometimes elements also shift but it depends on whether the content is able to move to its new position or not.
You have to work with css transition, transform and display. Sometimes even custom animations. And you are mostly changing multiple divs to their final form. I think the most difficult would be animating colors (from white to pink or from yellow to green for example) as those are most difficult to do (performance-wise).
If you look at the example you've set (final link) you see there's a list of items with a detail div and once you click the item you show the detail and transform the contents to its final dimentions.
Just know that these things are pretty hard if you aren't very much into Angular or HTML/CSS/Javascript.
The framework of Polymer for Web is very much a work in progress and i wouldn't be surprised if it took a few months to get similar results for both native and web.
You can take example from things like this: https://medium.com/tictail-makers/giving-animations-life-8b20165224c5 or https://www.polymer-project.org/apps/topeka/ or http://codepen.io/collection/amheq/ . And don't forget to speed it up by using some bootstrap theme like this http://fezvrasta.github.io/bootstrap-material-design/ or something.
I've been struggling with the same problem as there isn't much to go from right now. You stated the Angular project but that will take time. If you want to do it now, you have to do quite some work (if you do, share it with us), but you might be better of with postponing this until most of the bugs and problems have been solved.
Thats what i'm doing now.
I need some help regarding tabs.
We are building a intranet portal for our clients, where they will be able to create business cards and more. But we've come to a halt because of problems with tabs.
We need to have a approx 1-4 steps process in tabs. 1 step is to select a business card template. When the template is chosen the next step would be to fill it out.
However each template has different kinds of input fields making the height of the step 2 tab variable.
We've tried using the tabs from Jquery UI, but only the first step is working, since the next step on some templates will be cut off, because of the height.
What is the best way around this problem?
I've used JQuery tabs a lot, and never seen this problem. AFAIK, there is nothing about the tabs themselves that restricts the content that can be put inside them. I would try removing all the logic, html, additional js etc from your tabs, and making the content simple (a series of divs with a fixed height for example). I think you will see that the tabs simply open up to the full height of their contents. Then start adding your code back in until you find whatever it is that restricts the height of your tabs. BTW, I don't think it makes any difference whether they tabs are statically created or loaded via ajax either ...
Can't u also write some code like height() to fix the jquery ui thing? I think jquery ui is the best choice.
What I want to achieve is as follows:
For example, there is a symbol which represents a table on a web page, a user can drag this element to any place on the web page, when the user looses the cursor, a dialogue box will pop up to ask the user to input values of attributes, for example,the number of columns, the number of rows, after the input, the corresponding table will come out at the place where the user chose. Of course, the symbol which represents a table is still at the original place. It is like a web version of dreamweaver. How to do this with Javascript?
If your question is how to start researching this feature I'd start with:
JQuery to get started with fancy yet easy javascript functionality
JQuery UI: Draggable, Dialog, etc
To actually develop the feature, if you don't know where to start, start small. Create a very basic web page with maybe just an icon and a button and then write some javascript to do something minor like display a dialog and show the result. Slowly start adding things like dragging something around, etc.
The JQuery UI stuff has lots of demos that you can start out with as a base to start customizing.
Warning: The first time I hit the JQuery UI Demos page I wasted at least a couple of days playing with all their cool stuff. It's so easy because the source is right there and you can also see it working in the browser on the demo page.
Did you look at the jQuery UI demonstration pages? The simple photo manager demo contains all the major pieces you'll need: Dragging an item, handling the drop event, doing something custom on drop. The revert demo may also be of interest
Begin by defining the requirements of your project. Break it down into smaller tasks and milestones. Then some learning and research on what javascript and frameworks like jquery can provide. Also check for existing solutions or components that you may be able to use and reduce your development efforts.