angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins && 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) {
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('notePadHome', {
url: '/notePadHome',
views: {
'notePadHome': {
templateUrl: 'templates/notePadHome.html',
controller: 'DashCtrl'
}
}
})
$urlRouterProvider.otherwise('/notePadHome');
});
In tabs.html you need to apply at ion-nav-view element the name="tab".
And then in your app.js try this:
.state('notePadHome', {
url: '/notePadHome',
views: {
'tab': {
templateUrl: 'templates/notePadHome.html',
controller: 'DashCtrl'
}
}
})
If you want remove the tab from app.js, remember to remove it also in your home view route, like this:
.state('notePadHome', {
url: '/notePadHome',
templateUrl: 'templates/notePadHome.html',
controller: 'DashCtrl'
})
Related
For some reason ui router won't change state or does change it but it does not render it,
here is my code
angular.module('splash', ['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);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('splash', {
url: '/splash',
templateUrl: '/splash.html',
})
.state('splash.login', {
url: '/login',
views: {
'menuContent': {
templateUrl: 'login.html',
controller: "SplashCtrl"
}
}
})
.state('splash.register', {
url: '/register',
views: {
'menuContent': {
templateUrl: 'register.html',
controller: "SplashCtrl"
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/splash');
}])
.controller('SplashCtrl', function($scope, $state) {
$scope.go = function(state) {
$state.go(state);
}
});
is there anything wrong with what I am doing? in the html file I only add the ng-app directive, it loads the first state without any problems but it does not change states
kindly help me in this regard if you have any idea
Thanks in Advance
I fixed your code and added some comments. Feel free to ask about any uncentainties.
angular.module('splash', ['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(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('splash', {
url: '/splash',
abstract : true, // Because your are have child-states under de 'splash' state, you should set it abstract : true;
templateUrl: '/splash.html',
})
.state('splash.login', {
url: '/login',
views: {
'menuContent': { // Is only your menu contect visible on your app ?
templateUrl: 'login.html',
controller: "SplashCtrl"
}
}
})
.state('splash.register', {
url: '/register',
views: {
'menuContent': {
templateUrl: 'register.html',
controller: "SplashCtrl"
}
}
})
// Using stateParams your are able to pass values when switching states.
.state("splash.third", {
url : "/thirdpage/:text", // This value is referencing the passed value in the 3th button.
views : {
"menuContent" : {
templateUrl : "thirdpage.html",
controller : "SplashCtrl"
}
}
}); // You forgot a ;
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/splash');
}])
.controller('SplashCtrl', function($scope, $state) {
// Your controller shouldn't know anything about routing. UI-router is fixing that your you! =]
// An controller is supposed to act as glue between your data (services/factories) and your scope (html templates/directives)
// e.g.
$scope.buttonText = "Third button";
});
// On your splash.html
<button ui-sref="splash.login">Login</button>
<button ui-sref="splash.register">Register</button>
<button ui-sref="splash.third({ text : buttonText })">{{buttonText}}</button>
I have been reviewing the different methods for authorization/authentication in the framework. What I am trying to do is assign a value to a state, then use ui-routers ability to detect the state change using $stateChangeStart. I am injecting the ionicModal service into app.js .run function and then creating the modal and attaching it to the $rootScope. When I try and open it I get the following error:
Cannot read property 'show' of undefined
Here is app.js:
angular.module('authlyApp', ['ionic', 'authlyApp.controllers', 'authlyApp.services'])
.run(function($ionicPlatform, $ionicModal, $rootScope) {
$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();
}
});
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $rootScope
}).then(function(modal) {
$rootScope.modal = modal;
});
$rootScope.$on('$stateChangeStart',
function(event, next, toState, fromState, toParams, fromParams){
console.log(next)
if ('data' in next && 'requireAuth' in next.data) {
event.preventDefault();
$rootScope.modal.show();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl',
data: {
requireAuth: true
}
})
.state('app.search', {
url: '/search',
views: {
'menuContent': {
templateUrl: 'templates/search.html'
}
}
})
.state('app.browse', {
url: '/browse',
views: {
'menuContent': {
templateUrl: 'templates/browse.html'
}
}
})
.state('app.playlists', {
url: '/playlists',
views: {
'menuContent': {
templateUrl: 'templates/playlists.html',
controller: 'PlaylistsCtrl'
}
}
})
.state('app.single', {
url: '/playlists/:playlistId',
views: {
'menuContent': {
templateUrl: 'templates/playlist.html',
controller: 'PlaylistCtrl'
}
}
});
$urlRouterProvider.otherwise('/app/playlists');
});
i just begin with angular and ionic and i have a problem, routing display blank page , its bein 2 hours , that i'm looking for a solution without found one can someone help me figure out this please. sorry for my bad english
this is my app.js code: am i doin someething wrong?
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleLightContent();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('homepage', {
url: '/',
views: {
'': {
templateUrl: 'templates/home.html',
controller: '',
}
}
})
.state('itemPage', {
url: '/itemPage',
views: {
'': {
templateUrl: 'templates/itemPage.html',
controller: 'myCtrl',
}
}
})
.state('cart', {
url: '/cart',
view: {
'': {
templateUrl: 'templates/cart.html',
controller: 'myCtrl',
}
}
})
.state('categories', {
url: '/categories',
view: {
'': {
templateUrl: 'templates/categories.html',
controller: 'myCtrl'
}
}
})
.state('billingDetails', {
url: '/billingDetails',
view: {
'': {
templateUrl: 'templates/billingDetails',
controller:'myCtrl',
}
}
})
.state('confirmOrder', {
url: '/confirmOrder',
view: {
'': {
templateUrl: 'templates/confirmOrder',
controller:'myCtrl'
}
}
})
$urlRouterProvider.otherwise('/');
});
i'm starting on ionic, and in this project I need the menu to show from top, but behind the top bar.
Of course I looked into the ionic doc's side menu.
Also saw this but I don't think it's the best solution.
Can you help me with that?
You can have a look at below link just as you want.
http://jsfiddle.net/brayancastrop/fgcruwxg/1/
(function () {
angular.module('sampleApp', ['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, $ionicConfigProvider) {
$ionicConfigProvider.views.maxCache(0);
$stateProvider
.state('app', {
abstract: true,
templateUrl: "templates/menu.html"
})
.state('app.events', {
url: "/events",
views: {
'menuContent': {
templateUrl: "templates/events.html"
}
}
})
.state('app.event', {
url: "/events/:id",
views: {
'menuContent': {
templateUrl: "templates/event.html"
}
}
})
.state('app.conference', {
abstract: true,
views: {
'menuContent': {
templateUrl: "templates/conference.html"
}
}
})
.state('app.conference.information', {
url: "/events/:id/conferences/:conferenceId/information",
views: {
'conferenceInformation': {
templateUrl: "templates/conference/information.html"
}
}
})
.state('app.conference.presentation', {
url: "/events/:id/conferences/:conferenceId/presentation",
views: {
'conferencePresentation': {
templateUrl: "templates/conference/presentation.html"
}
}
})
.state('app.conference.questions', {
url: "/events/:id/conferences/:conferenceId/questions",
views: {
'conferenceQuestions': {
templateUrl: "templates/conference/questions.html"
}
}
})
.state('app.conference.notes', {
url: "/events/:id/conferences/:conferenceId/notes",
views: {
'conferenceNotes': {
templateUrl: "templates/conference/notes.html"
}
}
});
$urlRouterProvider.otherwise('/events');
});
})();
I want to evaluate the user when the app start if it's authenticated change the state to "categories" if not go to "land" state. i reached this using $stateChangeStart in the run block like so :
.run(function($ionicPlatform, DSCacheFactory, $rootScope, $auth, $state) {
$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();
}
});
$rootScope.$on('$stateChangeStart', function (event, toState) {
if (!$auth.isAuthenticated() && toState.name !== 'land') {
event.preventDefault();
$state.go('land');
}
});
})
and like this if it's authenticated:
$urlRouterProvider.otherwise('app/categories');
every thing works fine user get evaluated correctly but, clicking on anything in the app taking me to the land state. Any idea why!
The router code :
.config(function($stateProvider, $urlRouterProvider, $authProvider, $ionicAppProvider, API_URL) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('land', {
url: '/land',
templateUrl: 'templates/land.html',
controller: 'LandCtrl'
})
.state('signup', {
url: '/sign-up',
templateUrl: 'templates/sign-up.html',
controller: 'SignUpCtrl'
})
.state('signin', {
url: '/sign-in',
templateUrl: 'templates/sign-in.html',
controller: 'SignInCtrl'
})
.state('app.categories', {
url: '/categories',
views: {
'menuContent': {
templateUrl: 'templates/categories.html',
controller: 'categoriesCtrl',
}
}
});