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>
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
I want to have nested routing in angular-
In User.html, i will have three sections add, edit ,delete.
On click of add it should route to user/add and redirected to add.html and same for others.
How can this be achieved?
You can use $anchorScroll but that will not change your url mean you will stay on the same page and it will just scroll you to the section. As i can understand you want to have different actions on the same page, there are many ways to do so like angular like ng-show and ng-hide. You you the user edit view on demand and so with the add user. You can use same form for add new and edit. there is a tutorial on Angular page if you scroll down there is a section Wire up a Backend and that's something you want in your application i guess :-)
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.
I'm building my first Angular.js + Bootstrap web site.
As far as user interface is concerned, I use a classical top navbar approach, with 7/8 items in navbar linking to the relative views. This is a first version of the site. When you click on "weather", you go to the weather page. When You click on "services", you go to the services page. That's ok.
But, I would like, for a better mobile user experience, when scrolling down, all views to be shown, in sequence... This is an example of what I mean, to be clearer...
Is it possible, preserving the angular.js "routing" logic?
UPDATE: I did change the page contents in the first link, adding two links in navbar, because of Ronni Skansing comment...
UPDATE2: I try to better reformulate the question:
Is it possible, with angular.js (+bootstrap), to design an UI with all views reachable without any click, but continuously, vertical scrolling the page, the way a typical mobile web app user is used to?
I don't think you can really have a single page unless you design your website to be a single page.
Anyway, I found a solution which is very similar to what you would like: simply add a transition on ng-view change. The user won't be able to scroll, it will still have to click on the navbar items. But the sensation will be similar to scrolling. See here the example. (remember to choose the slidedown effect)
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.