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
Related
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
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.
Hello I'm trying to implement a listview application for mobile devices via cordova angularjs and ionic framework.
The application should show a clickable list view for example for cars. If the user clicks one of the items of the list, a details view with details of the specific car should be opened.
My index.html looks like this:
<!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">
<!-- 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 ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Order spare parts:</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<a href="#detailsView:1">
<div class="item item-button-right">
Audi A4
</div>
</a>
<a href="#detailsView:2">
<div class="item item-button-right">
BMW 320
</div>
</a>
<a href="#detailsView:3">
<div class="item item-button-right">
Mercedes CLA
</div>
</a>
</div>
</ion-content>
</ion-pane>
</body>
</html>
My app.js:
var app = angular.module('starter', ['ionic']);
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
});
In the detailsview it should show up a checkboxlist similar to this:
<ul class="list">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox">
</label>
Wheels
</li>
</ul>
The data is for example given in json format:
var cars = [
{"id":"1", "name":"Audi", "spareParts":[{"id":"1", "name": "wheel"}, {"id":"2", "name": "Steuergerät"}]},
...
];
My problem is that some page navigation things that are working on the browser simulation are not working in my iOS simulator. I tried the recommend way with <script id="detailsView.html" type="text/ng-template"> tags and routing configurations in the controller but couldn't get it to work on the iOS simulator.
I tried a lot of codepen examples to bring the routing to work but it always fails hard. For example the codepen: http://codepen.io/mhartington/pen/CAxFG only shows my a white screen on my browser simulation and iOS simulator. I copied the code one on one but it seems that I am doing something wrong. The only code that I could bring to work in the iOS simulator is the index.html above.
So how to do this the right way if the app should be a native application build with ionic in the end?
you are missing the ui-router code here.
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: "/home",
templateUrl: "home.html"
})
.state('details', {
url: "/details/:id",
templateUrl: "details.html",
controller :function($stateParams, $scope) {
$scope.params = $stateParams;
}
});
$urlRouterProvider.otherwise("/home");
})
A complete sample is posted here
http://codepen.io/aaronksaunders/pen/xbjOor?editors=101
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.
I have scaffold ionic project with generator-ionic and created a blank project. I have tried to add a state but the app doesnt load the template defined in any of the state.
here is my app.js
'use strict';
angular.module('IonicCarOPedia', ['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) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'view/main-view.html',
controller:'MainCtrl1'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/main');
})
.controller('MainCtrl1', function(){
console.log("main ctrl alled")
});
Here is index.html:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>"IonicCarOPedia"</title>
<link rel="stylesheet" href="lib/ionic/release/css/ionic.css" />
<link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app="IonicCarOPedia">
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-animate/angular-animate.js"></script>
<script src="lib/angular-sanitize/angular-sanitize.js"></script>
<script src="lib/angular-ui-router/release/angular-ui-router.js"></script>
<script src="lib/collide/collide.js"></script>
<script src="lib/ionic/release/js/ionic.js"></script>
<script src="lib/ionic/release/js/ionic-angular.js"></script>
<script src="cordova.js"></script>
<script src="scripts/app.js"></script>
<nav-bar type="bar-positive"
animation="nav-title-slide-ios7"
back-button-type="button-icon"
back-button-icon="ion-ios7-arrow-back"></nav-bar>
<nav-view></nav-view>
</body>
</html>
and main-view.html:
<view title="'Employees'">
<div class="bar bar-subheader item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
</label>
</div>
</view>
What ever i do template isnt shown, not even the MainCtrl1 is called.
Any help is appreciated. Thanks
Ok Seems like some silly mistake, but I did tried it before which never worked, but its working now.
I have changed ionic elements: nav-bar to ion-nav-bar, nav-view to ion-nav-view and view to ion-view and that worked now.