in my ionic app, I do not need menu or tabs, just a blank ui-view that renders the home view. but it shows a blank page.
index.html
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
app.js
angular.module('starter', ['ionic','starter.controllers'])
.run( /**/ )
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '',
abstract: true,
template: '<ui-view/>',
controller: 'AppCtrl'
})
.state('app.home',{
url:'/home',
templateUrl:'templates/home.html',
controller:'homeCtrl'
})
});
home.html
<ion-view view-title="home">
<ion-content>
<h1>This is the Home page</h1>
</ion-content>
</ion-view>
why does the home.html not render into the abstract view?
the ionic server response:
Request URL:http://localhost:8100/templates/home.html
Request Method:GET
Status Code:304 Not Modified
the chrome dev tools, the only tag which renders in app
<ion-nav-view class="view-container" nav-view-transition="android"></ion-nav-view>
Related
My problem is, if I use the back button nothing happends. So the idea behind my code is, I want to have on different tabs different views in the side menu. This works without problems. But if I navigate from /groups to /group/:groupId/:groupName the back button is comming up but if i click on it, it doesn't navigate back to /groups, nothing happends.
Index.html
<body ng-app="JasserApp">
<div class="login-main-container" ng-show="showLogin" ng-controller="LoginCtrl">
<h5>JAPP</h5>
<div class="login-main-button-container social-wrap b">
<button class="facebook" ng-click="facebookSignIn()">Login with Facebook</button>
</div>
</div>
<!--
The nav bar that will be updated as we navigate between views.
-->
<div ng-show="!showLogin" ng-controller="MainCtrl">
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</div></body>
Tabs.html (I think this is the file with problems)
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-navicon" ng-click="toggleRight()"></button>
</ion-nav-buttons>
</ion-nav-bar>
<!-- Main content, usually <ion-nav-view> -->
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!-- Dashboard Tab -->
<ion-tab title="Groups" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/groups">
<ion-nav-view name="tab-groups"></ion-nav-view>
</ion-tab>
<!-- Chats Tab -->
<ion-tab title="Account" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats">
<ion-nav-view name="tab-chats"></ion-nav-view>
</ion-tab>
<!-- Account Tab -->
<!--<ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>-->
</ion-tabs>
</ion-side-menu-content>
<ion-side-menu side="right">
<ion-nav-view name="sideMenu"></ion-nav-view>
</ion-side-menu>
</ion-side-menus>
Routing for the views
.config(function ($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html',
controller: 'TabCtrl'
})
// Each tab has its own nav history stack:
.state('tab.groups', {
url: '/groups',
views: {
'tab-groups': {
templateUrl: 'templates/tab-groups.html',
controller: 'GroupsCtrl'
},
'sideMenu':
{
templateUrl: 'templates/groups-sideMenu.html',
}
}
})
.state('tab.group-detail', {
url: '/group/:groupId/:groupName',
views: {
'tab-groups': {
templateUrl: 'templates/group-detail.html',
controller: 'GroupsDetailCtrl'
},
'sideMenu':
{
templateUrl: 'templates/groupDetail-sideMenu.html',
}
}
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/groups');
});
I hope the question is clear.
best regards
Im using Ionic to build an application.
Im new to Ionic and i would like some help in setting up my view.
my app contains an abstract main view which contains the main header
<script type="text/ng-template" id="main-view">
<ion-header-bar class='bar bar-header bar-stable' align-title="center">
<h3 class="title">Title</h3>
</ion-header-bar>
<ion-nav-view name="View-A"></ion-nav-view>
<ion-nav-view name="View-B"></ion-nav-view>
</script>
and another view which supposed to be like a split screen. basicly i`m trying to show 2 views on the same page (with different controllers)
this is my config:
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
// setup an abstract state for the tabs directive
.state('main', {
url: '/main',
abstract: true,
templateUrl: 'main-view'
}
})
.state('main.inner', {
url: '/inner',
views: {
'View-A': {
templateUrl: "View-A",
controller: 'ViewACtrl'
},
'View-B': {
templateUrl: 'View-B',
controller: 'ViewBCtrl'
}
}
});
$urlRouterProvider.otherwise('/main/inner');
})
The views look like this
<script type="text/ng-template" id="View-A">
<ion-view>
<-- DATA -->
</ion-view>
</script>
<script type="text/ng-template" id="View-B">
<ion-view>
<-- DATA -->
</ion-view>
</script>
The Problem is, that only the second view is shown.
what am i doing wrong?
Try to replace
<ion-nav-view name="View-A"></ion-nav-view>
<ion-nav-view name="View-B"></ion-nav-view>
with
<div ui-view="View-A"></div>
<div ui-view="View-B"></div>
EDIT
There is an option to use this library. Add 'ionicMultipleViews' to angular.module and it should work.
I'm using the Ionic framework and I have a tabbed interface which uses routing with templates. For some reason no matter what URL I put into the $location.path it doesn't route to the correct place. I'm using the same URL I've been using before and I've never run into any problems so I don't understand why its not working.
Here is my tabs.html (Settings tab is not working):
<ion-tabs ng-controller = "tabs" class="tabs-icon-top tabs-color-active-positive">
<!-- Articles Tab -->
<ion-tab title="Articles" icon-off="ion-ios-paper-outline" icon-on="ion-ios-paper" href="#/tab/article">
<ion-nav-view name="tab-article">
</ion-nav-view>
</ion-tab>
<!-- Closets Tab -->
<ion-tab title="Closet" icon-off="ion-ios-briefcase-outline" icon-on="ion-ios-briefcase" href="#/tab/closet">
<ion-nav-view name="tab-closet"></ion-nav-view>
</ion-tab>
<!-- Settings Tab -->
<ion-tab title="Settings" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" on-select = "redirect()" ><!--href="#/tab/settings">-->
<ion-nav-view name="tab-settings"></ion-nav-view>
</ion-tab>
</ion-tabs>
Here is my controller (The redirect function gets called when the settings tab is selected):
.controller('tabs', function($scope, Settings, $rootScope, $location, $window) {
$scope.redirect = function() {
if($rootScope.loggedOn) {
console.log("ASSDA");
$window.location.href = "#/tab/logIn";
// $location.path("#/tab/logIn");
}
else {
$window.location.href = "#/tab/logIn";
// $location.path("#/tab/logIn");
}
}
});
As you can see i've tried both $window.location.href and $locaion.path - both didn't work. When the Settings tab is selected it just defaults to the article tab. Once your on the articles page and you click back onto settings it defaults back to the article page but this time you get a blank page. It is hitting my console.log("ASSDA") so the if statement is returning true.
Here is how my routes are set up:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.article', {
url: '/article',
views: {
'tab-article': {
templateUrl: 'templates/tab-article.html',
controller: 'articlesController'
}
}
})
.state('tab.closet', {
url: '/closet',
views: {
'tab-closet': {
templateUrl:'templates/tab-closet.html',
controller: 'closetController'
}
}
})
.state('tab.settings', {
url: '/settings',
views: {
'tab-settings': {
templateUrl: 'templates/tab-settings.html',
controller: 'settingsController'
}
}
})
.state('tab.login', {
url: '/login',
templateUrl: 'templates/tab-login.html',
controller: 'settingsController'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/article');
});
app.js
var app = angular.module('ionicApp', ['ionic'])
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/tab/article");
$stateProvider
.state('tab', {
url: '/tab',
templateUrl: 'tab.html',
abstract: true
}).state('tab.article', {
url: '/article',
views: {
'tab-article': {
templateUrl: 'templates/tab-article.html',
controller: 'articlesController'
}
}
})
.state('tab.closet', {
url: '/closet',
views: {
'tab-closet': {
templateUrl: 'templates/tab-closet.html',
controller: 'closetController'
}
}
})
.state('tab.settings', {
url: '/settings',
views: {
'tab-settings': {
templateUrl: 'templates/tab-settings.html',
controller: 'settingsController'
}
}
})
})
.controller('articlesController', function($scope) {})
.controller('closetController', function($scope) {})
.controller('settingsController', function($scope) {})
Add codes in index.html
<ion-nav-bar class="bar-energized nav-title-slide-ios">
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="tab.html" type='text/ng-template'>
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<ion-tab title="Articles" icon-off="ion-ios-paper-outline" icon-on="ion-ios-paper" ui-sref="tab.article">
<ion-nav-view name="tab-article">
</ion-nav-view>
</ion-tab>
<ion-tab title="Closet" icon-off="ion-ios-briefcase-outline" icon-on="ion-ios-briefcase" ui-sref="tab.closet">
<ion-nav-view name="tab-closet"></ion-nav-view>
</ion-tab>
<ion-tab title="Settings" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" ui-sref="tab.settings">
<ion-nav-view name="tab-settings"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id='templates/tab-article.html' type='text/ng-template'>
<ion-view title="Articles Page">
<ion-content>
Articles page
</ion-content>
</ion-view>
</script>
<script id='templates/tab-closet.html' type='text/ng-template'>
<ion-view title="Closet Page">
<ion-content>
Closet page
</ion-content>
</ion-view>
</script>
<script id='templates/tab-settings.html' type='text/ng-template'>
<ion-view title="Settings Page">
<ion-content>
Settings page
</ion-content>
</ion-view>
</script>
I figured this out, I actually needed to add another hidden login tab in my tabs.html. I guess it was looking for a login tab which didn't exist - adding it to tabs.html fixed it. So it would be:
<ion-tab title="LogIn" hidden="true">
<ion-nav-view name="tab-logIn"></ion-nav-view>
</ion-tab>
I want to build a hybrid mobile app with Ionic. Here is my first trial via plunker. As you can see, my plunker shows a blank page. I did inspect what's the problem, but still not found. My goal is to create a login page in first time my app starts, then users will be redirected into home-page.html. Since it's just example, I don't want any authentication code, I only need to have all those route/links work well.
Please take a look in my index.html, if I replace all those code within ...... with a normal HTML tags, it's displaying as normal.
Head section:
<script src="http://code.ionicframework.com/1.1.1/js/ionic.min.js"></script>
<script src="http://code.ionicframework.com/1.1.1/js/ionic.bundle.min.js"></script>
<link href="http://code.ionicframework.com/1.1.1/css/ionic.min.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet"/>
<script src="app.js"></script>
Body section
<script id="templates/login.htm" type="text/ng-template">
<ion-view ng-controller="LoginCtrl">
<ion-content>
<h1>Login page</h1>
<button type="button" class="btn btn-default" ng-click="logIn()">Login Press</button>
</ion-content>
</ion-view>
</script>
<script id="templates/home-page.htm" type="text/ng-template">
<ion-view>
<ion-content>
<h1>Home Page</h1>
</ion-content>
</ion-view>
</script>
In my app.js, I defined two states like this:
var app = angular.module('ionicApp', ['ionic']);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login', {
url: "/login",
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
.state('home', {
url: "/home",
templateUrl: 'templates/home-page.html'
});
});
app.controller('LoginCtrl', function($scope, $state, $location) {
$scope.logIn = function() {
//$state.go('/home');
alert('Clicked');
};
});
Any solution will be appreciated. Thanks.
not sure why but it seams that your ng-templates are not found, you are getting 404 on 'templates/login.html'. When you are using $stateProvider you need to put ui-view to show/display your content. I have modify your plunker a little bit, move templates to a separate files and add ui-view, all it's working fine now, please check here.
My app doesnot need any tab .Can i create a app without any tab using onic framework? But page will navigate on click of buuton.I have to first display a login page then on login i would want it to display list of items on click of it edit page is displayed.How can it be done?I have tried below code
index.html
<body ng-app="starter">
<ion-nav-view name="login"></ion-nav-view>
<ion-nav-view name="home"></ion-nav-view>
</body>
Then
angular.module('starter', ['ionic','starter.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
views: {
'login': {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
}
}
})
$urlRouterProvider.otherwise('/login');
});
Then in login.html
<ion-view title="Login">
<ion-content class="has-header padding">
login button and other inputs
</ion-content>
</ion-view>
Now on login home page should be displayed can anyone suggest how to route
I came here for the same question. Now I have the answer.
index.html:
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
app.js:
app = angular.module('starter', ['ionic']);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'login.html'
})
.state('home', {
url: '/home',
templateUrl: 'home.html'
});
$urlRouterProvider.otherwise('/login');
});
also, make sure you define your templates home and login:
<script type="text/ng-template" id="home.html">
<p>This is home.</p>
</script>
<script type="text/ng-template" id="login.html">
<button ng-click="logUserIn()">Log me in!</button>
</script>
and for dynamic interaction, you can use $state in your controller:
app.controller('AppCtrl', function($scope, $state) {
$scope.logUserIn = function() {
$state.go('home');
}
});
Hope it helps. Cheers!