I am developing a very simple Ionic 1 app, where my I want ion-nav-bar to be fixed, always the same, displaying a logo as a title of every view.
Regarding to the ionNavBar docs the usage of this directive should be the following:
<body ng-app="starter">
<!-- The nav bar that will be updated as we navigate -->
<ion-nav-bar class="bar-positive">
</ion-nav-bar>
<!-- where the initial view template will be rendered -->
<ion-nav-view>
<ion-view>
<ion-content>Hello!</ion-content>
</ion-view>
</ion-nav-view>
</body>
My app's index.html <body> looks much the same:
<body ng-app="adidasApp">
<ion-nav-bar>
<ion-nav-title>
<img src="img/my-logo.png">
</ion-nav-title>
</ion-nav-bar>
<ion-nav-view>
</ion-nav-view>
</body>
As the docs point out
The nav bar that will be updated as we navigate
the nav bar will be updated as we navigate. This makes my image to fade, to feel like it is loading every time I change between views.
But I don't want this to happen. I would like my image to stay still all the time, without updating each time I change views. Is there a way to achieve this?
You need to use the ion-header-bar directive that adds a fixed header bar above some content: http://ionicframework.com/docs/api/directive/ionHeaderBar/
Keep rocking!
Related
In my application I have an index.html file where i have loaded all the required scripts and the body contains am empty ng-view whose content will update based on the route url.
The first page is a landing page where I'am showing a button to the user, clicking on which am showing Login Page, by changing the path value of $location.
On Successful login a dashboard page should come where header, sidebar footer area is going to be fixed and only the center area is going to be changed based on the menu clicks which is there in header section, by changing the route value
so the center area i declared as
when am trying to load the dashboard.html page it is going to infinite loop and when am removing the center div which is nothing but an empty view , my view is rendering fine. So the problem is with using the
Can anyone suggest me whether my understanding is corect ??
If yes please suggest me how to achieve my requirement...
index.html
<div class="row">
<div data-ng-view=""></div>
</div>
dashBoard.html
<div class = "row">
<header div here>
<div>
<sidebar div>
**<div data-ng-view = ""></div>** which is not working
</div>
<footer div here>
</div>
I have provided the html code
Thanks
What you're trying to do is not supported by the default router. You can try ui-router which supports multiple and nested views. You can see an example here http://plnkr.co/edit/7FD5Wf?p=preview. The index.html contains the main view.
<body ng-controller="MainCtrl" class="container">
<div ui-view></div>
</body>
Inside contacts.html there is another view
<h1>My Contacts</h1>
<div ui-view></div>
Try checking the difference between route provider and state provider.
Here's a link to ease your search.
I just started with Ionic, and I have an application to build that works like this:
An initial page shows up, with a list of items, when the user clicks on an item, a new window opens with ion-tabs inside it.
I'm populating ion-nav-view dynamically. I built an extremely simple version of this for testing purposes. Can anyone help me out to achieve the aforementioned functionality?
Problems:
The main content of the 'main.html' page is hidden behind the nav-header
The 'Tabs' page does not even open up when I click the button
Even when I forcefully open the tabs page by navigating to #/tabs, they don't show up.
Can someone help me out here? I'm totally lost.
Thanks in advance!
HTML:
<body ng-app="starter">
<ion-nav-bar class="bar-positive" align-title="center">
<ion-nav-back-button class="button-clear">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view>
Loading
</ion-nav-view>
App. js Routes:
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'templates/main.html'
})
.state('tabs', {
url: '/tabs',
templateUrl: 'templates/tabs.html'
})
$urlRouterProvider.otherwise('/main');
Main.html:
<ion-content>
Hey There
<button class="button button-dark" ng-href="#/tabs">
Click Me
</button>
</ion-content>
Tabs.html:
<ion-tabs class="tabs-balanced">
<ion-tab title="Hey"></ion-tab>
<ion-tab title="There"></ion-tab>
</ion-tabs>
I'm not sure that <ion-tabs> are the right way to go in that case. Their purpose is to act as an abstract state at the root which controls the navigation of the whole app. You can read about them in more detail in an article here
If you want "tabs" at a different place in the application you could consider just using a button or a link that navigates to the right state such as:
<a ui-sref="Your state here"></a>
I have the following structure:
<html ng-app="myApp">
<head>...</head>
<body ng-controller="MainCtrl">
<nav class="side-nav">
...
</nav>
<header>
...
</header>
<main ng-class="navOpen">
<div class="loading-screen" ng-if="!contentLoaded">Loading...</div>
<div class="content" ng-view></div>
</main>
</body>
</html>
MainCtrl handles all "application specific" stuff - navigation (like change the class of a link when route changes), loading screen, hamburger menu being clicked.
Now I want to add transitions between the routes. My idea is that the previous view stays until the contentLoaded variable is set to true. The contentLoaded variable gets set inside each controller; generally after an http request completes. That way I will be able to "blur" the previous content by adding opacity to the loading-screen's background. After content is loaded, the previous view will be switched with the new view and the loading screen will disappear.
Is there a way to tell AngularJS to keep the view until a specific criteria in the controller is met? I am using ngRoute for the routing.
Lets see if I can describe my setup here...
I'm designing an angular app, as of now everything is all one page. Basically, when the user clicks a button, the controller sets which
"<ng-include>"
tag is visible. So my html looks something like this.
<html ng-app= "myApp">
<head>
<!-- header stuff -->
<!-- all the includes and everything -->
</head>
<body>
<div>
<!-- page nav bar, its a lot of html but it works -->
</div>
<!-- content area -->
<div ng-show= "showHome">
<ng-include= "home.html">
</div>
<div ng-show= "showProfile">
<ng-include= "profile.html">
</div>
<!-- etc... -->
</body>
</html>
And then in my controller, I'm just setting the proper "showHome", "showProfile", etc... as appropriate. My question is, this seems like a terrible way to scale, and this is my first attempt at an app like this.
So to reiterate. I want to give the user the appearance of a single page app, while swapping in html templates. Any ideas? Multiple pages would be ok, but I want to keep the same navbar at the top of every page.
I'd use ui-router instead.
It is a popular alternative for ngRoute and supports nested templates really well.
I don't know if my title describe well my problem but, it's what i think happen here. What am trying to do is to add facebook login to my app that i used the sidemenu ionic template and i followed the tutorial ionic facebook integration
It works well no issues on both browser and mobile but, when i tried to show the facebook data profile picture not in the template profile but, in the top of my side menu i got two issues.
First i need to refresh the browser so the picture show.
Second issue i get this alert Facebook error: undefined which is in the profileCtrl
i get this error when i created a div inside of the menu template and sat ng-controller="profileCtrl" here i think the app get a conflict because the APPCtrl is the controller of the menu Template like this:
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
here is the code i added to the menu template to show the picture and the user name in the top of the side menu:
<div ng-controller="ProfileCtrl" class="user-pro">
<img src="http://graph.facebook.com/{{user.id}}/picture?width=100&height=100"/>
<p class="text-center user-name side-btn">{{user.name}}</p>
</div>
and here is the menu template code and how i putted my code in it :
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<ion-content class="has-header side-bg"><!-- sidebar -->
<!-- user profile here -->
<div ng-controller="ProfileCtrl" class="user-pro">
<img src="http://graph.facebook.com/{{user.id}}/picture?width=100&height=100"/>
<p class="text-center user-name side-btn">{{user.name}}</p>
</div><!-- user Profile -->
<ion-list>
<ion-item>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
I wrapped the side menu template with a <div ng-controller="AppCtrl" and do the hierarchy explained here angular.js hierarchy controller guide and SURE i did deleted the controller: 'AppCtrl' from here
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
but it did't work.
sorry for being long.
I'm not sure I can answer all of your issues. I.e. The Facebook undefined error. However I can fix your photo not showing.
When using a binding in the src attribute of an image tag you should instead use ng-src.
Especially when the binding is changed asynchronously.
<img ng-src="http://graph.facebook.com/{{user.id}}/picture?width=100&height=100"/>
Using just src the browser would fetch something like "http://graph.facebook.com/UNDEFINED/picture?width=100&height=100" and when the value changes the browser will not check that and won't fetch the new image. Angular takes care of this for you. I'm guessing on refresh there is some sort of race condition that is being satisfied. Although I'm not familiar with how the Facebook library works.