I'm making a wizard which will help user in creating an item. It's a form with input boxes and dropdowns and a Next button. I'm not sure if it's proper to use ui-router to display next page when Next button is clicked. For now, I'm planning to use ui-router to display succeeding next pages.
How are you going to display the next page if you don't want to use ui-router?
you can use ui-router or normal route provided by angular,ui-router comes with extra and powerful functionality like states and nested viees and all.
Go through this link for more info
What is the difference between angular-route and angular-ui-router?
Related
When clicking a tab on Twitter Bootstrap, the page jumps down to the tab anchor. I'd like to disable this using the code as shown here:
Twitter Bootstrap Tabs href="#" anchor tag jumping
However I'm using Angular - where would I place this code so that it runs for every bootstrap tab as & when it gets loaded with a new page?
From what I understand, the issue is that ui-router is pushing the anchor into the url, as it thinks it's a change in state, and this is causing the page to jump to the anchor. So I guess I'm asking how to exclude these tabs from ui-router?
Currently I'm using the double-hash solution in the above link, but I'd prefer a cleaner solution which just excludes the tabs from ui-router. Another solution would be to override the action using stateChangeSuccess, but that's also not ideal.
Take a look at UI Router State Change Hooks
Maybe you can tap into the $stateChangeSuccess event and execute the code here. I'm assuming that each tab is a unique state similar to this website AngularJS website with tabs and UI Router. If not you may want to consider designing it in this manner. The code is here Code for AngularJS Tutor website
I've used UI router in the past in single page applications and found it prefect for loading new views and syncing them with the URL. However, I now have a normal multi-page ecommerce site which uses Angular a lot on various pages. Including te search results page.
I need to use ui-router only on this page to do ajax paging. Basically the content is already loaded onto the page and I have an ng-repeat for the results. It's a very simple set up.
What I want to do is change the state/url when the user hits the next/previous buttons and watch the stateParams to look for the new page number, then manually reload the new results and re-bind the ng-repeat to show the new results. Obviously I could load new search results without using ui-router at all but I want the back button to work so that you can go back through the pages.
Now, as far as I can see none of this requires any ui-view tags, or templates or controllers. I simply want to update the URL when a button is clicked and watch for changes. Is this possible with UI-router and if it is then what routes (if any) do I put into $stateProvider config?
Any help would be greatly appreciated.
I'm new to angular and I'm looking for the right way to implement the following idea. I'm not sure if a directive is the right way in angular to solve it.
I need to provide a modal box which acts like a wizard. The first view shows a list of options or categories of options like
profile settings
integrations
etc.
When clicking on profile settings it should show a form with all the settings and additionally should show a 'back' button to get one level up.
Selecting integrations will show a list of integrations like on github and each integration has its own form.
Every level will change the back button to get one level up.
My idea was to use routes like for a 'normal' page which gives us a shareable route to restore the same state if the link gets send to other users.
eg #/settings/integration/github
I read some blog posts that routes shouldn't be used in directives. Now I'm not sure if this is the right approach in angular.
Is it a good idea to use the $routeProvider in directives or is there a different approach in angular to archive this?
I am I new to Angular and UI Router.
Plunk http://plnkr.co/edit/1wfyrGryfGG5RtXozPFY?p=preview
Setup I have three top level application nav buttons Home, Projects, Help. They load different views home.html, projects.html and help.html using the Angular UI Router ui-view directive. This works good.
The Projects.html view has a tab bar with each tab corresponding to a project: D1, D2 D3 etc., I show the corresponding project tab using url router attributes.
Every time I click the Projects button it is reloading the tab bar completely. I loswe the current tab and hopefully if any nested views inside it. Basically the page contents of Project.html, invoking the controller as well.
I read through the wiki documents and couldnt figure out how to implement my required functionality. I am sure I am missing something. Will it always reload the view?
Question: How to avoid reloading the projects view contents so that I can retain the selected tab and all the contents as-is before switching to Home. Because I would have a lot of nested views and models on each project.
I wanted similar functionality too, but ui-router doesn't yet support it. I forked ui-router to support "parallel states" and submitted it to the project for comment. The gist of the conversation is that ui-router will eventually support some form of parallel states but not yet. In the meantime, you can try my fork of 0.2.10 which provides the parallel states that you want.
Read the conversation here: https://github.com/angular-ui/ui-router/issues/894
View the sample parallel tabs plunk here: http://plnkr.co/edit/YhQyPV?p=preview
Here is the fork; build it with grunt: https://github.com/christopherthielen/ui-router
One option would be to implement a service that can be used to maintain the previous state. Services persist over controller changes, thus they can be used to maintain the previous page state and updated when the route changes. something similar to this would work.
app.factory('persitDataService', [function(currentStateData){
var stateService = {
state:{
//your object data set to passed in data
}
//other functions here
};
return stateService
});
then in the controllers just inject the service and assign to a scope value. When the route changes just reset the data in service to new state and inject into new controller
This should work for the previous page state. If you are wanting to save the states of all previous pages then this becomes a larger problem but should be accomplished in much the same way only with a more complicated service setup.
This could also be combined with local and session storage
I'm an Angular newbie working on a Phonegap application with a few views: a map, a list, and search.
As the user interacts, each view accumulates some UI state: the map is dragged, the list gets a scroll position, a detail view is opened for a list item, a search is performed, etc. I'd like for the user to be able to navigate among views without losing this state.
When I put my views in partials in ng-view, and my nav links use href="#/path", or ng-click to trigger location.path(path), the controller is run and state is obliterated. Makes sense.
One option would be to ng-include all partials in index.html and ng-show based on the user's nav actions. However, I've found that this kind of complexity in the DOM will lead to poor Phonegap performance. It also feels that by eschewing routing, I'm losing one of the main benefits of using Angular.
Another thought: nav clicks cause traversal of browser history. Seems tricky to maintain the state of all views in parallel, however.
My question: is there a good pattern for this?
FWIW currently using Phonegap 3.0 and Angular 1.1.5. Thanks for your time.
If you want to preserve the state of the DOM in parallel views, there's an extension to ui-router called ui-router-extras. It has a a nice demo with state transitions and full DOM preservation when switching among tabs.
you can keep all the data that needs to persist between controller reloads in services
a simple example here
Preserve state with Angular UI-Router
a more complex example here that includes restoring state if the user leaves the page and then presses the back button
Maintain model of scope when changing between views in AngularJS