From what I've read, Angular doesn't support multiple views out of the box for URL changes.
What I really want is to have a set of controllers in charge of different parts of the application UI, that each respond in their own way to route changes.
Is there a common solution for this, or am I thinking about the application structure in the wrong way?
The ui-router plugin doesn't appear (to me) to solve this particular problem in the way I'd like - it's a state-first approach with optional URL changes, as opposed to URL-first.
Angular actually does support multiple views out of the box, what it doesn't support is multiple ng-view out of the box. You can use ng-include and place a controller on that element and watch for any route changes you need.
Essentially you'd do something like this:
<ng-include src='"menu.html"' ng-controller='MenuCtrl'></ng-include>
<div ng-view></div>
The ng-include's controller you would be watching for route changing and doing whatever is needed.
The ng-view of course is driven by the route changes setup in your app config.
Related
fairly new to Angular and have looked around this site fairly extensively, but most of the $location related threads I've found have to do with authentication and routing.
My question is: what is the best method for 1) setting up a watch on the current $location.path(), and 2) updating the view via a custom directive based on the current path?
I am currently using the ngView directive to update the majority of the page (routing works fine - no changes needed here). I now want to create a 'custom nav widget directive' that updates based on the current path, but doesn't need to go in my ngView templates (seems like a lot of repetitive code). To be clear - don't have any code written yet for the custom nav functionality. I am more looking for some guidance on best way to accomplish this and a rough outline on how.
<body>
<div ng-view></div>
<div custom-nav-widget-directive></div
</body>
I get that you want an answer that focuses on your suggested approach. But you might want to take a look at UI-Router. A powerful third-party alternative to the standard ngRouter.
UI-Router allows for Multiple Named views. You could have something like:
<body>
<div ui-view>
<div ui-view='nav'>
</body>
Where everything under div[ui-view='nav'] can change independently from the rest of your page/app which would in turn render under div[ui-view]. This would keep your nav logic and template(s) apart from those of the rest of the app/page.
Once I got to know it, UI-Router made me decrease my need for directives. Each router state and its views need their own configuration object like normal routes-- or directives for that matter--, with a controller, template, etc... Pretty cool.
If you decide to give a try do let me know, I'd be glad to help kickstart the learning curve.
I'm new to ionic and have been wondering the "angular" way of a "global controller".
In my app, I am using the starter tabs template and I want to have a bar with which I want to interact with as the user lays around in my app. And this bar would be placed in my index.html like the following.
index.html
<ion-nav-view></ion-nav-view>
<div id="my-player" class="idle">
<round-progress background-image="{{roundBg}}" background-repeat="no-repeat" background-position="center" background-size="contain" radius="23" stroke="5"></round-progress>
</div>
I want this div#my-player to be modified as the user plays around with the app.
The initial state for #my-player would be hidden, which I would do so via the css class .idle. But when the user get to my /#/tabs/replay/{:id} page and clicks on an item, I want to add a angularAudioObject and display the audio information in #my-player.
I found it very inefficient to repeat the same code over and over again all of my controllers so I wondered if there was a way to keep this audio-controlling code could be written once and not be called upon in all of my controllers.
P.S. Yes and I'm aware of services and how they could be included in my controllers but I was wondering if there is a way to keep this code "seemingly be integrated onto" my index.html file.
It doesn't really matter which file has the code in it just that the file is loaded and executed. That said you should use services or factories to define objects that you want to persist for the life of the application and for any code that would otherwise be repeated (assuming it isn't something that makes more sense as a filter or directive).
Controllers are ephemeral they are created and destroyed as you navigate views. You can have a controller outside the ui-views that could be a parent of all the other controllers but it's really a fragile way to build things. Instead take advantage of the simple DI.
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.
I read about angularJS routing. I want to implement it in my web app, but unfortunately I have a rather difficult situation changing to routing now I think. This is how my app works now (and I know it's probably not the way it should, but it does work):
I have one controller for the whole app.
The view is built with some divs, one of which is a menu div. The others are 'partial' views as angularjs calls them I guess. But the problem I see here is that two of my partial views can be shown at the same time (page is built like this, partial view only takes a portion of the page for itself).
So what I am doing is: I click the button on the menu -> one partial view shows up (ng-show), then I can click something on this partial view to get the second partial view opened on the same page (menu and first partial must stay the way they are).
At the moment I include partials within some divs with php include (which is I am sure the wrong way) and the divs have ng-show on them so that nothing is shown on the beginning. Then I manipulate all the clicks in the menu with setting ng-show parameters of all my partials (views). So if one button is clicked I hide all the others (with ng-click and a function inside controller). But this is tedious work and not the angularJS way and that is why I am asking this question here.
Example of my included partial (stripped of all unnecessary css classes etc):
<div ng-show="showNames">
<?php include_once("views/AREA1/names.php") ?>
</div>
And names.php has for instance just some few elements with ng-repeat and other angularJS directives… I have many includes like that and they work with just ng-show manipulation very well. But now that I grasped some of the AngularJS concepts I see that I made a mistake…
To sum up: how can I use angularJS routes (with ng-view perhaps?-not necessary) to show views within my web app? (taking into account the situation that I have described above). I just want user to be able to know on what "part of page" he is at any given moment.
EDIT: I went trough this and I reckon I could work it out: I need a structure similar to the one in this example 2.1 Online Demo, but furthermore I need to be able to click something on ng-view which should open another view (first one should stay in place). Any idea how to accomplish this?
By using routing feature in AngularJS, the html content of ng-view will be totally replaced by the new partial. You should not use ng-view for such a purpose like showing multiple partials at the same time.
But you can think about mix the ng-view and ng-include.
Let's say, we click each item on the menu, ng-view changes the sub-partial, you can have ng-include in your sub-partials which we can all it here like sub-sub-partial.
Try reading ng-include
AngularJS has ng-view which would contain the main theme of current context, rest of the UI elements are all managed by ng-include. Routes also work in sync with nv-view.
If your view requirement are complex look at ui-router component that supports various combinations.
I use ng-view to pull in a partial to page. After that I would like to load in another partial to the page that would be right next to the initial partial that was brought in.
How would I bring in another partial from a angular controller?
Because of how ngRoute was designed, you can only have one ng-view per ng-app instance.
However, it looks like you are looking for ng-include since the routes do not seem to come into play.
Otherwise, to work around the issue of URL routing having only one template, you have two options:
Use ui-router Note: Under heavy development, may introduce breaking changes.
Define and use two angular applications which can reuse the controller/service code. However, then the two applications will not be able to share state.