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>
Related
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!
With angular, I have my index.html setup as follows.
<html><head>...</head>
<body ng-app="someappname">
<header>
<img src="images/hdr_logo.png" alt="...">
</header>
<main>
<!-- this is where the active view will be placed -->
<ui-view></ui-view>
</main>
</body></html>
And I have my ui-router setup as follows.
$stateProvider
.state('index', {
templateUrl: 'index.html',
controller: 'IndexController',
abstract: true
})
.state('index.login', {
url: '/login',
templateUrl: 'partials/login.html',
controller: 'LoginController',
})
Currently, my login.html has nothing but text... simply looks like this.
This is my login page
However, when I run the application I see that my header logo is being displayed twice. Upon further investigation, I can see that my <ui-view></ui-view> actually re-includes the entire index.html again (as well as the text). So there is index.html which has another copy of index.html within the ui-view. My display has the logo displayed twice followed by the text, "This is my login page".
Why is the index.html being included within my ui-view, instead of just the partial?
After much toil and trouble, it seems that problem was to do with the keyword abstract not being functional in the versions that I was using. Since, whether I added or removed abstract the result was the same. However, after I upgraded my angular and ui-router version... everything works!!!
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.
I have an AngularJs app with start up page as index.html, by default the projects view will be displayed and on top of the page I am showing a icon to show the todo items (for the logged-in user) which I am using bootstrap's data-toggle dropdown. The issue is whenever I click the todo link the partial view (todo.html) is not showing. BTW, I am new to the angular world so please forgive me if there is anything silly. Please see the code below:
Index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head></head>
<body>
<a data-toggle="dropdown" class="dropdown-toggle" ui-sref=".todo">
<i class="icon-tasks"></i>
<span class="badge badge-grey">4</span>
</a>
<div ng-view></div>
</body>
app.js
// For any unmatched url, redirect to /projects
$urlRouterProvider.otherwise("/projects");
//
// Now set up the states
$stateProvider
.state('projects', {
url: "/projects",
templateUrl: "/app/views/projects/projects.html",
controller: "projectController"
})
.state('projects.todo', {
url: "/todo",
templateUrl: "/app/views/todo/todo.html"
});
First of all replace ng-view with ui-view in the root template, cause it seems you want to use ui-router instead of ng-router.
Wrap the content of your template files with div of ui-view as a parent element.
/app/views/projects/projects.html
/app/views/todo/todo.html
<div ui-view>
... previously defined content ...
</div>
Let's say your view was
<div class="container">
<div class="page-header">
<h1>Title: {{title}}</h1>
</div>
</div
you need to add ui-view to the div
<div class="container" ui-view>
<div class="page-header">
<h1>Title: {{title}}</h1>
</div>
</div
or wrap your view with div containing ui-view descriptor in case your vie contains several tags.
I cannot show you an example since you did not provide content of view files.
/app/views/projects/projects.html
/app/views/todo/todo.html
The issue is that after fist template applying angular does not see the place to put new template anymore.
ui-router isn't really supposed to be used in this way. To integrate bootstrap with angular you want to look at UI Bootstrap - http://angular-ui.github.io/bootstrap/
Then to achieve your drop down, look at their basic examples. If you want to use separate view files to define your drop down content, you can use <div ng-include="'mycontent.html'"></div>.
ui-router is useful if you have a complex view hierarchy, where you are for example, looking for dynamic loading of children, while keeping parent states static.
In ui-router you defined all of this in the $stateProvider, so there you should define that you have a view that has another view belonging to it, example:
<!-- In index.html the main view that will have all the page views-->
<div id="main" ui-view="main"></div>
<!-- In todo.html with a partial with the dropdown code in dropdown.html -->
<h1> This is a nice todo drop down </h1>
<div id="todoDropDown" ui-view="todoDropDown"></div>
//In your app file
.state('projects.todo', {
url: '/todo',
views: {
'main#': {
templateUrl: '/app/views/todo/todo.html',
controller: 'TodoCtrl'
},
'todoDropDown#projects.todo': {
templateUrl: '/app/views/partials/dropdown.html'
}
}
})
"todoDropDown#projects.todo" This does the magic, it tells that this view has another view inside. And you can add controller to it and all other options you have in ui-router. In this way you can break up as much as possible reusable parts.
(angularJS 1.2.5 & ui-router 0.2.7)
Please help its 4 in the morning and its been 2-3hrs since i'm stuck with this, flipped the code multiple times but cudn't make it run.
In my index.html, I have the following code:
<div class="well sidebar-nav sidebar-slide">
<ul class="nav nav-list" style="font-size:17px">
<li class="nav-header">Demand Type</li>
<li><a ui-sref="add14" data-toggle="tab">ADD-14</a></li>
<li><a ui-sref="cash_purchase" data-toggle="tab">Cash Purchase</a></li>
<li><a ui-sref="local_purchase" data-toggle="tab">Local Purchase</a></li>
</ul>
</div>
<div class="hero-unit" ui-view></div>
In my app.js, I have the following code:
var ODS = angular.module('ODS', ['ui.router','ngAnimate']);
//Define Routing for app
ODS.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to /state1
$urlRouterProvider
.when('/add14', '/add14/create_order')
.when('/cp', '/cp/create_order')
.when('/lp', '/lp/create_order')
.otherwise("/intro");
$stateProvider
.state('intro', {
url: "/intro",
templateUrl: "templates/core/intro.html"
})
.state("add14", {
url: '/add14',
templateUrl: 'templates/core/add14.html'
})
.state("add14.create_order", {
url: "/create_order",
templateUrl: "templates/ADD14/add14.create_order.html"
})
.state("add14.own_demand", {
url: "/own_demand",
templateUrl: "templates/ADD14/add14.own_demand.html"
})
}]);
In my add14.html, I have following code:
<a ui-sref=".create_order">Create</a></button>
<a ui-sref=".own_demand">Own Demand</a>
<div ui-view></div>
In my add14.create_order.html & add14.own_demand.jsp i have sample code to print.
Thank You for your patience!
Did you ever get this figured out? I'm running into a similar problem - I find that using <a href='#/url'> seems to work, but I can't access my states via ui-sref either. I've also noticed that the rendered html doesn't auto-generate an href corresponding to the state as the documentation said it would. Fairly confused why it's not working myself.
Heads up: try to make sure you add the "ng-app" directive to your body tag (in your main template), otherwise, it seems angular-ui-router stuff, such as the ui-sref directive, will not be called.
Example:
<html ng-app="myApp">...</html><!-- Nope. Don't do this -->
<html>...<body ng-app="myApp"></body></html><!-- Do this instead -->
You are using both $stateProvider and $urlRouterProvider. try just using $stateProvider instead of both as that could be where your error is. And you don't have controllers for each of your states. Hope this helps you.