I am having trouble accommodating a header in my app. the class="has-header" is apparently outdated and I need help finding an alternative.
Thanks.
Feel free to correct anything else as well.
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
<script>
var Hours = angular.module('Hours', ['ngRoute']);
Hours.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: '1.html',
}).
when('/dininghalls', {
templateUrl: '2.html',
}).
when('/fitnesscenters', {
templateUrl: '3.html'
}).
when('/officehours', {
templateUrl: '4.html'
}).
otherwise({
redirectTo: '/'
});
}]);
</script>
</head>
<body ng-app="Hours">
<div ng-view=""></div>
</body>
</html>
1.html:
<ion-header-bar align-title="left" class="bar-positive">
<div class="bar bar-header bar-stable">
<h1 class="title">Hours</h1>
</div>
</ion-header-bar>
<ion-content>
<a href="#/4" class="button button-block button-positive">
Hours
</a>
<a href="#/2" class="button button-block button-positive">
Halls
</a>
<a href="#/3" class="button button-block button-positive">
Fitness
</a>
</ion-content>
You need to change <ion-content> to <ion-content class="has-header">
........
Add has-header="true" to your ion-content (looks like that may be missing from the docs?). You also shouldn't need class="header-bar" in your <ion-header-bar>.
update:
You need to inject ionic as a dependency in your module Hours.
Related
it's my first App that I'm writing with Ionic Framework and I came across a problem with UI router. It's quite simple survey app, I just want someone - after selecting face from survey to answer some additional questions. I need questions to be a child of survey because of resolve data. Problem is that when I want to go to questions state from it's parent survey only URL changes and nothing happens. No error, just nothing. It seems really easy, just replace what view with another but somehow I can get it working. Can you please help me, I'm struggling whole day now.
My routes:
'use strict';
angular.module('main', [
'ionic',
'ngCordova',
'ui.router',
// TODO: load other modules selected during generation
])
.config(function ($stateProvider, $urlRouterProvider) {
// ROUTING with ui.router
$urlRouterProvider.otherwise('/survey');
$stateProvider
// this state is placed in the <ion-nav-view> in the index.html
.state('main', {
url: '/main',
template: '<ion-view view-title="main"></ion-nav-view>',
// templateUrl: 'main/templates/<someTemplate>.html',
// controller: 'SomeCtrl as ctrl'
})
.state('survey', {
url: '/survey',
templateUrl: 'main/templates/survey.html',
controller: 'SurveyCtrl',
resolve: {
questions: function($stateParams, $http) {
return $http.get('http://localhost:3100/api/surveys/new').then(function(response){
return response.data;
});
}
}
})
.state('survey.question', {
url: '/questions',
views: {
'questions': {
templateUrl: 'main/templates/questions.html',
controller: 'QuestionsCtrl',
}
},
params: {
selectedFace: null
}
})
});
Index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<!-- ionic meta tags -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<!-- custom meta tags -->
<meta name="format-detection" content="telephone=no"> <!-- no auto telephone linking -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:700" rel="stylesheet">
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- can be saved to home screen on ios -->
<title>Store Satisfaction</title>
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css main/styles/app.css -->
<!-- inject:css -->
<link rel="stylesheet" href="main/styles/main.css">
<!-- endinject -->
<!-- endbuild -->
</head>
<body ng-app="storeSatisfaction">
<!-- the current view will be rendered in the <ion-nav-view> directive -->
<ion-nav-view></ion-nav-view>
<!-- will be a 404 during development -->
<script src="cordova.js"></script>
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/ionic/release/js/ionic.js"></script>
<script src="bower_components/ionic/release/js/ionic-angular.js"></script>
<script src="bower_components/ngCordova/dist/ng-cordova.js"></script>
<script src="bower_components/angular-dynamic-locale/src/tmhDynamicLocale.js"></script>
<script src="bower_components/angular-translate/angular-translate.js"></script>
<script src="bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
<script src="bower_components/localforage/dist/localforage.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js scripts/app.js -->
<!-- inject:js -->
<script src="main/main.js"></script>
<script src="main/controllers/survey-ctrl.js"></script>
<script src="main/controllers/questions-ctrl.js"></script>
<script src="main/constants/config-const.js"></script>
<script src="app.js"></script>
<!-- endinject -->
<!-- endbuild -->
</body>
</html>
survey.html
<ion-view title="survey">
<!-- do you want padding? -->
<ion-content>
<!-- content goes here -->
<a ui-sref="main">test</a>
<div class="main-image polygon">
<div class="main-text">
<p class="sub-header">smth</p>
<p class="main-header">smth</p>
</div>
</div>
<ion-list>
<ion-item class="item item-icon">
<a><img src="main/assets/images/smile1.png" class="smiley-face" ng-click="proceedSurvey('very_good', 'positive')"></a>
</ion-item>
<ion-item class="item item-icon">
<img src="main/assets/images/smile2.png" class="smiley-face" ng-click="proceedSurvey('good', 'positive')">
</ion-item>
<ion-item class="item item-icon">
<img src="main/assets/images/smile3.png" class="smiley-face" ng-click="proceedSurvey('neutral', 'negative')">
</ion-item>
<ion-item class="item item-icon">
<img src="main/assets/images/smile4.png" class="smiley-face" ng-click="proceedSurvey('bad', 'negative')">
</ion-item>
<ion-item class="item item-icon">
<img src="main/assets/images/smile5.png" class="smiley-face" ng-click="proceedSurvey('very_bad', 'negative')">
</ion-item>
</ion-list>
<div class="footer-text">
Pomóż nam przekraczać nasze granice
</div>
<ui-view name="questions"></ui-view>
</ion-content>
</ion-view>
SurveyCtrl.js
'use strict';
angular.module('main')
.controller('SurveyCtrl', function ($scope, $state) {
$scope.proceedSurvey = function(rate, type) {
var params = {rate: rate, type: type};
$state.go('survey.question', {selectedFace: params})
}
});
Quite a simple question, but still I'm struggeling with it. Basically the idea was to have a login page that works without any ion-side-menus. After logging in the ion-side-menus will be defined as abstract and it will work as in the starter example (see demo).
I've created a demo to demonstrate what's not working: demo
These are the files:
index.html
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<title></title>
<link data-require="ionic#1.0.0-beta.1" data-semver="1.0.0-beta.1" rel="stylesheet" href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="ionic#1.0.0-beta.1" data-semver="1.0.0-beta.1" src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content class="has-header"></ion-content>
</ion-pane>
</body>
</html>
app.js
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
// routing
$stateProvider
// start
.state('start', {
url: '/',
templateUrl: 'start.html',
controller: 'DashCtrl'
})
$urlRouterProvider.otherwise('/');
});
start.html
<ion-view>
<ion-content scroll="false">
<div class="intro padding row row-center">
<div class="col">
<h1>Hello World</h1>
</div>
</div>
</ion-content>
</ion-view>
controllers.js
angular.module('starter.controllers', [])
.controller('DashCtrl', function($scope) {
})
The content from start.html needs to show up when openen the / but nothing is there. I guess I#m doing something wrong in index.html propably using the wrong tags.
Simple fix:
<ion-nav-view class="has-header"></ion-nav-view>
Instead of <ion-content> inside index.html.
Update plunker: http://plnkr.co/edit/Qdw2aAYM8UxI9nS71hkl?p=preview
Hi I'm new in creating hybrid applications using ionic framework
I have created my app's sign-in page using blank starter and it works well
the problem arises when i try to navigate to next page (i.e)by clicking sign-in button
app.js file
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "app/layout/menu.html",
controller: 'AppCtrl'
})
.controller('AppCtrl',function($scope){
})
$urlRouterProvider.otherwise('/app/layout');
});
index.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src=app/layout/app1.js></script>
<script src=js/controllers.js></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-content>
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model="user.username">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="user.password">
</label>
</div>
<div class="padding">
<button nav-clear class="button button-block button-positive" ng-click="LogIn(user)">
Sign-In
</button>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="ion-balanced">
</ion-nav-bar>
<ion-nav-view name="Documents"</ion-nav-view>
<script src="app/layout/menu.html" type="text/ng-template"></script>
</ion-pane>
</div>
</ion-content>
</ion-pane>
<script>//<![CDATA[
document.write('<script src="//' + (location.hostname || 'localhost') + ':35729/livereload.js?snipver=1"><\/script>')
//]]></script>
</body>
</html>
Remove this line: angular.module('ionicApp', ['ionic'])
Your reference to ionicApp seems correct.
angular.module('ionicApp', ['ionic'])
One thing i noticed, you are missing a route for '/app/layout
This may help you. http://codepen.io/ionic/pen/CbBsA
I couldn't make a simple AngularJS to work on my ionic application. It is saying the function got undefined.
First these are the essential files for my project
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/glsmile.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/main.js"></script>
</head>
<body ng-app="">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">GL Smile Filter</h1>
</ion-header-bar>
<ion-content>
<div id="wrapper">
{{1+1}}
<div ng-controller="StoreController">
</div>
<select>
<option selected>Choose your region</option>
<option>Mississsauga</option>
<option>North York</option>
</select>
<br>
<select>
<option selected>School near by</option>
<option>University Of Toronto</option>
<option>Waterloo</option>
<option>Sheridan College</option>
</select>
<input type="range" name="rangePrice" min="0" max="600" id="rangePrice"
oninput="showVal(this.value)" onchange="showVal(this.value)">
<p div style="display:inline; float:left;">$0</p> <p div style="display:inline; float:right;">$600</p>
<div style="clear: both"></div>
<span id="amount">Amount:</span> <span id="valBox">$300</span>
<button class="button button-small button-royal" id="buttonGo" style="float:right;">
Go
</button>
</div>
<i class="icon ion-star"></i>
</ion-content>
</ion-pane>
<script>
function showVal(newVal){
document.getElementById("valBox").innerHTML="$" + newVal;
}
</script>
</body>
</html>
App.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
});
My angular.js file
function StoreController() {
alert('Its working!');
}
So when I did this to test my function,
it says that the StoreController function is undefine... I hope someone could help!
You need to include the js file in your html below where you have included your app.js
<script src="js/angular.js"></script>
All the js scripts that you write, needs to included in the html to work, same goes with css.
I'm following some of the examples from the website and my current html is:
<!DOCTYPE html>
<html ng-app="Test">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view>
<!-- Center content -->
</ion-nav-view>
<script type="text/ng-template" id="main.html">
<ion-view view-title="Home">
<ion-content >
<p>
Test
</p>
</ion-content>
</ion-view>
</script>
</body>
</html>
And the js:
var app = angular.module('Test', ['ionic']);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/')
$stateProvider.state('index', {
url: '/',
templateUrl: 'main.html',
controller: 'TestCtrl'
})
})
app.controller('TestCtrl', function($scope) {
})
Now the documentation says the view-title="Test" should fill the title in ion-navbar. But it doesn't seem to work. Anyone knows what is going wrong?
It appears that it can be used in both ways,
<ion-view view-title="My Page">
or
<ion-nav-title>
{{page.title}}
</ion-nav-title>
as per latest version of ionic.
http://ionicframework.com/docs/api/directive/ionView/
http://ionicframework.com/docs/api/directive/ionNavTitle/
This should work,
<ion-view>
<ion-nav-title> Your title here
</ion-nav-title>
</ion-view>
Switch to using <ion-nav-title>
<ion-view>
<ion-nav-title>{{navTitle}}</ion-nav-title>
<ion-content overflow-scroll="true" padding="true" class="has-header">
<div>
<p>The opening crawl would go here.</p>
</div>
</ion-content>
click to read more
Ionic is continuously working and they would updating the directives in upcoming releases and I assume that you are using old version.
As per the 1.0.0-beta.13 doc, Attribute should be title instead of view-title
Change the following line
<ion-view view-title="Home">
to
<ion-view title="Home">
Old version Doc: http://ionicframework.com/docs/1.0.0-beta.13/api/directive/ionView/
But in latest version, it should be view-title
Latest doc: http://ionicframework.com/docs/api/directive/ionView/