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/
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})
}
});
I have gone through many answers, but nothing worked for me. I have a simple .html file and ionic content just does not scroll.
<!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">
-->
<script src="js/platformOverrides.js"></script>
<script src="scripts/angular-resource.min.js"></script>
<!-- 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>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/angular-sanitize.min.js"></script>
<script src="scripts/angular-ui-router.js"></script>
<script src="scripts/angular-resource.js"></script>
<script src="scripts/lodash.min.js"></script>
<script src="js/app.js"></script>
<script src="js/appController.js"></script>
</head>
<body ng-app="app" ng-controller="appController">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-view>
<ion-content scroll="true">
<div class="scroll">
<a ng-repeat="item in items" class="item" href="#">
<h2>{{item.name}}</h2>
</a>
</div>
</ion-content>
</ion-view>
</ion-pane>
</body>
</html>
Above, $scope.items is being fetched from some webservice. Everything renders fine but it just does not scroll.
I am using Visual studio 'Ionic Blank Template' if that matters. I have configured Cordova correctly and rest all solutions just work fine.
Remove the class="scroll" from the div container, scroll="true" from ion-content and add overflow-scroll="true" . The required classes will be added by ionic on the elements. You don't need to add that explicitly
<ion-view>
<ion-content overflow-scroll="true">
<div class="list">
<a ng-repeat="item in items" class="item" href="#">
<h2>{{item.name}}</h2>
</a>
</div>
</ion-content>
</ion-view>
Update: The codepen showing the scrollable list in chrome simulator: http://codepen.io/addi90/full/RaOegM/
In ionic v1.3.3 or later, scroll on is not working. this can be solved by placing overflow-scroll="false" in or defining as
<ion-content overflow-scroll="false">
OR
<ion-scroll scrollX="true" scrollY="true" style="margin:17rem; position:fixed; display:inline; top:0; right:0; bottom:0; left:0; white-space: nowrap;">
will help.
Sandy to hide the scrollbar try to add ::-webkit-scrollbar {display:none;} to your css file. It worked for me.
I have created index.html as below:
<html lang="en" ng-app="bootProject" >
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>SASS / Home
</title>
<script src="../../node_modules/angular/angular.min.js"></script>
<script src="../../node_modules/angular-route/angular-route.min.js"></script>
<!-- Bootstrap core CSS -->
<link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../../dist/css/main.css" rel="stylesheet">
<!-- Custom styles for font-awesome css -->
<link href="../../node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div ng-view></div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../node_modules/jquery/dist/jquery.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
angular-route.min.js
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../javascript/main.js"></script>
<script src="//localhost:35729/livereload.js"></script>
</body>
</html>
There is a "home.html" with a navbar that I want to click on "log in" tab and goes in to "log.html" page.
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li>Register</li>
<li>Login</li>
<div><ng-view></div>
</ul>
</div>
And this is my "main.js":
// Module
var weatherApp = angular.module('bootProject',['ngRoute']);
// Route
weatherApp.config(function($routeProvider){
$routeProvider
.when('/home',{
templateUrl:'http://localhost:1337/dist/templates/home.html',
controller: 'homeController'
})
.when('/log',{
templateUrl:'http://localhost:1337/dist/templates/log.html',
controller: 'logController'
})
.when('/dashboard',{
templateUrl:'http://localhost:1337/dist/templates/home.html',
controller: 'dashboardController'
});
});
//Controllers
weatherApp.controller('logController', [ '$scope', '$location',function($scope,$location){
$scope.submit= function(){
var uname = $scope.username;
console.log(uname);
var pass = $scope.password;
if($scope.username =='admin' && $scope.password =='admin'){
$location.path("/dashboard");
}
};
}]);
When I open my project in localhost / dist it shows me just one line which is "angular-route.min.js", but when I open it in localhost/src it shows me the right pages but still I can see that line in log.html page.
Please let me know what my mistake is?
I don't see a .otherwise in your routing. You should be using .otherwise to catch routes that do not match the ones you have specified.
for example, you might use .otherwise({redirectTo:'/home'});
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 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.