I am building a Hybrid Mobile app with Angular 1.4x, Angular Material, UI-Router and Cordova. I am using UI-Router nested views to implement a global sidebar navigation view, but I have been adding the header bar markup to each content view since the title and some of the header action buttons are specific to the content view. This is causing a few problems:
The header bar flickers during navigation since it is being removed and re-rendered with each transition
I am duplicating quite a bit of markup for the header bar over and over including duplication of common buttons shared across all views (like hamburger button, etc).
It is convenient to be able to respond directly to header bar button clicks in the content view controller, but it feels lazy and violates DRY. It seems like the header bar should be a global UI element that provides an interface for content views to customize action buttons. I can't find any good blogs or examples on this.
Wondering how other developers handle this?
Well, you can create a NavBar at the index.html, above the ui-view tag, when you change the view, you'll only change de ui-view tag or you can create a NavBar for each view, in any case, use ng-cloack to prevent this kind of issue.
Related
I'm interested in creating a content nav bar, similar to this one
This screenshot is taken from Material UI's site, but I haven't been able to find a component inside the library that resembles it. Is there one? Is there a way repurpose either a Drawer of an App Bar to replicate it?
Thanks
If it’s always visible on the page that is just a normal div really.
Set it up in your component (or wherever your routes are defined) so it is on every page
There's an example given in angular docs which shows how to organize a project so that you can have common nav bar at the top.
Is it possible to have something similar for another app, which has no nav bar on the landing page, but then once you click on a link /showresults/:id, everything else should have a navigation bar? The problem I think I'm having is that /showresults/:id can't have ng-view? Does this require 2 modules?
You could set a variable in your main page controller that doesn't exist anywhere else and then use ng-if
<main-nav ng-if="!homePageScopeVariable"><main-nav>
I'm using angularJs 1.3 with Angular Material Design 0.8.3 and I have a page that has a toolbar on the top <md-toolbar class="md-whiteframe-glow-z2 md-default-theme"> where I'm trying to put some icons dynamically. The page has some crud's and each crud has it own controller. The case is, each crud must have it specific icons at the toolbar, I'm trying to specify it through the controllers but I have no idea how can I write this cuz each icon should have it owns properties (the href link, the action function etc). Someone know if its possible to apply this idea (control the icons that will appears in the screen per crud via controllers)?
I'm converting a Flash/Flex application into an angular application.
In flash, I have a header, toolbar above, and navigation to the left. When users click on the navigation, different modules are loaded into the applications main content pane. Most modules support New, Edit, Archive, and Un-archive actions. There are icons in the toolbar that execute the actions.
But there are some modules that support additional actions. In flex, when the child module loads, it loads a new button into the toolbar along with a callback function that will be called when the user clicks on the custom action button. When the module unloads, it removes the button from the toolbar.
So in angular, what could I use to achieve similar functionality? Is this a parent/child scope kind of thing or something else altogether? I'm new to angular and I'm not sure how to approach this problem.
Thanks in advance.
I have an Angular app that uses Angular UI Routing to provide states. The basic routing between pages works.
The app has multiple pages, and one of those pages has tabs. When I navigate to the page, I get a nice animation, and the back button appears in the header.
But when I navigate to the tabs page, the back button doesn't appear and there is no animation to the page. Is it possible to get an animation when I navigate to the page that has tabs, and to have the back button appear?
UPDATE:
Made a new example that better shows what I mean:
http://plnkr.co/edit/jKII2S3uEnEOVDy9WBA2?p=preview
look into this -
http://ionicframework.com/docs/angularjs/controllers/view-state/
The View Service is leveraged by the Ionic's tabs directive, which has
child tab directives. Each tab requires its own history stack (forward
and back buttons), and to do so each tab has its own navView
directive. This system is similar to what you see in modern apps, such
as iOS's App Store, or Android's Play Store.
each tab within tabs has it's own history stack, therefor your nav-bar history is reset when you enter a tab for the first time.
it is managed with a $historyId value on the scope of the directive. maybe you can work around that with the use of these value.