How a button open another page?

hello everyone :kissing_heart:
I want a button to open another page! but how to make that happen?
I think that will be the simplest thing but it seems not !:cry:

thanxx

You can do it like that:

 $scope.goToTab = function(){
        $state.go('tab.stateName');
}

where tab stateName is defined in your app.js like this:

.state('tab.stateName', {
    url: '/stateName',
    views: {
      'tab-stateName': {
        templateUrl: 'templates/tab-stateName.html',
        controller: 'stateNameCtrl'
      }
    }
  })

^ How this will be linked to the button?? where should I put it?

Hello, you just have to link your button to the function like :
<button ng-click="goToTab()"></button>

is <a href="#/yourPath"> link </a> impossible to do?

itā€™s saying that the state is not defined! :((

@Nouf_kh

add this in your template
<button type="button" ng-click = "go_to_another_page()"></button>

in your controller

app.controller('Controller_Name', function($state, $scope)

{
$scope.go_to_another_page = function(){
$state.go('state_name');
}

});

in your app.js

.state("STATE_NAME", {
      cache: false,
      url: '/',
     templateUrl:'templates/home.html',
    controller:'Controller_Name'
     });
    
  $urlRouterProvider.otherwise('/');

I tried it also but when it open the new page the back button in the nav appears and I want the menu icon to be there instead of the back buttonā€¦ :sweat:

nothing worked :((
here is the code:
< button ng-click=ā€œgo_to()ā€ class=ā€œbutton button-full button-positiveā€>Login < / button>

in the app. js :
.state(ā€œopenStateā€, {
cache: false,
url: ā€˜/ā€™,
templateUrl:ā€˜templates/anotherPage.htmlā€™,
controller:ā€˜openCtrlā€™
})

in the controller:
.controller(ā€˜openCtrlā€™, function($state, $scope)
{
$scope.go_to = function(){
$state.go(ā€˜openStateā€™);
}
})
any solution ??

I really appreciate your help :blush:

nothing worked :((
here is the code:
< button ng-click=ā€œgo_to()ā€ class=ā€œbutton button-full button-positiveā€>Login < / button>

in the app. js :
.state(ā€œopenStateā€, {
cache: false,
url: ā€˜/ā€™,
templateUrl:ā€˜templates/anotherPage.htmlā€™,
controller:ā€˜openCtrlā€™
})

in the controller:
.controller(ā€˜openCtrlā€™, function($state, $scope)
{
$scope.go_to = function(){
$state.go(ā€˜openStateā€™);
}
})
any solution :frowning: ?
thanks

@Nouf_kh

I think you need to study ionic and angularjs

you defined you state as openstate and controller for that state is openctrl
and you are routing to the same state

$state.go = function()
{
state.go('openstate'); // change state name here
};

Does
$scope.go_to = function(){
$state.go(ā€˜tab.openStateā€™);
}

works?

you mean Iā€™m like in an infinite loop?
and I change the state to what ?I didnā€™t get it ā€¦

Nop :cry: ā€¦
it still saying that the state is not defined ā€¦

Did you define it in your app.js ?

Can you try to define your controller stuff like that:

controllerModule.controller('loginCtrl',
['$scope','$localStorage','$state', 
function
($scope,$localStorage,$state)

yes i define it in the app. js

I tried it but it is still the same ā€¦

inject dependency in controller

$state, $scope are dependency injection in this controller
if you want to go to another page
in controller.js

app.controller('First_controller', function($state, $scope){
//like this
$scope.go_to_second_page = function(){
$state.go('second_state');
}
});
app.controller('Second_controller', function($scope, $state){

});

in app.js
app.config(function($stateProvider, $urlRouterProvider){
$stateProvider.state('first_state',{
url:'/'
templateUrl:'templates/first_template.html',
controller:'First_controller'

}).state('second_state',{
url:'/second_state'
templateUrl:'templates/second_template.html',
controller:'Second_controller'
});

$urlRouterProvider.otherwise('/') // it will load your first_template.html
});
now in first template
<button type="button" ng-click=go_to_second_page()" />

If you have any doubts feel free to ask

does this way of injecting dependencies works for you? I have to do it like this:

.controller('AppCtrl',['$scope', '$ionicPopup', '$timeout', '$ionicModal', '$state', function($scope, $ionicPopup, $timeout, $ionicModal, $state) {
  $scope.signIn = function(user) {
    //console.log('Sign-In', user);
    $state.go('app.search');
  };
}])

I found it at stackoverflow: http://stackoverflow.com/questions/28464056/state-go-not-working-error-state-isnot-defined