Follow me if you want to grow your full-stack JavaScript skills with my screencasts and courses.

Ionic

Setting up the environment

We install the necessary dependencies

terminal
  
  $ npm install -g ionic gulp cordova
  

We clone the base seed project to get started

terminal
  
  $ git clone https://github.com/driftyco/ionic-app-base app
  

We fire up the auto reload web server

terminal
  
  $ cd app && ionic serve
  

Basic structure

We code up the basic structure for a side menu app.

www/index.html
  
    <div>
      <ion-side-menus>

        <ion-side-menu-content>
          primary content
        </ion-side-menu-content>

        <ion-side-menu side="left">
          left hand menu
        </ion-side-menu>

      </ion-side-menus>
    </div>
  

Introducing the header

We introduce the header and the button used to toggle the visibility of the left side menu:

  
    <div>
      <ion-side-menus>

        <ion-side-menu-content>
            <ion-header-bar align-title="center" class="bar-positive">
            <div class="buttons">
              <button class="button button-icon button-clear ion-navicon" />
            </div>
            <h1 class="title">Episodes</h1>
          </ion-header-bar>


          <ion-content>
            This is the main content
          </ion-content>
        </ion-side-menu-content>

        <ion-side-menu side="left">
          this is the left hand menu
        </ion-side-menu>

      </ion-side-menus>
    </div>
  

Toggle button

We hook up a controller and add the function that toggles the visibility of the left menu

index.html
  
    <div ng-controller="MainCtrl">
      <ion-side-menus>

        <ion-side-menu-content>
            <ion-header-bar align-title="center" class="bar-positive">
            <div class="buttons">
              <button class="button button-icon button-clear ion-navicon"
                ng-click="toggleLeft()" />
            </div>
            <h1 class="title">Episodes</h1>
          </ion-header-bar>


          <ion-content>
            This is the main content
          </ion-content>
        </ion-side-menu-content>

        <ion-side-menu side="left">
          this is the left hand menu
        </ion-side-menu>

      </ion-side-menus>
    </div>
  
app.js
  
    .controller('MainCtrl', function($scope,
      $ionicSideMenuDelegate) {

      $scope.toggleLeft = function() {
        $ionicSideMenuDelegate.toggleLeft();
      };
    })
  

This gets us here:

Bind data

We bind to a json array of tagtree episodes

  
    <ion-side-menu-content>
        <ion-header-bar align-title="center" class="bar-positive">
        <div class="buttons">
          <button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()" />
        </div>
        <h1 class="title">Episodes</h1>
      </ion-header-bar>


      <ion-content>
          <div class="list">
            <div class="item" ng-repeat="episode in episodes">
              {{ episode.title }}
            </div>
          </div>
      </ion-content>


    </ion-side-menu-content>
  
app.js
  
    .controller('MainCtrl', function($scope, $ionicSideMenuDelegate, $http) {

      $http.get('http://tagtree.tv/feed.json')
      .success(function(episodes){
        $scope.allEpisodes = episodes;
        $scope.episodes = episodes;
      });

      $scope.toggleLeft = function() {
        $ionicSideMenuDelegate.toggleLeft();
      };
    })
  

Filter the list

We introduce some code to filter the episodes based on the selection from the left hand menu:

We bind to a json array of tagtree episodes

  
<body ng-app="tagtree">
    <div ng-controller="MainCtrl">
      <ion-side-menus>

        <ion-side-menu-content>
            <ion-header-bar align-title="center" class="bar-positive">
            <div class="buttons">
              <button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()" />
            </div>
            <h1 class="title">Episodes</h1>
          </ion-header-bar>


          <ion-content>
              <div class="list">
                <div class="item" ng-repeat="episode in episodes">
                  {{ episode.title }}
                </div>
              </div>
          </ion-content>


        </ion-side-menu-content>

        <ion-side-menu side="left">
          <ul class="list">
            <a ng-click="filterBy('all')" class="item" menu-close>all</a>
            <a ng-repeat="techItem in tech" ng-click="filterBy('{{techItem}}')" class="item" menu-close>{{techItem}}</a>
          </ul>
        </ion-side-menu>

      </ion-side-menus>
    </div>
  </body>
  
app.js
  
    .controller('MainCtrl', function($scope, $ionicSideMenuDelegate, $http) {
      $scope.tech = [
        'node',
        'graphics',
        'es6',
        'mv'
      ];


      $http.get('http://tagtree.tv/feed.json')
      .success(function(episodes){
        $scope.allEpisodes = episodes;
        $scope.episodes = episodes;
      });

      $scope.filterBy = function(filter){
        if(filter === 'all'){
          return $scope.episodes = $scope.allEpisodes;
        }
        $scope.episodes = $scope.allEpisodes.filter(function(ep){return ep.tech.indexOf(filter) > -1;})
      }



      $scope.toggleLeft = function() {
        $ionicSideMenuDelegate.toggleLeft();
      };
    })
    

This is what we end up with

Wrap up

We've barely scratched the surface of what the ionic framework has to offer, but hopefully enough to let you realize how powerful and well positioned the framework is.