Angular css3 slide , Sync

<!DOCTYPE html>
<html>

  <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" data-semver="1.9.1" data-require="jquery@*"></script>
    <script data-require="bootstrap@3.0.0" data-semver="3.0.0" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <link data-require="bootstrap@3.0.0" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
    <link data-require="font-awesome@4.0.3" data-semver="4.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />
    <link href="style.css" rel="stylesheet" />
    
    <script src="http://code.angularjs.org/1.2.1/angular.js" data-semver="1.2.1" data-require="angular@1.2.1"></script>
    <script src="http://code.angularjs.org/1.2.1/angular-route.js" data-semver="1.2.1" data-require="angular-route@1.2.0"></script>
    <script src="http://code.angularjs.org/1.2.0/angular-animate.js" data-semver="1.2.0" data-require="angular-animate@1.2.0"></script>
    <script src="http://code.angularjs.org/1.2.1/angular-sanitize.js" data-semver="1.2.1" data-require="angular-sanitize@1.2.0"></script>
    
    <script src="script.js"></script>
  </head>

  <body ng-app="myApp">
    <ul class="nav nav-pills">
      <li ng-class="{active: matchesRoute('/home', '')}">
        <a href="#/home" class="btn" style="font-size: 14px">
          <i class="fa fa-home"></i> Home</a>
      </li>
      <li ng-class="{active: matchesRoute('/bellsAndWhistles')}">
        <a href="#/bellsAndWhistles"><i class="fa fa-bell"></i> BellsAndWhistles</a>
      </li>
      <li ng-class="{active: matchesRoute('/about')}"> 
        <a href="#/about"><i class="fa fa-info"></i> About</a>
      </li>
    </ul>
    <div class="view-animate-container">
      <div class="well slide" ng-view>
        <!-- view container. Asynchronously loaded view templates are placed here -->
      </div>
    </div>
  </body>

</html>

// Code goes here

angular.module('myApp', ['ngRoute', 'ngAnimate'])
.run(function($rootScope, $location){
  $rootScope.matchesRoute = function() {
    for(var i=0; i<arguments.length; i++) {
      if($location.path() === arguments[i]) {
        return true;
      }
    }
    return false;
  }
})
.config(function($routeProvider) {
    $routeProvider
      .when('/bellsAndWhistles', {templateUrl: 'bellsAndWhistles.html', controller: 
        function ($scope,$timeout) {
          // $scope.text = null;
          $timeout(function(){
                $scope.text = 'aaaaaaaaaaaaaaaaaaa';
            }, 800);
        }
      })
      .when('/about',            {templateUrl: 'about.html',            controller: angular.noop()})
      .otherwise({redirectTo: '', templateUrl: 'home.html'});
});

html, body{
  height: 100%;
}

.view-animate-container {
    position: relative;
    overflow: hidden;
    height:100%;
}

.view-animate-container > .slide.ng-enter,
.view-animate-container > .slide.ng-leave {
    -webkit-transition: all ease 0.5s;
       -moz-transition: all ease 0.5s;
         -o-transition: all ease 0.5s;
            transition: all ease 0.5s;  
    width: 100%;
    position:absolute;
}

.view-animate-container > .slide.ng-enter {
    left:100%;
    opacity: 0;
}
.view-animate-container > .slide.ng-enter.ng-enter-active {
    left:0;
    opacity: 1;
}
.view-animate-container > .slide.ng-leave.ng-leave-active {
    left: -100%;
    opacity: 0;
}

google search

  angularjs dynamic html transition
  

#ANIMATIONS VS TRANSITIONS
http://brettdewoody.com/angular-js-nganimate-transitions-guide/

#onLoad Ondestroy
app.controller('Child1', function($scope) {
  console.log('Child 1 has been constructed');
  $scope.$on('$viewContentLoaded', function() {
    console.log('Child1 has loaded');
  });
  $scope.$on('$destroy', function() {
    console.log('Child1 is no longer necessary');
  })
});

# pre compile
https://lostechies.com/derickbailey/2012/04/10/javascript-performance-pre-compiling-and-caching-html-templates/


# 4-way Data-binding
http://140dev.com/twitter-api-programming-tutorials/twitter-api-database-cache/
http://fitc.ca/presentation/4-way-data-binding-offline-data-synchronization-in-angularjs/
https://github.com/couchbase/couchbase-lite-ios/wiki/Replication-Algorithm
구글 검색은 database sync algorithm !!!


#evernote sync
https://blog.evernote.com/tech/2014/01/28/synchronization-speedupification/
https://dev.evernote.com/doc/reference/NoteStore.html#Struct_SyncChunk


#sync
Algorithm data synchronization (SQLite to Online Database)
The best practice is to model your application using a content provider and then connect a sample sync adapter. 
http://developer.android.com/resources/samples/NotePad/index.html 
http://developer.android.com/resources/samples/SampleSyncAdapter/index.html

For effective synchronization, the service should support etag (HTTP spec) for each record, updated (ATOM spec) for collections. 
Additionally to support resumable update, totalResults, startIndex, itemsPerPage (OpenSearch spec) and ordering by updated is necessary.

#image cache, collection repeat
https://bpoplauschi.wordpress.com/2014/03/21/ios-image-caching-sdwebimage-vs-fastimage/
https://github.com/rs/SDWebImage
https://github.com/mallzee/cordova-collection-repeat-image-plugin
https://github.com/driftyco/ionic/blob/master/js/angular/directive/collectionRepeat.js

#social web - schema design
social network activity change schemaでgoogle検索
indexeddb sync with serverでgoogle検索

http://stackoverflow.com/questions/28783967/activity-streams-feeds-news-in-social-network-database-schema
http://highscalability.com/blog/2013/10/28/design-decisions-for-scaling-your-high-traffic-feeds.html

#redis feed activity
redis feed systemでgoogle検索
https://medium.com/@bansal_ankur/design-a-news-feed-system-6bf42e9f03fb#.h9m9p7y62

#theme
http://www.jotform.com/theme-store/

<div>
  <h3>Catfood here</h3>
  {{text}}
</div>

<h3>about</h3>

<h1>Angular 1.2.0 App with routes, async templates, ng-view and css3 slide animation</h1>