I'm begining with ionic framework.
I've got some problem,
I think I've already done all thing needed well
inn app.js
angular.module('starter', ['ionic'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('home', {
url: '/home',
templateUrl: 'views/home.html'
}).state('about', {
url: '/about',
templateUrl: 'views/about.html'
});
$urlRouterProvider.otherwise("/home.html");
});
in index.xhtml
<body ng-app="starter">
<!--<ion-nav-bar class="bar-positive"></ion-nav-bar>-->
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
in home.html
<ion-view view-title="home">
<ion-content>
<p>
<a ui-sref="about">About</a>
</p>
</ion-content></ion-view>
when I look at the firebug, I can see the answer but the ion-nav-view doen't render the ion-view defined in home page
When loading a view, you have to use the property set in the url property, not the path of the template. SO you have to change /home.html for /home.
$urlRouterProvider.otherwise("/home");
Related
In index.html I have included these javascripts:
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
And then I have:
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
In app.js I have this:
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('view.splash', {
url: '/',
views: {
'view.splash': {
templateUrl: 'templates/view-splash.html',
controller: 'SplashCtrl'
}
}
})
.state('view.login', {
url: '/login',
views: {
'view.login': {
templateUrl: 'templates/view-login.html',
controller: 'LoginCtrl'
}
}
});
$urlRouterProvider.otherwise('/');
});
And finally in controllers.js I have:
angular.module('starter.controllers', [])
.controller('SplashCtrl', function($scope) {
$scope.appname = 'Wetters';
})
.controller('LoginCtrl', function($scope) {
$scope.whereami = 'on login';
})
Now, splash.html looks like this:
<ion-view view-title="Splash">
<ion-content>
This is splash
</ion-content>
</ion-view>
However, when I go to the app with browser, nothing is displayed. The page is empty.
I don't really understand whats wrong.
On ionic-page they don't write much about blank pages, focus is most on tab or menu apps.
What should you put inside index.html when you want to view multiple views, one at the time? I think the problem could be Im using:
<ion-nav-view></ion-nav-view>
Maybe I should put something else in index, but I really dont know what to put there.
I make a example for you:
Splash and Login example
If you need some help, just call!
Here is the code, if you cannot see in codepen:
HTML
<html ng-app="ionicApp">
<title>Side Menus</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<ion-nav-view></ion-nav-view>
<script id="templates/splash.html" type="text/ng-template">
<ion-view view-title="Splash" ng-controller="SplashCtrl">
<ion-content>
Splash
</ion-content>
</ion-view>
</script>
<script id="templates/login.html" type="text/ng-template">
<ion-view view-title="Login" ng-controller="LoginCtrl">
<ion-content>
Login
</ion-content>
</ion-view>
</script>
JS
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('splash', {
url: "/",
templateUrl: "templates/splash.html"
})
.state('login', {
url: "/login",
templateUrl: "templates/login.html"
});
$urlRouterProvider.otherwise("/");
})
.controller('SplashCtrl', function($scope, $state, $timeout) {
$timeout(function() {
$state.go('login');
}, 3000);
})
.controller('LoginCtrl', function($scope) {
});
I am creating an App in ionic but I am stuck in routing issues. Currently I have an app view with a side menu and on Home page I have two tabs Tab 1 and Tab 2 which have different UI Views tab1.html & tab2.html
Tabs Code in home.html
<ion-tabs class="tabs-striped tabs-top tabs-background-positive tabs-color-light hp" tabs-style="tabs-icon-top" tabs-type="tabs-positive" style="top: 60px !important;" animation="slide-left-right">
<!-- Dashboard Tab -->
<ion-tab title="Tab 1" href="#/home/tab1">
<ion-nav-view name="tab1-content"></ion-nav-view>
</ion-tab>
<!-- Chats Tab -->
<ion-tab title="Tab 2" href="#/home/tab2">
<ion-nav-view name="tab2-content"></ion-nav-view>
</ion-tab>
</ion-tabs>
tab1.html and tab2.html code:
<ion-view view-title="Tab 1">
<ion-content overflow-scroll="true" padding="false" class="has-header">
Tab 1 Content
</ion-content>
</ion-view>
<ion-view view-title="Tab 2">
<ion-content overflow-scroll="true" padding="false" class="has-header">
Tab 2 Content
</ion-content>
</ion-view>
Routing Code in 'routing.js'
.state('menu.home', {
url: '/page21',
views: {
'side-menu21': {
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
}
}
})
.state('menu', {
url: '/side-menu21',
templateUrl: 'templates/menu.html',
abstract:true
})
.state('menu.about', {
url: '/page10',
views: {
'side-menu21': {
templateUrl: 'templates/about.html',
controller: 'settingsCtrl'
}
}
})
... and so on
Issue:
When I navigate Home from menu or from login page (which is separate) I didn't see tabs' content. Can anyone help me what's wrong?
The page url seems like: http://localhost/testapp/#/side-menu21/page21
Your assistance in this issue will be appreciated.
Thanks!
I think you should add abstract property in home tab state :
.state('menu.home', {
url: '/page21',
abstract: true,
views: {
'side-menu21': {
templateUrl: 'templates/home.html',
controller: 'homeCtrl'
}
}
})
you need 2 abstract states, one for a side menu, and one for Tabs itself, if you can create a plunkr/codepen of what you have I could be able to help you.
not sure why i am having such a hard time making tabs work in the ionic app..
Here is the html:
<body>
<ion-nav-bar class="bar-positive"> </ion-nav-bar>
<ion-tabs class="tabs-positive tabs-icon-only">
<ion-tab title="Home" icon-on="ion-ios-home" icon-off="ion-ios-home-outline" ui-sref="home">
<ion-nav-view name="home"></ion-nav-view>
</ion-tab>
</ion-tabs>
</body>
Here is the routing:
var app = angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
views: {
home: {
template: 'home.html',
}
}
});
$urlRouterProvider.otherwise('/home');
});
When I run this simple app, I expect the tab to display a title and icon.. but that's not happening..
There seems to be no explicit error messages which makes things worse.
http://plnkr.co/edit/K1nAtL
Just replace
<ion-tabs class="tabs-positive tabs-icon-only">
With
<ion-tabs class="tabs-positive tabs-icon-top">
then add the ionic font it will work.
If click any ion-item it open the desired page but if i click device back button it close the app rather than going back to previous page in android:
This is my ionic side menu:
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button></ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon icon ion-android-menu" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-positive">
<h1 class="title"></h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close ng-click="login()">
Login
</ion-item>
<ion-item menu-close ui-sref="app.search">
Search
</ion-item>
<ion-item menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item menu-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Here is app.js :
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.search', {
url: '/search',
views: {
'menuContent': {
templateUrl: 'templates/search/default.html'
}
}
})
.state('app.search-form', {
url: '/search-form',
views: {
'menuContent': {
templateUrl: 'templates/search/search-form.html'
}
}
})
One solution I found:
$ionicHistory.nextViewOptions({
disableBack: true,
historyRoot: true
});
So when you click a button and going to next page, this will will disable back button.
The default behaviour of the back button is as follows:
Go back in history - if the history stack is empty -> exit the app.
So you should check the $state you are in, when you tap the hardware back button.
With the following code (placed in the run function of your module) you can overwrite the default behaviour. For example you can disable the app exit like this:
$ionicPlatform.registerBackButtonAction(function (event) {
if($state.current.name=="app.home"){
navigator.app.exitApp(); //<-- remove this line to disable the exit
}
else {
navigator.app.backHistory();
}
}, 100);
See the documentation for $ionicPlatform.
It is the menu-close attribute in the side menu that clears the history. You could experiment by replacing it with menu-toggle="left". That will still close the side bar but keep the history.
I ended up overriding the behaviour for the HW back key like below.
It sends the user to the starting view before exiting the app when pressing back. Note that I still use the menu-close attribute in the side menu. Also note I happen to store the start url in window.localStorage["start_view"] because it can change in my app. Hope it can help/inspire someone else with this problem.
$ionicPlatform.registerBackButtonAction(function(event) {
if ($ionicHistory.backView() == null && $ionicHistory.currentView().url != window.localStorage["start_view"]) {
// Goto start view
console.log("-> Going to start view instead of exiting");
$ionicHistory.currentView($ionicHistory.backView()); // to clean history.
$rootScope.$apply(function() {
$location.path(window.localStorage["start_view"]);
});
} else if ($ionicHistory.backView() == null && $ionicHistory.currentView().url == window.localStorage["start_view"]) {
console.log("-> Exiting app");
navigator.app.exitApp();
} else {
// Normal back
console.log("-> Going back");
$ionicHistory.goBack();
}
}, 100);
Import NavController in your app.component.ts and use below code.
import { NavController} from '#ionic/angular';
constructor( private nav: NavController ) {this.initializeApp();}
ngOnInit() {
this.plateform.backButton.subscribe(res => {
this.nav.goBack('');
});
}
One solution might be:
$ionicHistory.nextViewOptions({
disableBack: true,
historyRoot: true
});
This prevents the event from spreading, otherwise it did not work.
Code by: https://stackoverflow.com/users/5378702/andre-kreienbring
$ionicPlatform.registerBackButtonAction(function (event) {
if(condition){
navigator.app.exitApp(); //<-- remove this line to disable the exit
}
else {
navigator.app.backHistory();
}
throw "PreventBackButton";
}, 100);
I'm developing an App with Ionic Framework, and I only want to show a side-menu in some concrete views, but not in every view.
I' have my menu.html file:
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
</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="mymenu">
<div id="menu-list">
<ion-list class="list">
<ion-item item-type="item-icon-left" nav-clear menu-close href="#">
<i class="icon ion-home"></i><span>Menu Item</span>
</ion-item>
...
</ion-list>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
My index.html's body tag looks exactly like this:
<body ng-app="myApp">
<ion-nav-view></ion-nav-view>
</body>
And the JavaScript code where I set up my App states:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.page1', {
url: "/page1",
views: {
'menuContent' :{
templateUrl: "templates/page1.html"
}
}
})
.state('app.page2', {
url: "/page2",
views: {
'menuContent' :{
templateUrl: "templates/page2.html"
}
}
})
// etc...
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/page1');
});
page1.html and page2.html both contain the following structure:
<ion-view title="something">
<ion-content>
... // here comes the html content of the page
</ion-content>
</ion-view>
What can I actually do to only show my side-menu (menu.html) on page1.html and not on page2.html?? Is there anything I'm missing??
Is there a way of inserting the menu.html content only on those pages I want it to appear and forgetting about creating the state that uses it as templateUrl?
The reason why your all your pages have side menu is because you 'app' state as their parent state. When a state is activated, its templates are automatically inserted into the <ion-view> of its parent state's template. If it's a top-level state, because it has no parent state then its parent template is index.html. The app state has the side menu in it.
Your code should look like this:
config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
//this state has the 'app' state (which has the sidemenu) as its parent state
.state('app.page1', {
url: "/page1",
views: {
'menuContent' :{
templateUrl: "templates/page1.html"
}
}
})
//this state has no parent, so it uses 'index.html' as its template. The index page has no
//sidemenu in it
.state('page2', {
url: "/page2",
templateUrl: "templates/page2.html"
}
})
///more code here
});
Check out https://github.com/angular-ui/ui-router/wiki
if your problem is simple , use
onExit: function(){
angular.element(document.querySelector('#menuAPP')).removeClass('hidden');
}
into state
just add hide-nav-bar=" true " in ion-view
<ion-view title="Login" **hide-nav-bar="true"** id="page" class=" "> </ion-view>