I don't know if this style of routing/navigation has a name, but play.spotify.com is a good example. In short, at every navigation decision, the website loads a new view without deleting the old ones. This allows for pleasing "visual breadcrumbs" that enhance a feeling of continuity in single-page applications.
Critical features:
The URL reflects only the current state, so a reload (or link share) erases this history.
The history length is (seemingly) arbitrary--this is not hierarchical tree-like navigation but a rather a path on a graph.
My questions are
Is there a routing scheme (via ui-router or something else) that would make this possible in Angular?
Does this have a name?
The only way to implement this I can see is to programmitically add states in ui-router as in "Angular - UI Router - programmatically add states," but it just seems very hacky.
I'm not sure if this has a name, if it has I've never come across it. The behavior in the video above can be achieved by using a layout that contains the side bars that are not changing when the route changes.
The parts that are changing are all in the center so a widget based approach with headers, footers and side bars sitting on a main page. Then with the <div ui-view></div> located in the middle of the main page only this content will change when you select a new route
I hope this helps
Related
Well, I have never used and never felt like that I should use the UI router. I was asked in one of the interviews about this and so felt like reading if I am missing something out as an AngularJs developer.
Now, the explanations on internet displays it's strength based on the modularity and reusability of the components. Nesting of views etc.
If I want to reuse components in my view, then can't I use directive instead of a new state? According to this article by scotch.io(top google result) for ui router we can use separate data /controllers in my view. Well, can't I do the same via directive's controller and template. I can still reuse as many times as I want it.
Please let me know if I am missing some cool feature and makes it quintessential to use it in an AngularJs application (yeah a larger one with lots of reusable components of course) .
The whole point of the router is that it uses the URL to change states. If you just used directives, you would have to write your own mechanism for syncing up URLs with specific directives.
AngularJS is a framework for Single Page Application.
Single Page Application (SPA)
Single Page Application is a web application that loads single HTML page and dynamically updates a fragment in the page as the user interacts with the app.
John Papa's blog explains SPA in simple terms.
The biggest advantage of SPA that I see is
once the application is loaded, the state is maintained without
requiring server roundtrip when user navigates.
Users can bookmark deep link into your application. SPA framework (AngularJS) will take care of loading the required state when user open bookmark.
Although it is technically possible to achieve the above in a non-SPA application, it was never as simple as SPA.
SPA is useful for highly complex applications with many pages. For simple applications with 2-3 pages jQuery is the way to go.
Read Single Page Application: advantages and disadvantages for more discussions
You probably know all these and I think you are trying to achieve SPA using directive.
Routing
Routing framework loads a view dynamically based on user action into the main page without refreshing the whole application; providing SPA effect.
There are two popular AngularJS routing frameworks available.
ngRoute
UI-Router
ngRoute is based on URL mapping and UI-Router is based on state name mapping. I prefer UI-Router.
Routing vs Directive
Now, the explanations on internet displays it's strength based on the
modularity and reusability of the components. Nesting of views etc.
Yes directive is used for modularity and reusability and can load views dynamically but cannot choose a view dynamically based on user action. You have to write complex conditions within directive to choose a view dynamically.
For example, if you have an application with 3 links and you need to show a view based on the link user clicked.
Using directive you need to keep track of what the user clicked and write a mucky condition to choose a view to display. Most of the time you will fail to achieve the effect because the link can be accessed in multiple ways.
On the other hand, once routing is configured, the corresponding template will be dynamically loaded when user clicks the link. It is way easier to change the view based on user action.
Another advantage. When user opens a bookmark deep linked into the application, routing framework will take care of loading the sate (It is impossible to achieve this using directive). It feels more natural way of designing an application.
Choice is yours.
I've started to learn AngularJS but I need some application design hints. Of course I'm not asking about the layout but ... how to design my application and it's controllers in a proper way. I have left sidebar with a menu that is loaded from the web using JSON. That needs a controller. That's fine. It works for me. There's a content box as well in a center of my page that loads some data dynamically. In my opinion it requires another controller.
And now comes my solution, that somehow doesn't look good IMHO. When I click a menu item in my sidebar I'm loading a content. Then I'm passing this data into a Service which emits an Event afterwards to the Second controller (which is responsible for controlling my content in a center of my page). When it receives this event it simply gets previously loaded data from the Service and displays it. It generally works.... but ... I'm pretty sure that's not the proper way of doing this.
I would be grateful for any hints. AngularJS has a really poor documentation and tutorial :(
cheers
EDIT:
OK. That's my basic application using JQuery:
http://greatanubis-motoscore.rhcloud.com/index
And that's the same application I'm converting into AngularJS:
http://greatanubis-motoscore.rhcloud.com/angular/index
No worries, some text is in Polish but... I think it really doesn't matter ;)
Note for the AngularJS version: At the moment the content is a HTML but finally it will load JSON data as the other controllers.
I would go about doing this with angular ui-router. With ui-router you can achieve this in a couple of ways. You can use nested routing to have a base state (Your sidebar menu, header etc.) which will act as your shell page, this can have its own controller as well. You could then define each of those other views as child states of the base state. These child states can also have their own controller/views as well, but they will be sitting inside the base state (both visually, and also inherit $scope properties of the base state) optionally they can have separated URLs themselves, but they don't have to, you can just change states without changing the url, by leaving the URL bit empty when you define different states in your $stateProvider configs. Another way would be to use the multiple named views feature.
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
I'm diving into the whole "single page application" and Backbone.js (specifically Marionette) stuff. I'm working on a decently complicated application. I'm wondering how you set up the router to handle nested views so the "containing views" are also rendered. For instance let's say I have an Admin section and under that I have a Users section. Under Users I have tabs to "Add User" and "Search Users".
If I've selected "Add User", I imagine my URL has the fragment "#admin/users/add". That routes to a view that has the add user form. However, if you go directly to that URL I want to show that form again, but also the top navigation bar with "Admin" highlighted, the admin specific sidebar with my admin navigation and have "Users" button highlighted. I need the whole HTML page, not just the Add User ItemView.
How to do say when the page first loads (refresh or from a bookmark), to load the html structure and "parent views" as well? Thanks!
This is the way you need to think about the app's behavior:
the controller needs to create view instances and pass in the data they need (models, collections, etc.), and then display the views within the regions
the ONLY thing the router does is is match a URL to a controller action (i.e. "if this URL is entered in the address bar, the application should launch this controller action")
So bascially, this is your problem: you're missing a controller action (e.g. MyApp.AdminApp.Users.New.newUser() which will render the views you want, which you can then call from your router...)
One thing that helps (although not related to the problem you're currently facing), is to always call the navigate method with trigger: false (which is the default). This ensures that your app is behaving properly and that the router is limited to matching URLs to controller actions.
Regarding the menu (with highlighted current entry), I would make it a separate Marionette module (https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.application.module.md), and have a collection of models (that don't get saved on the server) to list your menu entries. That way, you can manage the current entry by setting its model activeattribute to true (and checking that attribute in the view to highlight the current entry).
This is probably a lot to take in at first, but after a few more hours of working with Marionette it will all make sense...
(Shameless plug: I'm writing a book on Marionette that takes you from beginner to fully independent with Marionette. In there, I'll be covering this type of functionality, especially the menu management and how to highlight the current option. If you'd like to check it out, there's a free 55-page sample at http://samples.leanpub.com/marionette-gentle-introduction-sample.pdf and the book (which is still being written) is at https://leanpub.com/marionette-gentle-introduction)
I had the same question a time ago, what I strongly recommend is to get involved with Marionette layouts, collections, composite and collection views, regions and how to display content within templates.
Is not hard as you keep reading tutorials, I recommend reading lostechis.com which is a very educational blog from the creator of Marionette, Derick Bailey, also the Marionette Official website.
This is just about educating yourself doing tests and when some question comes to your mind search it and if not found dont doubt to ask it right here.
For the side bar and some other stuff you can just use JQuery-ui or Twitter bootstrap, it is very easy to integrate them with backbone/marionette views, but you just have to read to achieve that.
Which you luck.