I have started learning Ionic. I am tying to set a default route to my home.html but it is not working.
index.html
<ion-header-bar align-title="left" class="bar-positive">
<div class="buttons">
<button class="button icon ion-navicon"></button>
</div>
<h1 class="title" style="text-align: center;">Title!</h1>
<div class="buttons">
<button class="button icon ion-home"></button>
</div>
</ion-header-bar>
<ion-nav-view></ion-nav-view>
home.html
<h1>Hello world!</h1>
app.js
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
views: {
'login': {
templateUrl: 'templates/home.html',
controller: 'PlaylistsCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/');
});
help me where I am doing wrong.
I think you should change the url of home
.state('home', {
url: '/home',
views: {
'login': {
templateUrl: 'templates/home.html',
controller: 'PlaylistsCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/home');
Related
Body of my index page looks in the following way:
<body >
<div ng-view></div>
</body>
I config my app in this way:
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider.state('login', {
url: '/login',
templateUrl: 'login.html'
})
.state('main', {
url: '/',
templateUrl: 'main.html'
})
$locationProvider.html5Mode(true);
});
The content of my main.html file is:
<div>
Example content
</div>
I would like my page to dispaly the content of main file when entering the main address. However, it is blank. What am I missing (I am new to angular)?
Is it possible to have routing as follows in angular?
I'm using ui-router for routing, Angular version is 1.4 FYI
.state('home', {
url: '/:city',
controller: 'HomeCtrl',
templateUrl: 'templates/home.html'
})
.state('about', {
url: '/about',
controller: 'AboutCtrl',
templateUrl: 'templates/about.html'
})
.state('login', {
url: '/login',
controller: 'LoginCtrl',
templateUrl: 'templates/login.html'
})
When I tried this way angular is considering both /about and /login as home state and giving me "about" and "login" in state params is there anyway to override this to have urls as specified?
Just define your static routes before home state, here's a demo
var app = angular.module('app', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
// what's the initial route? for the sake of example, it's `/almaty`
$urlRouterProvider.otherwise("/almaty");
$stateProvider
.state('about', {
url: '/about',
template: '<h1>about</h1>'
})
.state('login', {
url: '/login',
template: '<h1>login</h1>'
})
.state('home', {
url: '/:city',
controller: function($scope, $stateParams) {
$scope.stateCity = $stateParams.city
},
template: '<h1>city - {{stateCity}}</h1>'
})
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://unpkg.com/angular-ui-router#0.4.2/release/angular-ui-router.min.js"></script>
<div ng-app="app">
<ul>
<li>
city Almaty
</li>
<li>
about
</li>
<li>
login
</li>
</ul>
<div ui-view></div>
</div>
My problem is, if I use the back button nothing happends. So the idea behind my code is, I want to have on different tabs different views in the side menu. This works without problems. But if I navigate from /groups to /group/:groupId/:groupName the back button is comming up but if i click on it, it doesn't navigate back to /groups, nothing happends.
Index.html
<body ng-app="JasserApp">
<div class="login-main-container" ng-show="showLogin" ng-controller="LoginCtrl">
<h5>JAPP</h5>
<div class="login-main-button-container social-wrap b">
<button class="facebook" ng-click="facebookSignIn()">Login with Facebook</button>
</div>
</div>
<!--
The nav bar that will be updated as we navigate between views.
-->
<div ng-show="!showLogin" ng-controller="MainCtrl">
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</div></body>
Tabs.html (I think this is the file with problems)
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-navicon" ng-click="toggleRight()"></button>
</ion-nav-buttons>
</ion-nav-bar>
<!-- Main content, usually <ion-nav-view> -->
<ion-tabs class="tabs-icon-top tabs-color-active-positive">
<!-- Dashboard Tab -->
<ion-tab title="Groups" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" href="#/tab/groups">
<ion-nav-view name="tab-groups"></ion-nav-view>
</ion-tab>
<!-- Chats Tab -->
<ion-tab title="Account" icon-off="ion-ios-chatboxes-outline" icon-on="ion-ios-chatboxes" href="#/tab/chats">
<ion-nav-view name="tab-chats"></ion-nav-view>
</ion-tab>
<!-- Account Tab -->
<!--<ion-tab title="Account" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account">
<ion-nav-view name="tab-account"></ion-nav-view>
</ion-tab>-->
</ion-tabs>
</ion-side-menu-content>
<ion-side-menu side="right">
<ion-nav-view name="sideMenu"></ion-nav-view>
</ion-side-menu>
</ion-side-menus>
Routing for the views
.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
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html',
controller: 'TabCtrl'
})
// Each tab has its own nav history stack:
.state('tab.groups', {
url: '/groups',
views: {
'tab-groups': {
templateUrl: 'templates/tab-groups.html',
controller: 'GroupsCtrl'
},
'sideMenu':
{
templateUrl: 'templates/groups-sideMenu.html',
}
}
})
.state('tab.group-detail', {
url: '/group/:groupId/:groupName',
views: {
'tab-groups': {
templateUrl: 'templates/group-detail.html',
controller: 'GroupsDetailCtrl'
},
'sideMenu':
{
templateUrl: 'templates/groupDetail-sideMenu.html',
}
}
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/groups');
});
I hope the question is clear.
best regards
I'm sure the answer is somewhere, but how do i link the same component (Navbar logo) to different pages depending on the URL. I would like to link /about when Url= /home and then /home when Url= /about.
app.js:
angular.module('myApp', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ui.router'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/main/main.html',
controller: 'MainCtrl'
})
.state('about', {
url: '/about',
templateUrl: 'app/about/about.html',
controller: 'AboutCtrl'
})
.state('work', {
url: '/work',
templateUrl: 'app/work/work.html',
controller: 'WorkCtrl'
});
$urlRouterProvider.otherwise('/');
});
home.html
<div class="page">
<div ng-include="'components/navbar/navbar.html'"></div>
</div>
navbar.html
<nav class="navbar" ng-controller="NavbarCtrl">
<h1>title</h1>
</nav>
about.html
<div class="page">
<div ng-include="'components/navbar/navbar.html'"></div>
</div>
NavbarCtrl
* not sure what to do here, add a directive use ui.router use $location ??*
Hope someone can help, I've been thinking about it all week.
Not sure if I understood you correctly, but wouldn't ng-show fit your needs? ng-show
You could check in it what is the location at the moment and show proper url depending on it.
You answered your own question I think. I would use ngRoute and $location and I would probably create a directive for it.
My app doesnot need any tab .Can i create a app without any tab using onic framework? But page will navigate on click of buuton.I have to first display a login page then on login i would want it to display list of items on click of it edit page is displayed.How can it be done?I have tried below code
index.html
<body ng-app="starter">
<ion-nav-view name="login"></ion-nav-view>
<ion-nav-view name="home"></ion-nav-view>
</body>
Then
angular.module('starter', ['ionic','starter.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
views: {
'login': {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
}
}
})
$urlRouterProvider.otherwise('/login');
});
Then in login.html
<ion-view title="Login">
<ion-content class="has-header padding">
login button and other inputs
</ion-content>
</ion-view>
Now on login home page should be displayed can anyone suggest how to route
I came here for the same question. Now I have the answer.
index.html:
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
app.js:
app = angular.module('starter', ['ionic']);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'login.html'
})
.state('home', {
url: '/home',
templateUrl: 'home.html'
});
$urlRouterProvider.otherwise('/login');
});
also, make sure you define your templates home and login:
<script type="text/ng-template" id="home.html">
<p>This is home.</p>
</script>
<script type="text/ng-template" id="login.html">
<button ng-click="logUserIn()">Log me in!</button>
</script>
and for dynamic interaction, you can use $state in your controller:
app.controller('AppCtrl', function($scope, $state) {
$scope.logUserIn = function() {
$state.go('home');
}
});
Hope it helps. Cheers!