how to open view on button click in angular +ionic?

could you please tell me how to open views on button click in ionic.Actually I have three buttons and three views .I want to show one view at one time .like when I click Breakfast it show Breakfast.html page .when I click lunch it show lunch.html same as dinner .I need to show one page at one time on button click

could you please tell me how I will achieve this thing in ionic using button-bar .here is my code

http://codepen.io/anon/pen/pJRJLj 

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

  <title>Tabs Example</title>

  <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
  <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>

<body ng-controller="MainCtrl">
<ion-header-bar align-title="center" class="bar bar-header bar-balanced">
  <div class="buttons">
    <i style="font-size:30px;" class='icon ion-chevron-left'></i>
  </div>
  <h1 class="title">Title!</h1>

</ion-header-bar>
<ion-content>
<div class="button-bar">
  <a class="button" ng-class="{'button-positive': isActive('breakfast')}" ng-click="setActive('breakfast')">Breakfast</a>
            <a class="button" ng-class="{'button-positive': isActive('lunch')}" ng-click="setActive('lunch')">Lunch</a>
            <a class="button" ng-class="{'button-positive': isActive('dinner')}" ng-click="setActive('dinner')">Dinner</a>
</div>

  </ion-content>
<script type="text/ng-template" id="Breakfast.html">
  <ion-view>
    <ion-content padding="true">
       <h2>Breakfast the app</h2>
       <p>Breakfast ipsum dolor sit amet, consectetur adipisicing elit. Facilis Breakfast hic officia quasi excepturi sequi deleniti maiores consectetur veritatis sint?</p>
    </ion-content>
  </ion-view>
</script>

  <script type="text/ng-template" id="Lunch.html">
  <ion-view>
    <ion-content padding="true">
       <h2>Lunch the app</h2>
       <p>Lunch ipsum dolor sit amet, consectetur adipisicing elit. Facilis Breakfast hic officia quasi excepturi sequi deleniti maiores consectetur veritatis sint?</p>
    </ion-content>
  </ion-view>
</script>


  <script type="text/ng-template" id="Dinner.html">
  <ion-view>
    <ion-content padding="true">
       <h2>Dinner the app</h2>
       <p>Dinner ipsum dolor sit amet, consectDinneretur adipisicing elit. Facilis Breakfast hic officia quasi excepturi sequi deleniti maiores consectetur veritatis sint?</p>
    </ion-content>
  </ion-view>
</script>
</body>

</html>

Debugged codepen: http://codepen.io/anon/pen/wagMXm

A couple things were wrong here. You may want to do some reading up on angular-ui-router and how exactly it is used. It's by far the toughest part of learning Ionic so it'll be worth your while to read through the docs.

  • I recommend using your views as individual pages. It makes keeping track of your view history and hierarchy much easier.
  • I would also advise that you keep your ion-content directives in their templates. Again, much easier to keep track of your views if they're completely encapsulated
  • ion-view requires parent directive ion-nav-view, which means that your ion-view must always be nested inside of an ion-nav-view. This is to ensure that $ionicHistory and other services can keep track of where you are in the app, which makes controlling navigation flow much easier.
  • ui-sref is used to transition to a state from an <a> element. ui-sref-active allows you to set a class when the state is active.
  • Your state declarations in your config block were syntactically incorrect. Once again, reading up on ui-router will help with this.