I want to create and manage sub views in ionic but I couldn't figure out how to make it work, I want to make my login and dashboard pages as abstract, and all other pages be the sub views of dashboard :
for example : dashboard.fax or dashboard.inbox or dashboard.fax.send
I think my problem is my root ion_nav_view directive but I'm not sure, any suggestion how to make it work ?
index.html >>
<body ng-app="modiran">
<ion-nav-view name="menuContent"></ion-nav-view>
<!--<div data-ui-view="menuContent"></div>-->
</body>
partials/login.html >>
<ion-view view-title="login">
<ion-pane>
<div class="login">
<ion-content padding="true" scroll="false" ng-controller="SignInCtrl">
<div style="margin-top: 90%">
<div class="list list-inset login_inputs">
<label class="item item-input item-icon-right item-input-wrapper">
<i class="icon ion-person placeholder-icon"></i>
<input type="text" ng-model="user.username" placeholder="username" class="text-right">
</label>
</div>
<div class="list list-inset login_inputs">
<label class="item item-input item-icon-right item-input-wrapper">
<i class="icon ion-locked placeholder-icon"></i>
<input type="password" ng-model="user.password" placeholder="password" class="text-right padding-right">
</label>
</div>
<button class="item button button-block button-dark" ng-disabled="!user.username || !user.password"
ng-click="signIn(user)">login
</button>
</div>
</ion-content>
</div>
</ion-pane>
</ion-view>
partials/dashboard.html >>
<ion-view view-title="dashboard">
<ion-pane>
<ion-header-bar class="bar bar-header bar-dark" align-title="right">
<button class="button"><img src="img/navcon-logo.png" style="width: 35px; height:35px;"/></button>
<h1 class="title">modiran</h1>
</ion-header-bar>
<ion-content has-header="true" scroll="false" ng-controller="DashboardCrtl">
<div style="margin-top: 90%" class="dashboard">
<!--<i class="dash-icon"><img src="../img/24.png" style="width: 60%;height: 60%;"></i>-->
<img ng-src="img/Menubtn.png" style="width: 5%;height: 5%;margin-top: -8%;float: left;">
<img ng-src="img/MenubtnR.png" style="float: right;width: 5%;height: 5%;margin-top: -8%;">
<div class='circle-container'>
<a class='center' ng-click="GoTo('SmartOffice')"><img src="img/24.png"></a>
<a class='deg0'>
<img src='img/3.png'
onmouseover="this.src='img/3sel.png'"
onmouseout="this.src='img/3.png'">
<!--onmouseover="this.src='../img/3sel.png'"-->
</a>
<a class='deg45'>
<img src='img/4.png'
onmouseover="this.src='img/4sel.png'"
onmouseout="this.src='img/4.png'">
</a>
</div>
</div>
</ion-content>
</ion-pane>
</ion-view>
app.js >>
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
abstract: true,
templateUrl: 'partials/login.html',
controller: 'SignInCtrl'
})
.state('dashboard', {
url: '/dashboard',
abstract : true,
templateUrl: "partials/dashboard.html",
controller: 'DashboardCrtl'
})
.state('dashboard.SmartOffice', {
url: '/SmartOffice',
views: {
'menuContent': {
templateUrl: "partials/SmartOffice.html",
controller: 'SmartOfficeCtrl'
}
}
})
.state('dashboard.Fax', {
url: '/Fax',
views: {
'menuContent': {
templateUrl: "partials/fax/Fax.html",
controller: 'Ù‘FaxCtrl'
}
}
})
$urlRouterProvider.otherwise('/login');
})
Try the following changes:
Remove name="menuContent" from the <ion-nav-view>. Why? login state doesn't specify where template should be loaded, by default it will load in the only available <ion-nav-view>, without a name. In case you want to add it, add it this way:
views: {
'menuContent': {
templateUrl: "partials/login.html",
controller: 'SignInCtrl'
}
}
Similarly for dashboard. To keep it simple, avoid giving name unless you have more than one nav views where templates can be loaded.
Your login state shouldn't be abstract state because you want to show login page.
You might need to check if user is logged in or not and conditionally show login or dashboard. You can do this in app.run block.
Related
I am trying to move into the menu.home state but when I do $state.go('menu.home) it does not do anything and it goes into the otherwise statement. Not sure what I am doing wrong.
Controller.js
$state.go('menu.home');
routes.js
angular.module('app.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
.state('login', {
cache: false,
url:'/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
.state('menu.home', {
cache: false,
url: '/home',
views: {
'side-menu21': {
templateUrl: 'templates/home.html',
controller: 'MapCtrl' //'homeCtrl'
}
}
})
.state('menu.cart', {
url: '/page2',
views: {
'side-menu21': {
templateUrl: 'templates/cart.html',
controller: 'cartCtrl'
}
}
})
.state('menu.cloud', {
url: '/page3',
views: {
'side-menu21': {
templateUrl: 'templates/cloud.html',
controller: 'cloudCtrl'
}
}
})
.state('menu.test', {
cache: false,
url: '/test',
views: {
'side-menu21': {
templateUrl: 'templates/test.html',
controller: 'testCtrl'
}
}
})
.state('menu', {
url: '/side-menu21',
templateUrl: 'templates/menu.html',
abstract: true
})
//$urlRouterProvider.otherwise('/login')
$urlRouterProvider.otherwise(function($injector, $location) {
console.log("Could not find: " + JSON.stringify($location));
$location.path('/login');
})
});
every time I try to do $state.go('menu.home') this is the output i get:
Could not find: {"$$protocol":"http","$$host":"localhost","$$port":8100,"$$path":"/app/sear ch","$$search": {},"$$hash":"","$$url":"/app/search","$$absUrl":"http://localhost:8100/#/ap p/search","$$state":null,"$$replace":false}
login.html
<ion-view view-title="Login" id="login" name="login-view">
<ion-content class="padding">
<!--##########################Facebook Login#################################-->
<div class="facebookLogin">
<a class="facebook-sign-in button button-royal" ng-click="facebookSignIn()">Login with Facebook</a>
</div>
<!--#######################END Facebook Login#################################-->
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="Username" ng-model="data.username">
</label>
<
label class="item item-input">
<input type="password" placeholder="Password" ng-model="data.password">
</label>
</div>
<button class="button button-block button-calm" ng-click="login()">Login</button>
</ion-content>
</ion-view>
home.html
<ion-view title="Test" id="home" class=" ">
<ion-content padding="true" class="has-header"></ion-content>
<body ng-app="app" ng-controller="MapCtrl">
<!-- Google Maps -->
<link href="css/style.css" rel="stylesheet">
<ion-content scroll="false">
<div id="map-canvas"></div>
<!-- END GOOGLE MAPS!-->
<!-- Test button
<div class="TestButton">
<div class="button button-assertive" ng-click="Test()" ng-hide="hideTestButton">
<a class="button">Test</a>
</div>
</div>
End Request Test button----------->
<!-- OS/Production selection footer-->
<ion-tabs class="tabs-icon-top">
<ion-tab title="Apple" icon-off="ion-social-apple" icon-on="ion-social-apple" href="#/app/search" on-select="appleTab()">
<ion-nav-view name="tab-search"></ion-nav-view>
</ion-tab>
<ion-tab title="Windows" icon-off="ion-social-windows" icon-on="ion-social-windows" href="#/app/browse" on-select="windowsTab()">
<ion-nav-view name="tab-browse"></ion-nav-view>
</ion-tab>
<ion-tab title="Mobile" icon-off="ion-iphone" icon-on="ion-iphone" href="#/app/playlists" on-select="mobileTab()">
<ion-nav-view name="tab-playlists"></ion-nav-view>
</ion-tab>
<ion-tab title="Network" icon-off="ion-wifi" icon-on="ion-wifi"" href="#/app/playlists" on-select="otherTab()">
<ion-nav-view name="tab-playlists"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-content>
</body>
</ion-view>
If I comment out : $location.path('/login'); then it works. Not sure why this happens, Please help!
Is that all that is in your controller.js file? Maybe there is something in there that is preventing hitting that state. Make sure in your main html file you have <main ui-view></main> to establish all your routes.
Got it, so it does not like the href that i have in my ion-tabs in the home.html. It might be trying to resolve them which are not point to valid urls. Once I removed the href it worked perfectly fine. Thanks for all the help everyone!
I am building an app that it's navigation based on a side menu. The problem I am having is trying to implement it along with a login page, that is not part of the side menu's scope, so that only after the login, the side menu navigation shall be used.
here's my app.js:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('signin', {
url: '/sign-in',
templateUrl: 'templates/sign-in.html',
controller: 'SignInCtrl'
})
.state('sideMenu', {
url: '/sideMenu',
abstract: true,
templateUrl: 'templates/sideMenu.html',
controller: 'sideMenuCtrl'
})
.state('home', {
url: '/home',
templateUrl: 'templates/home.html',
controller: 'homeTabCtrl'
})
//})
$urlRouterProvider.otherwise('/home');
})
This is the Side menu's HTML:
<ion-view ng-controller="sideMenuCtrl">
<ion-pane ion-side-menu-content>
<ion-nav-bar type="bar-assertive" back-button-type="button-icon" back-button-icon="ion-arrow-left-c"></ion-nav-bar>
<ion-nav-view>
</ion-nav-view>
</ion-pane>
<!-- Left Side Menu -->
<ion-side-menu side="right">
<ion-header-bar class="bar bar-header bar-assertive">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content has-header="true">
<ion-list>
<ion-item ng-click="goTo(item.link)" class="item item-icon-left" ng-repeat="item in list" menu-close>
<!-- <i ng-class="item.iconClass"></i> -->
{{item.text}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
The controller:
.controller('sideMenuCtrl', function ($scope, $location, MenuService) {
console.log('Side menu is reloaded');
// "MenuService" is a service returning mock data (services.js)
$scope.list = MenuService.all();
$scope.goTo = function(page) {
console.log('Going to ' + page);
$scope.sideMenuController.toggleLeft();
$location.url('/' + page);
};
})
I have made a small demo for you,
Plunker Demo
html
<ion-view hide-nav-bar="true " class="view-bg-blue">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
<ion-content padding="true">
<h3 class="text-center">Welcome To Landing Page</h3>
<div class="row">
<div class="col">
<div class="text-center">
<h4>My App</h4>
<div class="row">
<div class="col">
<input placeholder="User">
</div>
</div>
<div class="row">
<div class="col">
<input placeholder="password">
</div>
</div>
<a class="button icon-right ion-chevron-right button-calm" ng-click="open()">Login</a>
</div>
</div>
</div>
</ion-content>
</ion-view>
app.js
var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: '/tab',
controller: 'TabsCtrl',
templateUrl: 'tabs.html'
})
.state('tabs.home', {
url: '/home',
views: {
'home-tab': {
controller: 'homeCtrl',
templateUrl: 'home.html'
}
}
})
.state('tabs.settings', {
url: '/settings',
views: {
'settings-tab': {
controller: ' signOutCtrl',
templateUrl: 'settings.html'
}
}
});
$stateProvider
.state('landing', {
url: '/landing',
controller: 'landingCtrl',
templateUrl: 'landing.html'
});
$urlRouterProvider.otherwise('/landing');
});
If you need any additional feature,Please let me know?Thanks
I need multiple ui-views for one URL (my homepage). The limitation for ui-routing is that I can't have multiple <div ui-view></div> but they have to be in their nested states.
<div class="left-div">
<div ui-view></div>
<button ui-sref="1"></button>
<button ui-sref="2"></button>
<button ui-sref="3"></button>
</div>
<div class="right-div">
<button ui-sref="3"></button>
<div ui-view></div>
</div>
How do I make it so that ui-sref=1 and ui-sref=2 will update the ui-view inside:
<div class="left-div"></div>
and ui-sref=3 will update the ui-view inside <div class="right-div"></div>
The issue I encountered when I used ui-router was that upon changes from ui-sref from 1 -> 3 or 2 -> 3 the ui-view of left-div will disappear because the URL changes.
How do I approach this?
EDIT- My current state views
chatApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home')
$stateProvider
.state('friend', {
url: '/friend',
templateUrl: 'friend.html'
})
.state('group', {
url: '/group',
templateUrl: 'group.html'
})
.state('search', {
url: '/search',
templateUrl: 'search.html'
})
.state('home', {
url: '/search',
templateUrl: 'search.html'
})
.state('public', {
url: '/public',
views: {
'publicView': { templateUrl: 'private-chat.html' }
}
});
<div class="col-md-3 left-col-friends" ng-controller="friendListCtrl">
<div class="friends-list-navigation">
<div class="option-wrapper">
<div class="col-xs-3 home-option" ui-sref="public"><i class="fa fa-home fa-2x"></i></div>
<div class="col-xs-3 friend-option" ui-sref="friend"><i class="fa fa-user fa-2x"></i></div>
<div class="col-xs-3 group-option" ui-sref="group"><i class="fa fa-users fa-2x"></i></div>
<div class="col-xs-3 search-option" ui-sref="search"><i class="fa fa-search fa-2x"></i></div>
</div>
</div>
<div class="friends-list-display">
<div ui-view></div>
</div>
</div>
<div class="col-md-9 middle-col-chat" ng-controller="publicCtrl">
<div class="bubble-frame-public">
<div ui-view="publicView"></div>
</div>
<div class="input-fields-wrapper" emoji-form emoji-message="emojiMessage">
<div class="col-md-8">
<textarea class="col-md-4" id="messageInput" ng-model="emojiMessage.messagetext"></textarea>
</div>
<div class="col-md-3">
<button class="btn btn-default btn-send-public-msg" ng-click="emojiMessage.replyToUser()"><i class="fa fa-paper-plane"></i></button>
<button class="btn btn-default" id="emojibtn">
<i class="fa fa-smile-o"></i>
</button>
<button class="btn btn-default"><i class="fa fa-video-camera"></i></button>
</div>
</div>
</div>
I'm taking a guess that the publicView is the view you're wanting to stay unchanged while the other views are changing. Here's one way to tackle it.
$stateProvider
.state('home', {
url: '/home',
views: {
'#': {
templateUrl: 'search.html'
},
'publicView#': {
templateUrl: 'private-chat.html'
}
}
})
.state('home.friend', {
views: {
'#': {
templateUrl: 'friend.html'
}
}
})
.state('home.group', {
views: {
'#': {
templateUrl: 'group.html'
}
}
});
The default URL is /home. When it's accessed, publicView is populated with private-chat.html and the unnamed ui-view is populated with search.html.
For the friend and group states, they leave the publicView alone and they don't use new URLs, which is what I think you're going for. This is accomplished by making them children states of home and by specificying absolutely which views should be altered.
I am new to ionic and angular.js. I download this ionic collection repeat and navigation example from http://codepen.io/ionic/pen/mypxez. The initial example was working perfect with single index.html and index.js files. I tried to separate the code in controller, service, app.js and in the HTML files. I can see the collections but I am not able to see the details and navigate it. Here is the HTML file to show all collection which works:
<ion-view title="Home">
<ion-header-bar class="bar-subheader item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
<input type="search" placeholder="Search" ng-model="filter">
</label>
</ion-header-bar>
<ion-nav-buttons side="right">
<a class="button" ng-click="scrollBottom()">
Scroll To Bottom
</a>
</ion-nav-buttons>
<ion-content>
<div class="list">
<a class="item my-item item-thumbnail-left"
collection-repeat="pet in pets | filter:filter"
collection-item-height="90" collection-item-width="'100%'"
ui-sref="tab.detail({petsId: pet.id })">
<img ng-src="http://placekitten.com/60/{{55 + ($index % 10)}}">
<h2>{{pet.firstName}}</h2>
<p>{{pet.id}}</p>
</a>
</div>
</ion-content>
</ion-view>
Here is the code of app.js:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.detail', {
url: "/detail/:petsId",
views: {
'main': {
controller:'DetailCtrl',
templateUrl: "templates/question-detail.html"
}
}
})
Here is the code of the controller which never get called:
.controller('DetailCtrl', function($scope, $stateParams, PetService) {
$scope.pet = PetService.get($stateParams.petsId);
})
...and the question-detail.html code:
<ion-view title="{{pet.id}}">
<ion-content class="padding">
{{pet.id}}
{{pet.firstName}}
</ion-content>
</ion-view>
I can view the collection and can search but I am not able to see the details by clicking them. I can see the url (http://localhost:8100/#/tab/detail/2) if i click on item 2 but i am not able to see the question- detail.html page.
Considering you are very new to this framework, or angularJS itself. I am just going to answer the question without saying anything else, but for future, please go through docs first.
<ion-view title="{{pet.id}}">
<ion-content class="padding">
{{pet.id}}
{{pet.firstName}}
</ion-content>
</ion-view>
Thanks karan for your prompt answer.. I changed two things and the
code is working now:
the html file where i declared the anchor tag. I changed the ui-sref
to href:
<div class="list">
<a class="item my-item item-thumbnail-left"
collection-repeat="pet in pets | filter:filter"
collection-item-height="90"
collection-item-width="'100%'" href="#/tab/detail/{{pet.id}}">
<img ng-src="http://placekitten.com/60/{{55 + ($index % 10)}}">
<h2>{{pet.firstName}}</h2>
<p>{{pet.id}}</p>
</a>
</div>
my app.js file
.state('tab.detail', {
url: '/detail/:petsId',
views: {
'tab-chats': {
templateUrl: 'templates/question-detail.html',
controller:'DetailCtrl'
}
}
})
i am kinda new to this UI-Routing concept, so i was wondering the following.
Is it possible to change a top view from within a nested one.
So we start at index and call Account state within that view i call the Account.login view by using:
<a ui-sref="Account.login"></a>
Now is it possible to call the Index state again from within Account.login view and how would one accomplish that.
.state('Home', {
url: "/",
templateUrl: "pages/Home.html",
})
.state('Account', {
url: "/profile",
templateUrl: "pages/Account.html"
})
.state('Account.login', {
url: "/login",
templateUrl: "pages/Account_Login.html"
})
.state('Account.register', {
url: "/register",
templateUrl: "pages/Account_Register.html"
})
Working with Ionic Framework.
Main Page:
<ion-header-bar align-title="center" class="custom_Header">
<div class="buttons">
<button menu-toggle="left" class="button button-icon icon ion-navicon" style="background-color:#4D8693"></button>
</div>
<h1 class="title"><a ui-sref="Home" style="text-decoration: none"><img src="img/Header.png" /></a></h1>
<div class="buttons">
<button menu-toggle="right" class="button button-icon icon ion-gear-b" style="background-color:#4D8693"></button>
</div>
</ion-header-bar>
<ion-content class="has-header">
<ion-nav-view></ion-nav-view>
</ion-content>
Account.html:
<div class="has-header">
<a ui-sref="Home">
<img src="img/test.png" />
</a>
</div>
If i now press on that image on Account view, it will return me to my main page but without my buttons in the header, the image in the middle is still there.
Including: http://play.ionic.io/app/2f5cc1913037