Home / Programmazione / Javascript - AJAX / Usare i template in Ionic
Mattepuffo

Usare i template in Ionic

Usare i template in Ionic

Quando creaimo un progetto di tipo blank in Ionic, ci ritroviamo con una pagina bianca con praticamente niente di pre-impostato.

Se vogliamo aggiungere più pagine, usando il sistema dei template per riutilizzare della parti comuni, dobbiamo modificare un pò il codice.

Andando per gradi, questi gli step che ho fatto io.

Modifcate index.htlm in questo modo:

<!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>
    </head>
    <body ng-app="starter">
    <ion-nav-bar class="bar-stable">
        <ion-nav-back-button>
        </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
</body>
</html>

Aggiungete una pagina home.html (o come volete insomma):

<ion-view view-title="Home">
    <ion-content ng-controller="HomeCtrl">
        <h1>HOME PAGE</h1>
    </ion-content>
</ion-view>

Modificate il file app.js in questo modo:

var app = angular.module('starter', ['ionic']);
app.run(function ($ionicPlatform) {
    $ionicPlatform.ready(function () {
        if (window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            cordova.plugins.Keyboard.disableScroll(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
});
app.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('index', {
        url: '/',
        templateUrl: 'home.html',
        controller: 'HomeCtrl'
    });
    $urlRouterProvider.otherwise('/');
});
app.controller('HomeCtrl', function ($scope) {
    console.log('HOME');
});

Qui abbiamo aggiunto una configurazione iniziale per le route, e un controller per la pagina creata sopra.

Di tutto ciò tenente presente comunque due cose:

  • generalmente le pagine di template vengono messe in una sottodirectory di nome template; non è obbligatorio ma è più ordinato
  • generalmente i controller vengono messi in un altro file Javascript; stesso discorso di quello sopra

A parte questo, dovrebbe funzionare tutto.

Enjoy!