I have been following the concept of componentalization, and is an advocate of it, but kind of looking for a solution for a normal scenario below. It could be that my approach is wrong and must be changed, or something I am unaware of. I have been looking everywhere and trying out many things, but havent seen a success. It must be something I missed out.
I want to add a componenent with internal routing. Basically, the idea is this component can exist on any page, but uses a relative route from its parent to be in a particular state.
The requirement is that it can exist in different tabs which has states and it has to be a directive.
Can someone help me out with this concept or point me in the right direction? Would want to implement it in AngularJS 1.4
Edited
The below image depicts the scenario. Can we place the register component/directive in any tab, be it dashboard or tab2 or tab3.
We also have states in the Register component( I understand that states work in when config runs), but those are to be handled in the component code, but should stay independent of the parent route, like a standalone component.
eg: if component ABC is in page1, the route should be page1/ABC/step1
if later we decide to move it to another page, the route should be page3/ABC/step1 and this has to be done without adding the routes "page.ABC.step1" and "page.ABC.step2"
So the idea is to move around the directive without changing route configs.
I hope I have conveyed the idea properly. If you need more do let me know.
Related
I'm wondering whether to use angular UI router or just use simple ng-include, i'm failing to fully understand why would i pick to include entire library over the built-in ng-include which gives me about the same functionality with less code?
Can someone explain whats wrong with
<div ng-if="somestate" ng-include="someview"></div>
Can someone explain whats wrong with
<div ng-if="somestate" ng-include="someview"></div>
It doesn't handle URLs in any way. You want the URL to change when you go to another state, and you want the state to change when the URL changes. You want to be able to bookmark a page in your app, or send its URL by email, and come back to this page rather than the home page when opening the bookmark or the link.
It also doesn't allow resolving data before switching to a state.Both ui-router and ngRoute allow doing that: the state changes only when the data needed to display this state has been successfully loaded.
That's the main job of ui-router and ngRoute. ui-router has many other goodies, like events when changing state, named views, state inheritance (very useful to handle a view consisting of several tabs, for example), etc.
My application has two views, each of these has two routes. When a user change the route of one view, the other should not be changed. This is achieved using sticky states.
One of the routes uses a resolve to go grab something from the server. In my application this is dependent on a route parameter which is simulated in the plunker I put together by returning a random number.
The issue is that the resolve only fires once which means, regardless of the route parameter, it ends up loading the same content and redirecting to the same URL every time.
Worse yet, adding {reload: true} to the state causes this error: state.params.$$keys is not a function. I've started reading the source but figured I should post here in case anyone had seen this before.
I would prefer not to refactor the app to avoid parallel states, and so would appreciate any other suggestions.
You are running into issue #112
https://github.com/christopherthielen/ui-router-extras/issues/112
I built from source and updated your plunk and it seems to be working correclty now when transitioning back and forth between ViewB RouteA and Route B
http://plnkr.co/edit/zpEXaJqXtJPH1pVKPVxj?p=preview
Stupid stackoverflow requires me to add code to the answer since i linked to a forked plunk. there's no code to add
I'm working on an isolated scope custom directive that has a few different states.
Does it make sense to use ui-router/ui-view inside this directive in order to handle the states?
It's a "note widget" that lists notes. If there are no notes, it displays a message instead of the list that says they should add a note. If notes are being loaded, it shows that notes are being loaded. If a user adds a note by clicking the add I mentioned above or the + then the view is a textbox. So there is at least 4 different views.
My initial instinct is that it would be polluting the directive and giving it a hard dependency to ui-router and my application because it defines the states. Am I just over worried?
I would tell it this way: yes, use the ui-router, but not for a directive - use it for your appliation. In fact, the best you can do is to read few blog posts and go through sample application to understand the principles. You'll soon realize, that there is no need to use the ui-router partially..
from The basics of using ui-router with AngularJS (by Joel Hooks)
...ui-router fully embraces the state-machine nature of a routing system. It allows you to define states, and transition your application to those states. The real win is that it allows you to decouple nested states, and do some very complicated layouts in an elegant way.
You need to think about your routing a bit differently, but once you get your head around the state-based approach, I think you will like it...
and here AngularJS State Management with ui-router (by Ben Schwartz)
...The most interesting thing about AngularJS's new router, isn't the router itself, but the state manager that comes with it. Instead of targeting a controller/view to render for a given url, you target a state. States are managed in a heirarchy providing inheritance of parent states and complex composition of page components, all the while remaining declarative in nature...
Here I put together all the links, up to date, targeting the sample example, the most interesting code snippet sample.js..
Summary, try to implement the ui-router on the application level. Directive could then by a conductor only, helping your users to navigate, to walk through among states...
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.
What is the purpose of Backbone's Router? Can't we do the same thing without it? With a router, a click on a link would change the URL of a page and the last bits of the URL would trigger a function. Why not just assign a click event on this link and trigger a function there?
I don't use backbone specifically, (rather, I use iron-router for my project) but it's purpose is to route URLs to pages. Consider the following: you have 50 links scattered across your website's source all pointing to /awesomePlace (which serves awesomePlace.html). You've decided awesomePlace isn't so awesome anymore and have declared that there is a moreAwesomePlace.html. You could go in and change each of those 50 links to /moreAwesomePlace or you could change the route once. The router could then serve up moreAwesomePlace.html whenever anybody visits /awesomePlace.
That's just one example. I personally haven't spent too much time with routers yet but I'm sure somebody can give some better examples than I have. Hopefully this helps explain things a bit though.
Yes, we can implement same functionalities without router, router is just an helper utility, just like JQuery for DOM manipulations. Reason behind using router all about scalability and flexibility. If you follow "on click do some thing", it does't scale. In a single page application every click might have multiple handlers. One click on item might demand changes to multiple widgets. with routers you can add/remove hooks for the same click. And in future if you want to change the implementation of Router or hooks, you are free to do that, only thing that you need to make sure is contract btw these two remain same.