Why to use abstract keyword in angular js?

When using nested states an abstract state can have child states but cannot be activated itself.

Reference:

Nested States & Nested Views

All right I will just post some of my experience using ionic.

- Ui router parent/child scope inheritance

This is not specific to ionic. Sometimes if you want to share some common function in relation to views, by using scope inheritance, you can consolidate default/share function in the parent, or setup default states in your view, or inherit resolved dependencies.

$stateProvider.state('app', {
  abstract: true,
  templateUrl: 'main.html',
  resolve: {
    commonMeta: ["$stateParams","$http", function($stateParams, $http) {
      return $http.get("/commonMeta/" + $stateParams.id);
    }]
  },
  controller: ["$scope", function($scope) {
    // controller should be in a separate file
    $scope.data = {};
    $scope.state = {};
    $scope.display = function() {
      // common logic for page display
    };
    $scope.restoreCustomerPreference = function() {
      // restore customer preference from say localstorage
    };
    $scope.init = function() {
      // 'this' will be the child $scope
      this.state = {
        error: false
      };
      this.restoreCustomerPreference();
    };
  }],
});
$stateProvider.state('app.dashboard', {
  url: '/dashboard',
  views: {
    todos: {
      template: '<ion-nav-view></ion-nav-view>'
    }
  },
  resolve: {
    data: ["$http", function($http) {
      return $http.get("/getDashboard/");
    }]
  },
  controller: ["$scope","commonMeta","data" function($scope,commonMeta,data) {
    // controller should be in a separate file
    $scope.data = data;
    $scope.display = function() {
      // override the display logic
      $
    };
    $scope.init();
  }]
});
$stateProvider.state('app.todos', {
  url: '/todos',
  views: {
    todos: {
      template: '<ion-nav-view></ion-nav-view>'
    }
  },
  resolve: {
    data: ["$http", function($stateParams, $http) {
      return $http.get("/getTodos/");
    }]
  },
  controller: ["$scope", function($scope) {
    // controller should be in a separate file
    $scope.data = data;
    $scope.someFn = function() {
      // some function
    };
    $scope.init();
  }]
});

Try to use controller: ["$scope", function($scope) { }] this form of dependencies injection, so your codes do not break when minified.

---

- ionic-slide-box

Using ionic-slide-box can develop app that user can slide left and right to get to next page, similar to facebook, by using a simple directive to fetch your template.

angular.module("directives",[])
.directive("slideItem", ["$http","$templateCache","$compile",function($http,$templateCache,$compile) {
  return {
    replace: false,
    restrict: "EA",
    scope: {
      template: "@"
    },
    link: function(scope, iElement, iAttrs, controller) {
      var events = scope.events();

      $http.get(iAttrs.template, {cache: $templateCache})
      .success(function(result) {
        iElement.replaceWith($compile(result)(scope));                
      });

    }
  };
}]);

The template file can be hardcoded one:

<ion-view>
  <ion-slide-box show-pager="false">
    <ion-slide>
      <slide-item template="templates/dashboard.html"></slide-item>
    </ion-slide>
    <ion-slide>
      <slide-item template="templates/todos.html"></slide-item>
    </ion-slide>
    <ion-slide>
      <slide-item template="templates/sumary.html"></slide-item>
    </ion-slide>
  </ion-slide-box>
</ion-view>

or using ng-repeat:

<ion-view>
  <ion-slide-box show-pager="false">
    <ion-slide ng-repeat="o in slides">
      <slide-item template="templates/{{o.template}}.html" ></slide-item>
    </ion-slide>
  </ion-slide-box>
</ion-view>

• Weinre is a debug tool that you must have, it can debug even when your app is installed to a real device. without that, when your app start with a blank screen you just don't know what to look for.

• ngCordova is a wrapper for cordova function develop by ionic too.

• Android device can be test easily, TestFlight is good for ios testing.