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.
Related
I just started a blank new Ionic project, and I'm going crazy trying to figure out what is wrong with my $stateProvider setup.
My routes.js:
angular.module('starter.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/Login',
templateUrl: 'templates/Login.html',
controller: 'loginCtrl'
});
$urlRouterProvider.otherwise('/Login');
});
My app.js:
angular.module('starter', ['ionic', 'starter.routes', 'ui.router'])
.run(function($ionicPlatform, $state, $timeout) {
$ionicPlatform.ready(function() {
console.log("platform ready");
$state.go('login');
// 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);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
});
My 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 rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<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>
<script src="js/routes.js"></script>
<script src="js/controllers/login-ctrl.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>
</ion-content>
</ion-pane>
</body>
</html>
I've already worked on complex ionic apps, and started many on my own, and never had a problem like this, in my app.js, the $state.go('login'); won't work. EVER.
I tried to put that command inside a timeout, or a function but nothing happened, I'm guessing there is something wrong with my declaration of the $stateProvider but I really can't figure out what that could be.. I also tried to copy and pasterino whole sections of working code from other projects...
I really need help!! Thank you!
I am trying to make something like this <[Plunker][1]>
But when i try this exact code in my ionic application i get nothing on the screen.
I have already asked this question couple of time but nobody was able to helped me till now.
If you know some other alternative or some tutorial or link please post it.
NOTE i am exactly copying my ionic project code into plunker so that you can better understand it but it might not work in plunker.
Please help me if you can.
<[MY Plunker][2]>
[1]: http://plnkr.co/edit/H5n7SM?p=preview
[2]: https://plnkr.co/edit/fJTaer?p=preview
index.html
<!DOCTYPE html>
<html data-ng-app="starter">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<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="cordova.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-cordova/0.1.27-alpha/ng-cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/homeController.js"></script>
<script src="js/secondController.js"></script>
</head>
<body>
<ion-pane>
<ion-content>
<div id="wrapper" ui-view></div>
</ion-content>
</ion-pane>
</body>
</html>
app.js
var app = angular.module('starter', ['ionic','ngCordova', 'ui.router'])
app.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);
}
ionic.Platform.fullScreen();
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
app.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('index', {
url: "",
templateUrl: "home.html",
controller: "homeController"
})
.state('second', {
url: "/second",
templateUrl: "second.html",
controller: "secondController"
})
});
home.html
<div style="width:100px;height: 50px;background-color: blue">home</div>
<button ui-sref="second">click</button>
second.html
<div style="width:100px;height: 50px;background-color: green">second</div>
<button ui-sref="index">click</button>
homeController.js
app.controller('homeController', function($scope,$ionicPlatform,$state) {
});
secondController.js
app.controller('secondController', function($scope,$ionicPlatform,$state) {
});
I created ionic app blank,after I created templates folder and a file login.html in it.
Now I want set when start my app login.html page will show.
I try it with code:
app.js
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('login', {
url: '/login',
abstract: true,
templateUrl: 'templates/login.html',
})
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 rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
</body>
</html>
but it show white page when start.
How I can fix it?
Thank everyone!
You have configured states, but didn't set a default state. You also don't have a <div ui-view></div> to kick off the state provider.
If you want to have the login page as the start page, you have to configure it like so:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
// remove abstract true
templateUrl: 'templates/login.html',
})
// Set default to /login
$urlRouterProvider.otherwise("/login");
})
Then in your html let the $stateProvider know where the root of your view navigation is:
<body ng-app="starter">
<div ui-view></div>
</body>
I have a simple list of items and want to have a button in the header that shows and hides a delete button next to each list item. My header and content are made up of separate views.
After much reading, it seems a controller is attached to a view rather than a state, so I need to have a separate controller for each view (one controller for the header and one controller for the content). As I can't share variables between controllers, what is the best way to have a button in one view (header.html) show/hide buttons in a list in a different view (content.html)?
My HTML is below:
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">
-->
<!--For users deploying their apps to Windows 8.1 or Android Gingerbread, platformOverrided.js
will inject platform-specific code from the /merges folder -->
<script src="js/platformOverrides.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="Scripts/angular-resource.min.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/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<ion-view view-title="Playlists">
<div ui-view="header"></div>
<div ui-view="content"></div>
</ion-view>
</body>
</html>
header.html
<ion-header-bar class="bar-positive">
<div class="buttons">
<button class="button button-icon icon ion-ios-minus-outline"
ng-click="data.showDelete = !data.showDelete"></button>
</div>
<h1 class="title">my test app</h1>
</ion-header-bar>
content.html
<ion-content class="has-header has-footer" overflow-scroll="true">
<ion-list show-delete="data.showDelete">
<ion-item ng-repeat="movie in movies" href="#/home/{{movie.id}}">
{{movie.title}}
<ion-delete-button class="ion-minus-circled"
ng-click="onItemDelete(movie)">
</ion-delete-button>
<ion-option-button class="button-assertive" ui-sref="editMovie({id:movie.id})">Edit</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
and my js is below.....
app.js
angular.module('starter', ['ionic', 'ngResource', 'starter.controllers', 'starter.services'])
.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 (cordova.platformId === "ios" && window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function ($stateProvider, $urlRouterProvider) {
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
views: {
'header': {
templateUrl: 'templates/header.html',
controller: 'headerCtrl'
},
'content': {
templateUrl: 'templates/content.html',
controller: 'contentCtrl'
},
'footer': {
templateUrl: 'templates/footer.html'
}
}
});
});
controllers.js
angular.module('starter.controllers', [])
.controller('headerCtrl', function ($scope) {
$scope.showDelete = function () {
$scope.data.showDelete = !$scope.data.showDelete;
};
})
.controller('contentCtrl', function ($scope, $state, $stateParams, Movie) {
// populate list withg all items from database
$scope.movies = Movie.query();
// handle delete button click
$scope.onItemDelete = function (movie) {
$scope.movies.splice($scope.movies.indexOf(movie), 1);
movie.$delete();
$scope.data.showDelete = false;
};
});
You actually can share variables between controllers, by using what Angular calls a "service".
AngularJS: How can I pass variables between controllers?
I have installed all the component but also calendar is not displyaing.
I have downloaded moment manually and injected in app.js
module is:
angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.services', 'app.directives','ngCordova','angularMoment','mwl.calendar', 'ui.bootstrap'])
.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();
}
});
})
controller:
.controller('timesheetCtrl', function($scope,$cordovaCalendar) {
$scope.calendarView = 'week';
$scope.calendarDay = new Date();
$scope.tester = 'Is the Controller connecting';
$scope.events = [
{
title: 'My event title', // The title of the event
type: 'info',
startsAt: new Date(2013,5,1,1),
endsAt: new Date(2014,8,26,15),
editable: false,
deletable: false,
incrementsBadgeTotal: true
}
];
})
View (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">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<!-- 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/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
<script src="lib/angular-moment/angular-moment.js"></script>
<link href="lib/angular-bootstrap-calendar/dist/css/angular-bootstrap-calendar.min.css" rel="stylesheet">
<script src="lib/ui-bootstrap-tpls-1.2.2.min.js"></script>
<script src="lib/angular-bootstrap-calendar/dist/js/angular-bootstrap-calendar-tpls.min.js"></script>
<!-- Only required for Tab projects w/ pages in multiple tabs
<script src="lib/ionicuirouter/ionicUIRouter.js"></script>
-->
</head>
<body ng-app="app" animation="slide-left-right-ios7">
<div>
<div>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button class="button-icon icon ion-ios-arrow-back">Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>
</body>
</html>
Timesheet.html:
<ion-view title="Timesheet">
<ion-content overflow-scroll="true" padding="true" class="has-header">
{{tester}}
<mwl-calendar
view="calendarView"
view-date="calendarDate"
events="events"
view-title="calendarTitle"
on-event-click="eventClicked(calendarEvent)"
on-event-times-changed="calendarEvent.startsAt = calendarNewEventStart; calendarEvent.endsAt = calendarNewEventEnd"
edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
on-edit-event-click="eventEdited(calendarEvent)"
on-delete-event-click="eventDeleted(calendarEvent)"
cell-is-open="true">
</mwl-calendar>
</ion-content>
</ion-view>
anybody know the solution of this problem?
I can tell you what I see at first sight. If your are using angular moment, which is build on top of moment.js you need to include that file as well.
<script src="lib/moment/moment.js"></script>
<script src="lib/angular-moment/angular-moment.js"></script>
Check the official doc for angular moment, everything is explain there. Good luck !