Build Fishing Record(2)List and Detail with RESTful Resource

Build Fishing Record(2)List and Detail with RESTful Resource

I need customer login form.
> meteor remove insecure
> meteor add accounts-password
> meteor add dotansimha:accounts-ui-angular
> meteor remove autopublish

I will redo something in ionic, not meteor. I do not like how the meteor framework scaling.

Following this document
http://ccoenraets.github.io/ionic-tutorial/install-ionic.html

Make sure I have the latest tool.
> npm update -g cordova ionic


> ionic --version && cordova --version
1.7.12
5.4.1

Base don the sample project, set up the RESTful server, I just temp use this, later I will set up my own RESTful server.
> git clone https://github.com/ccoenraets/ionic-tutorial

go to the server directory
> npm install

> node server.js

Visit something like this to verify the server resource is ok
http://localhost:5000/sessions/1

After create the ionic framework project, we can start our server.
> ionic serve --lab

Visit the 8100, it will show us the console view
http://localhost:8100/#/app/playlists

Visit the 8100 with ionic-lab, it will show use the android and ios
http://localhost:8100/ionic-lab

In the demo, we are using ngResource to access to the RESTful API
Service Layer
Create file www/js/services.js
angular.module('starter.services', ['ngResource'])

.factory('Session', function ($resource){
    return $resource("http://localhost:5000/sessions/:sessionId");
});

Framework Layer
Adding this service codes to the index.js
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="lib/ionic/js/angular/angular-resource.min.js"></script>

    <script src="js/app.js"></script>
    <script src="js/services.js"></script>
    <script src="js/controllers.js"></script>

Controller Layer
Write the Controller in angularJS
angular.module('starter.controllers', ['starter.services'])

.controller('SessionsCtrl', function($scope, Session) {
  $scope.sessions = Session.query();
})

.controller('SessionCtrl', function($scope, $stateParams, Session) {
  $scope.session = Session.get({sessionId:$stateParams.sessionId});
});

Template Layer
Create sessions.html template
<ion-view view-title="Sessions">
  <ion-content>
    <ion-list>
      <ion-item ng-repeat="session in sessions"
                href="#/app/sessions/{{session.id}}">{{session.title}}</ion-item>
    </ion-list>
  </ion-content>
</ion-view>

Create the session.html template
<ion-view view-title="Session">
  <ion-content>
    <div class="list card">
      <div class="item">
        <h3>{{session.time}}</h3>
        <h2>{{session.title}}</h2>
        <p>{{session.speaker}}</p>
      </div>
      <div class="item item-body">
        <p>{{session.description}}</p>
      </div>
      <div class="item tabs tabs-secondary tabs-icon-left">
        <a class="tab-item">
          <i class="icon ion-thumbsup"></i>
          Like
        </a>
        <a class="tab-item">
          <i class="icon ion-chatbox"></i>
          Comment
        </a>
        <a class="tab-item">
          <i class="icon ion-share"></i>
          Share
        </a>
      </div>
    </div>
  </ion-content>
</ion-view>

Route Layer
    .state('app.sessions', {
      url: '/sessions',
      views: {
        'menuContent': {
          templateUrl: 'templates/sessions.html',
          controller: 'SessionsCtrl'
        }
      }
    })

  .state('app.session', {
    url: '/sessions/:sessionId',
    views: {
      'menuContent': {
        templateUrl: 'templates/session.html',
        controller: 'SessionCtrl'
      }
    }
  });

Open menu.html to modify the static menu.html to point to the new URL.

Build and Start Android/iOS
> ionic build ios

> ionic platform add android

> ionic build android

We can always remove the platform and then add it back
> ionic platform remove ios

References:
http://sillycat.iteye.com/blog/2266131
http://sillycat.iteye.com/blog/2267656