Usare i controller in Foundation for Apps

Con la versione 6, Foundation porta con se anche un nuovo framework: Foundation for Apps!

Come si può intuire, è indirizzato al mobile.

In pratica permette di sviluppare applicazione mobile-oriented, con la possibilità di integrarle in strumenti come Apache Cordova.

Il tutto è basato su Foundation 6 (ovviamente), e su AngularJS.

Se create una nuova app, noterete che non ci sono i classici controller di AngularJS ai quali siamo abituati.

Tutto questo perchè ogni pagina, di default, si riferisce ad un controller di default: il DefaultController.

Infatti la pagina si presenta con una cosa del genere:

---
name: login
url: /
---

<div class="grid-container">
  <h1>Login</h1>
  <label>
    Username
    <input type="text" id="username" ng-model="user.username">
  </label>
  <label>
    Password
    <input type="password" id="password" ng-model="user.password">
  </label>
  <button type="button" class="alert button">Login</button>
</div>

Notate le prime righe, che identificano il nome del file e il path.

E il codice Javascript invece:

(function() {
  'use strict';

  angular.module('application', [
      'ui.router',
      'ngAnimate',
      'foundation',
      'foundation.dynamicRouting',
      'foundation.dynamicRouting.animations'
    ])
    .config(config)
    .run(run);

  config.$inject = ['$urlRouterProvider', '$locationProvider'];

  function config($urlProvider, $locationProvider) {
    $urlProvider.otherwise('/');
    $locationProvider.html5Mode({
      enabled: false,
      requireBase: false
    });
    $locationProvider.hashPrefix('!');
  }

  function run() {
    FastClick.attach(document.body);
  }

})();

Come vedete senza controller.

Se invece volessimo usare dei controller personalizzati per ogni pagina (cosa probabile)?

Ad esempio, vogliamo impostare come prima pagina quella di login.

Creiamo un file login.html nella directory templates (se non l'abbiamo già creata) con questo dentro:

---
name: login
url: /
controller: LoginController
---

<div class="grid-container">
  <h1>Login</h1>
  <label>
    Username
    <input type="text" id="username" ng-model="user.username">
  </label>
  <label>
    Password
    <input type="password" id="password" ng-model="user.password">
  </label>
  <button type="button" class="alert button" ng-click="login();">Login</button>
</div>

Come vedete abbiamo impostato il path come se fosse la root, ed abbiamo aggiunto il nome del controller.

A questo punto nel file app.js:

(function() {
  'use strict';

  angular.module('application', [
      'ui.router',
      'ngAnimate',
      'foundation',
      'foundation.dynamicRouting',
      'foundation.dynamicRouting.animations'
    ])
    // LOGIN CONTROLLER
    .controller('LoginController', ['$rootScope', '$scope', '$stateParams', '$state', '$controller'
      function($rootScope, $scope, $stateParams, $state, $controller) {
        angular.extend(this, $controller('DefaultController', {
          $rootScope: $rootScope,
          $scope: $scope,
          $stateParams: $stateParams,
          $state: $state
        }));
        // DO STUFF
        $rootScope.title = "Login";
      }
    ])
    .config(config)
    .run(run);

  config.$inject = ['$urlRouterProvider', '$locationProvider'];

  function config($urlProvider, $locationProvider) {
    $urlProvider.otherwise('/');
    $locationProvider.html5Mode({
      enabled: false,
      requireBase: false
    });
    $locationProvider.hashPrefix('!');
  }

  function run() {
    FastClick.attach(document.body);
  }

})();

Notate che abbiamo creato un controller che estende DefaultController.

Come unica operazione, ci ho messo l'impostazione del titolo.

Se devo essere sincero, ancora non ho capito se questo framework mi piace o no.

Per adesso mi trovo meglio con altre alternative.

Però provatelo, ne vale la pena.

Enjoy!