[SOLVED] Source code from Codepen.io

Hello all !

I’m starting a new app, and I wanted to try Ionic, and it seems to be really good !

In my app, I have to build something like this codepen http://codepen.io/gnomeontherun/pen/tbvdH I found in this forum. I’m trying for several hours now, but I really don’t understand how to impletement this with every views in the « templates » directory, instead of « script » in the index.html.

If you could explain to me how to do this, it would really help to go further :slight_smile:

Many thanks in advance,


You would just make an html file with the contents of the template, minus the script tags, then point to that file in your states config.

Hey ! Thanks for answering me. That’s what I thought I have to do, but It only shows the nav (left and right). Maybe am I wrong somewhere ? Here is my index.html file

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

        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">

        <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
        <link href="css/ionic.app.css" rel="stylesheet">

        <!-- ionic/angularjs js -->
        <script src="lib/ionic/js/ionic.bundle.js"></script>

        <!-- cordova script (this will be a 404 during development) -->
        <script src="cordova.js"></script>

        <!-- your app's js -->
        <script src="js/app.js"></script>
        <script src="js/controllers.js"></script>
        <script src="js/services.js"></script>
      <body ng-app="starter" animation="slide-left-right-ios7">
          The nav bar that will be updated as we navigate between views.
        <ion-nav-bar class="bar-stable nav-title-slide-ios7">
          <ion-nav-back-button class="button-icon icon  ion-ios7-arrow-back">

          <ion-side-menu-content ng-controller="NavCtrl">
            <ion-nav-bar class="bar-positive">
              <ion-nav-back-button class="button-icon ion-arrow-left-c">
            <ion-nav-buttons side="left">
              <button class="button button-icon button-clear ion-navicon" ng-click="showMenu()">
            <ion-nav-buttons side="right">
              <button class="button button-icon button-clear ion-ios7-gear" ng-click="showRightMenu()">
            <ion-nav-view animation="slide-left-right"></ion-nav-view>
          <ion-side-menu side="left">
            <ion-header-bar class="bar bar-header bar-assertive">
              <h1 class="title">Left Menu</h1>
            <ion-content has-header="true">
              <ul class="list">
                  <a class="item" menu-close nav-clear href="#/tab/home">Home</a>
                  <a class="item" menu-close href="#/tab/facts">Facts</a>
                  <a class="item" menu-close href="#/tab/facts2">More Facts</a>
          <ion-side-menu side="right">
            <ion-header-bar class="bar bar-header bar-dark">
              <h1 class="title">Right Menu</h1>
              <ul class="list">
                  <a class="item" menu-close href="#/search">Search</a>
                  <a class="item" menu-close  href="#/settings">Settings</a>

and my app.js

// Ionic Starter App

    // angular.module is a global place for creating, registering and retrieving Angular modules
    // 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
    // the 2nd parameter is an array of 'requires'
    // 'starter.services' is found in services.js
    // 'starter.controllers' is found in controllers.js
    angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

    .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova && window.cordova.plugins.Keyboard) {
        if (window.StatusBar) {
          // org.apache.cordova.statusbar required

    .config(function($stateProvider, $urlRouterProvider) {

        .state('search', {
          url: '/search',
          templateUrl: 'search.html'
        .state('settings', {
          url: '/settings',
          templateUrl: 'settings.html'
        .state('tabs', {
          url: "/tab",
          abstract: true,
          templateUrl: "tabs.html"
        .state('tabs.home', {
          url: "/home",
          templateUrl: "home.html",
          controller: 'HomeTabCtrl'
        .state('tabs.facts', {
          url: "/facts",
          templateUrl: "facts.html"
        .state('tabs.facts2', {
          url: "/facts2",
          templateUrl: "facts2.html"
        .state('tabs.about', {
          url: "/about",
          templateUrl: "about.html"
        .state('tabs.navstack', {
          url: "/navstack",
          templateUrl: "nav-stack.html"
        .state('login', {
          url: "/login",
          templateUrl: "nav-stack.html"
        .state('tabs.contact', {
          url: "/contact",
          templateUrl: "contact.html"



templateUrl: 'search.html' should point to the template relative to your index.html. So it should be

      templateUrl: 'templates/search.html'

Ohw. Thanks a lot, I feel so dummy now !

Glad to be able to help :smile: