[SOLVED] Source code from Codepen.io


#1

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,

Kai23


#2

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.


#3

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>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>

        <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>
      </head>
      <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">
            Back
          </ion-nav-back-button>
        </ion-nav-bar>

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

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) {
          cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
          // org.apache.cordova.statusbar required
          StatusBar.styleDefault();
        }
      });
    })

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

      $stateProvider
        .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"
        });


      $urlRouterProvider.otherwise("/login");

    });

#4

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

      templateUrl: 'templates/search.html'

#5

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


#6

Glad to be able to help :smile: