0
 **html file**
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<div ng-controller="loginCtrl">
<h3>Login</h3>
<form>
<label>Username:</label><input type="text" ng-model="username" /><br><br>
<label>Password:</label><input type="password" ng-model="password"><br>
<button  type="submit" ng-click="submit()">login</button> 
</form>
</div>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-pane>
<script type="text/javascript">
var app = angular.module('starter', ['ionic']);
app.controller('loginCtrl', function($scope, $location, $http, $state){
$scope.submit=function()
{
var user=$scope.username;
var pass=$scope.password;
if($scope.username=="admin" && $scope.password=="1234")
{
$location.path('templates/first');
}

else { /alert("error");/ $location.path('/second'); } }
}); location.path is correct syntax to navigate the page but it is working in the url bar but not the page navigation.

**app.js file**
angular.module('starter', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('/', {
url: '/',
abstract: true,
templateUrl: 'index.html'
})
.state('/first', {
url: '/first',
abstract: true,
templateUrl: 'templates/first.html'
})
.state('/second', {
url: '/second',
abstract: true,
templateUrl: 'templates/second.html'(these first and second html pages are given in templates folder in www folder of the project.
});
$urlRouterProvider.otherwise({ redirectTo: '/login' });
});

the page is not navigating to first.html page after clicking submit button.

2 Answers2

0

Those states are abstract. Remove abstract because they are not abstract states.

.state('first', {
url: '/first',
abstract: true,
templateUrl: 'templates/first.html'
})

to

.state('first', {
url: '/first',
templateUrl: 'templates/first.html'
})

see this: Why give an "abstract: true" state a url? https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views#abstract-states

Community
  • 1
  • 1
Asim K T
  • 16,864
  • 10
  • 77
  • 99
  • you need a ui-view inside your index.html – Asim K T Mar 30 '16 at 12:34
  • can u give any example for ui-view for a single button to get into next page by clicking on it. And not mean that ion-tabs. Ion-tabs are so confusing. Just ui-view with single button and navigating to a page. That's it. Thanks in advance if u help regarding this Asim K T....:) – sri sai phani harsha Mar 31 '16 at 06:54
  • when ionic serve is done then the url is "http://localhost:8100" . And after entering name and password then clicking the login button then url changing to "http://localhost:8100/#/first.html". But the page remains in login page only url is changing. Y – sri sai phani harsha Mar 31 '16 at 08:09
0
  • You are using wrong $location.path('templates/first'); because in your module definition you have declared it as url: '/first'. Instead use $state.go('/first') to navigate to your page.

  • Also remove the abstract property from the first and second pages definition.

  • $urlRouterProvider.otherwise({ redirectTo: '/login' }); this is also wrong too because there is no such url as login

Hope it helps.

M. Junaid Salaat
  • 3,765
  • 1
  • 23
  • 25
  • first.html page is in templates folder. so i kept $location.path('templates/first'); Actually in URL bar its going to that particular place but the page is not going. It still in login page itself and also i tried $state.go it is giving an error as " Could not resolve '/first' from state ''" And i think some ion-nav-view directive may useful for navigation. can you about that. Because my first.html page consist of only one line login successful. – sri sai phani harsha Mar 30 '16 at 05:24
  • First of all `$location.path()` is not used for template findings. It put url on the browser for location. for example `$location.path('templates/first')` will find **'templates/first'** in your module definition in url property. Secondly try chaging state name from `/first` to `first` I think the special character is causing problem here if everything else is fine. – M. Junaid Salaat Mar 30 '16 at 07:12