Sites to read about AngularJS and Ionic

Top 10 angularjs mistakes:
https://www.airpair.com/angularjs/posts/top-10-mistakes-angularjs-developers-make#9-manual-testing


Best practice dir structure angularjs/ionic:
https://scotch.io/tutorials/angularjs-best-practices-directory-structure
I've tried both. Unsure which one I think is best. I think the most important point is to create a directory structure to group your files according to how they are used. So that other people can understand how you program is structured more quickly.


Tips for ionic:
http://www.betsmartmedia.com/what-i-learned-building-an-app-with-ionic-framework (https://web.archive.org/web/20150925034548/http://www.betsmartmedia.com/what-i-learned-building-an-app-with-ionic-framework)


Intro and how to use jasmine unit test framework:
http://jasmine.github.io/edge/introduction.html
Great test tool!

Promises in AngularJS

 

Introduction to AngularJS promises (as a cartoon):
http://andyshora.com/promises-angularjs-explained-as-cartoon.html

Promise anti-patterns
Flatten chaining, clean up, and broken chains:
http://taoofcode.net/promise-anti-patterns/

HTTP promise not like Q promise, use deferred:
http://weblog.west-wind.com/posts/2014/Oct/24/AngularJs-and-Promises-with-the-http-Service

AngularJS Q:
https://docs.angularjs.org/api/ng/service/$q

AngularJS vs Ionic abstract state

Ionic is a wrapper for AngularJS and one of the changes that they've done is to the abstract state of the ui-router. I tried to follow an AngularJS tutorial for abstract state and added the following code:
.state('myparent', {
    abstract: true,
    url: '/myparent',
    // Note: abstract still needs a ui-view for its children to populate.
    // You can simply add it inline here.
    template: '<ui-view/>',
    controller: 'MyParentController'
})
.state('myparent.mychild', {
    url: '/mychild',
    templateUrl: 'mychild.view.html',
    controller: 'MyChildController'
})

Inside mychild.view.html I had:

<ion-view>
    <ion-content>
    ...
    </ion-content>
</ion-view>

This resultet in a blank page (although the controller was executed since it fetched the model from my backend). Also my navigation, for which I used $ionicHistory, was all messed up.

The trick apparently is to use ion-nav-view instead of ui-view in the abstract state:
.state('myparent', {
    abstract: true,
    url: '/myparent',
    // Note: abstract still needs a ui-view for its children to populate.
    // You can simply add it inline here.
    template: '<ion-nav-view/>',
    controller: 'MyParentController'
})

Lesson learned, use Ionic tutorials. :)

Source:
http://learn.ionicframework.com/formulas/navigation-and-routing-part-2/
https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#abstract-states
http://ionicframework.com/docs/api/service/$ionicHistory/