Devoxx 2015 : Ionic lab - Exo 1

app.html

<ion-view view-title="App">
  <ion-nav-bar class="bar-positive"></ion-nav-bar>
  <ion-content>
    <ion-list>
      <ion-item class="item-avatar" ng-repeat="message in messages">
        <img ng-src="{{message.user.avatar}}">
        <h2>{{message.user.name}}</h2>
        <p>{{message.content}}</p>
      </ion-item>
    </ion-list>
  </ion-content>

  <ion-footer-bar class="item-input-inset">
    <label class="item-input-wrapper">
      <i class="icon ion-ios7-search placeholder-icon"></i>
      <input type="text" placeholder="Message" ng-model="message">
    </label>
    <button type="submit" class="button button-clear" ng-click="sendMessage(message)">Envoyer</button>
  </ion-footer-bar>
</ion-view>

controllers.js

angular.module('app')

.controller('AppCtrl', function($scope){
  'use strict';

  $scope.messages = [
    {user: {avatar: 'http://ionicframework.com/img/docs/venkman.jpg', name: 'Venkman'}, content: 'Back off, man. I\'m a scientist.'},
    {user: {avatar: 'http://ionicframework.com/img/docs/spengler.jpg', name: 'Egon'}, content: 'We\'re gonna go full stream.'},
    {user: {avatar: 'http://ionicframework.com/img/docs/stantz.jpg', name: 'Ray'}, content: 'Ugly little spud, isn\'t he?'},
    {user: {avatar: 'http://ionicframework.com/img/docs/winston.jpg', name: 'Winston'}, content: 'That\'s a big Twinkie.'},
    {user: {avatar: 'http://ionicframework.com/img/docs/tully.jpg', name: 'Tully'}, content: 'Okay, who brought the dog?'},
    {user: {avatar: 'http://ionicframework.com/img/docs/barrett.jpg', name: 'Dana'}, content: 'I am The Gatekeeper!'},
    {user: {avatar: 'http://ionicframework.com/img/docs/slimer.jpg', name: 'Slimer'}, content: 'Boo!'}
  ];

  $scope.sendMessage = function(message) {
    $scope.messages.unshift({
      content: message
    })
    $scope.message = '';
  };
});