Building Mobile Apps with the Ionic Framework and AngularJS=Steve Michelotti;Note=Erxin.txt

Building Mobile Apps with the Ionic Framework and AngularJS=Steve Michelotti;Note=Erxin

# Introduction
- code focus course 
- course overview 
    + introduction 
    + getting started with ionic 
    + navigation and routing with ionic 
    + ionic components 
    girds, lists, cards, ...
    + data and caching for off line functionality 
    + mapping 
    + customizing ionic using sass 
    + ngCordova to use access native device feature 
    
    + basic request 
    angularjs, get start 
    angularjs, fundamentals 
    
- what is ionic 
    + open source framework for mobile-optimized library for html/js/css 
    + built on top of angularjs 
    + built for native cordova apps 
    + bootstrap for mobile 
    + ionicframework.com is the home page 
    + click the getting start and doc to check the documentation 
    + the showcase are the exiting apps which are build with ionic 
    + subscribe the ionic blog 
- cordova what and why? 
wraps native api 
it is cross platform 
native mobile apps using html/js/css 
re-use existing web skills 
re-use existing web frameworks 
- what we will be building 
http://www.elite-schedule.net/2011 
build a mobile accelerate functions for the website 

- create a site map 

# Getting start with ionic 
- overview 
    + ionic command line features 
    + starting a new project 
    + run your app 
    + ionic starter templates 
    + setting up your development environment 
    
- ionic command line features 
start, starts a new ionic project 
serve, starts a local development server 
platform, configure platform targets 
build, locally build app for a platform 
emulate, app in simulator 
run, run app on device 

- installing ionic 
    + install nodejs 
    + use console2 command prompt tool 
    + install ionic 
    $ npm install -g ionic 
    
    + install cordova 
    $ npm install -g cordova 

- starting a new project 
    + start a new project 
    $ ionic start [appName] [template]
    
    $ ionic start myApp blank 
    this command will create the directory structure 
    
    + open subline IDE 

- run the app with a browser 
    + local browser 
        * go to ionic project directory 
        * use serve command to start a development server 
        $ ionic serve 
        
        * instead of use chrome we could use canary which add newest of the chrome features, be forewared designed for developers and early adopters 
        
        canary with F12 will supply a emulation mode for perfect specify device size, it will also automatic change the user agent 
        
        * after change the code ionic will watch the file change and it will automatic restart the server 
        
- run the app with an emulator 
    + build the app 
    $ ionic platform add android 
    $ ionic build android 
    $ ionic emulate android 
    
- run the app on read device, if set platform to execute in the real device with android sdk 
$ionic platform and android 

- ionic starter template 
blank 
tabs, basic tabs navigation from the bottom 
sidemenu 
maps 

- setting up a development environment 
$ ionic start project-name tabs 
tabs is the template name 

$ ionic serve 
will start the developer service 

    + use the sidemenu template 
$ ionic start project-name sidemenu 
use the sidemenu template 

    + use sublime as IDE which is lightweight 
        * init ionic project 
        * open project directory 

- setting up a development environment with visual studio 
    + create new project 
    + select blank javascript template 
    + copy the previous ionic created project template and replace project files which is created by VS 
    + the code run under the teler simulator 
        
- setting up codepen, setting up a codepen account. it could be used as scrach pad 
http://codepen.io/ionic 

there are lots of example for ionic on the codepen.io 
    + similar to JSFiddler or Plunker for tring ionic 
    
- summary 


# Navigation and routing 
- overview 
headers & footers -> tabs -> sidemenu-> routing 

- navigation for elite schedule 
    + site map 
    and decide which kinds of views to navigate between each views 
    
- ionic header and footers 
<body ng-controller="myCtrl">
    <ionic-header-bar class="bar-position">
    </ionic-header-bar>
    
    <div class="bar bar-header bar-positive">
        <div class="title">{{mytitle}}</div>
    </div>
    
    <div class="bar bar-footer bar-balanced">
        <div class="title">{{myfooter}}</div>
    </div>
</body>

the ionic-header-bar is a ionic directive. there are lots of ionic customized directives 

- introduction to ionic tabs 
<ion-tabs class="tabs-energized tabs-icon-top">
    <ion-tab title="Dashboard" icon="ion-home" href="#">
    </ion-tab>
    
    <ion-tab title="favorites" icon="ion-star" href="#">
    </ion-tab>
    
    <ion-tab title="Account" icon="ion-gear-a" href="#">
    </ion-tab>
</ion-tabs>

we could also change the style to tabs-icon-only 

    + a list of ionc could be found at ionicons.com 
    
- tabs setting up the initial structure 
<header>

    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="cordova.js"></script>

    <script src="js/app.js"></script> 
    <script src="js/controllers.js"></script>
</head>
<body> ng-app="eliteApp">
    <ion-nav-view></ion-nav-view>
</body>

    + add app.js file at /www/app/app.js 
angular.module("eliteApp", ["ionic"])
.run(function($ionicPlatform){
    $ionicPlatform.ready(function(){
        if(window.cordova && window.cordova.plugins.Keyboard){
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        
        if(window.StatusBar){
            //org.apache.cordova.statusbar required
            StatusBar.styleDefault();
        }
    });
})
.config(function($stateProvider, $urlRouterProvider){
    $stateProvider.state('home', {
        url:"/home",
        templateUrl:"app/home/home.html"
    });
    
    $stateProvider.state("app", {
        url:"/app"
        templateUrl:"app/layout/menu-layout.html"
    });
    
    $urlRouterProvider.otherwise('/app');
});

    + create home folder at /www/app/home/home.html 
<ionic-nav-bar class="bar-balanced">
    <h1 class="title">Elite Schedule</h1>
</ionic-nav-bar>

<ion-tabs class=...>
    <ion-tab title="Leagues">
        <ion-view></ion-view>
    </ion-tab>
</ion-tabs>

- side menu, setting up the initial structure 
    + add new folder /www/app/layout 
    
    + add new file /www/app/layout/menu-layout.html 
    <ion-side-menus>
        <ion-pane ion-side-menu-content>
            <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
        </ion-nav-bar>
        
        <icon-side-menu side="left">
            <header class="bar bar-header ...">
            </header>
            
            <ion-content class="has-header">
                <ion-list>
                    <ion-item nav-clear menu-close>Home</ion-item>
                    <ion-item nav-clear menu-close>Teams</ion-item>
                </ion-list>
            </ion-content>
        </icon-side-menu>
    </ion-side-menus>
    
- introduction to Angular UI Router, ionic use all angular UI router for all routing needs 
    + organize into state machines and translate into selecting the appropriate view 
    + allows for nested views 
    + 3 ways to active view 
    ui-sref 
    url 
    $state.go() 
    
    + state have 
    unique name (must) 
    url, supports parameters 
    template/templateURL, used to point to a physical resource, specifically the html partial
    optionally have controllers 
    
    $stateProvider.state("contacts", {
        url:"/contacts",
        templateUrl:"contacts.html"
    })
    
    + nested states/views
    angular UI router supports nested states 
    uses dot notation to achieve nested views 
    a child state inherits propertie from parent and it combine url of parent to full url
    parent state can be abstract which means the state can't be active 
        * can have child states but not get actived itself 
        * must contain their own <ui-view> (ion-nav-view/)
        
    code example for nested states:
    $stateProvider
        .state("foo", {
            abstract:true,
            url:"/foo",
            templateUrl:"foo.html" //must contain <ui-view>
        })
        .state("foo.bar", {
            url:"/bar", //will be /foo/bar 
            tempalteUrl: "bar.html"
        })
        .state("foo.baz", {
            url:"/xxx", //will be /foo/xxx
            tempalteUrl: "baz.html"
        });
        
    the foo state is an abstract state 
    
    + active state 
    <a href="#/foo/bar">Go</a>
    
    <a ui-sref="foo.bar">Go</a>
    
    $state.go("foo.bar");
    
    + now we consider the sidemap again 
    
leagues                                             my teams 
|                   
|-----------+---------------+---------------|
|           |               |               |
teams   standings       locations       rules     
|                       |
team detail             +-location schedule 
|                       |
+-game                  --location map      

we could use home.html as the layout abstract state view for the app 

and the sub page, teams, standings, locations and rules will implement as sub state of leagues in home.html 
    
- adding routing for tabs, app.js
angular.module("eliteApp", ["ionic"])
.run(function($ionicPlatform){
    $ionicPlatform.ready(function(){
        if(window.cordova && window.cordova.plugins.Keyboard){
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        
        if(window.StatusBar){
            //org.apache.cordova.statusbar required
            StatusBar.styleDefault();
        }
    });
}) 
.config(function($stateProvider, $urlRouterProvider){
    $stateProvider.state('home', {
        abstract:true,
        url:"/home",
        templateUrl:"app/home/home.html"
    })
    .state('home.leagues', {
        url:"/leagues",     //define the child state of home 
        views:{
            "tab-leagues":{         //the view of the view defined in html 
                templateUrl: "app/home/leagues.html"
            }
        }
    })
    .state('home.myteams', {
        url:"/myteams",
        views:{
            "tab-myteams":{
                templateUrl: "app/home/myteams.html"
            }
        }
    });
    
    $stateProvider.state("app", {
        url:"/app"
        templateUrl:"app/layout/menu-layout.html"
    });
    
    $urlRouterProvider.otherwise('/home');
});

when navigate to an abstract state, the view will become blank because it is not allowed to create an instance for a abstract state 

    + goto the home.html and change ion-viewto ion-nav-view 
<ionic-nav-bar class="bar-balanced">
    <h1 class="title">Elite Schedule</h1>
</ionic-nav-bar>

<ion-tabs class=...>
    //we could use href to set where to find the temlate for the view 
    <ion-tab title="Leagues" icon="ion-home" href="#/home/leagues">
        //the name of view will be reference in the app.js in the state 
        <ion-nav-view name="tab-leagues"></ion-nav-view>   
    </ion-tab>
    
    //we could also use ui-sref which will let the framwork find the template for us 
    <ion-tab title="Leagues" icon="ion-star" ui-sref="home.myteams">
        <ion-nav-view name="tab-myteams"></ion-nav-view>
    </ion-tab>
</ion-tabs>

    + add template for the view tab-leagues and tab-myteams 
        * /app/home/myteams.html 
<ion-view>
    <ion-content class="has-header">
        <h1></h1>
    </ion-content>
</ion-view>

        * /app/home/myleagues.html
<ion-view>
    <ion-content class="has-header">
        <h1></h1>
    </ion-content>
</ion-view>

- adding routing for side menu, we are going to set the app state to abstract 
.config(function($stateProvider, $urlRouterProvider){
    $stateProvider.state('home', {
        abstract:true,
        url:"/home",
        templateUrl:"app/home/home.html"
    })
    .state('home.leagues', {
        url:"/leagues",     //define the child state of home 
        views:{
            "tab-leagues":{         //the view of the view defined in html 
                templateUrl: "app/home/leagues.html"
            }
        }
    })
    .state('home.myteams', {
        url:"/myteams",
        views:{
            "tab-myteams":{
                templateUrl: "app/home/myteams.html"
            }
        }
    });
    
    $stateProvider.state("app", {
        abstract:true, 
        url:"/app"
        templateUrl:"app/layout/menu-layout.html"
    })
    .state("app.teams", {
        url: "/teams",
        views:{
            "mainContent":{
                templateUrl:"app/teams/teams.html"
            }
        }
    })
    .state("app.team-detail", {
        url: "/teams/id",
        views:{
            "mainContent":{
                templateUrl:"app/teams/team-detail.html"
            }
        }
    })
    .state("app.game", {
        url: "/game/:id",
        views:{
            "mainContent":{
                templateUrl:"app/game/game.html"
            }
        }
    })
    .state("app.standing", {
        url: "/standing",
        views:{
            "mainContent":{
                templateUrl:"app/standing/standing.html"
            }
        }
    })
    .state("app.locations", {
        url: "/locations",
        views:{
            "mainContent":{
                templateUrl:"app/locations/locations.html"
            }
        }
    })
    .state("app.teams", {
        url: "/rules",
        views:{
            "mainContent":{
                templateUrl:"app/rules/rules.html"
            }
        }
    });
    
    $urlRouterProvider.otherwise('/home');
});

all the added child states of app are point to the mainContent view with their own template 

    + make modification for the /www/app/layout/menu-layout.html 
    <ion-side-menus>
        <ion-pane ion-side-menu-content>
            <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
            </ion-nav-bar>
            <ion-nav-view name="mainContent">
            </ion-nav-view>
        </ion-pane>
        
        <icon-side-menu side="left">
            <header class="bar bar-header ...">
            </header>
            
            <ion-content class="has-header">
                <ion-list>
                    <ion-item nav-clear menu-close ui-sref="home.leagues">Home</ion-item>
                    <ion-item nav-clear menu-close ui-sref="app.teams">Teams</ion-item>
                    <ion-item nav-clear menu-close ui-sref="app.standing">Standings</ion-item>
                    <ion-item nav-clear menu-close ui-sref="app.location">Location</ion-item>
                    <ion-item nav-clear menu-close ui-sref="app.rules">Rules</ion-item>
                </ion-list>
            </ion-content>
        </icon-side-menu>
    </ion-side-menus>
    
    + add states for the view, check the preivous states which inherit from the app state 
    + add html teamplates
    add new folder /www/app/teams
    
    add team.html /www/app/teams/teams.html 
    add team-detals.html /www/app/teams/team-details.html 
    add game.html /www/app/game/game.html 
    ...
    
    + update the side menu html to point to each new added views 
    
- route parameters, navigate to the detail screen 
.state("app.teams", {
    url: "/teams", 
    views: {
        "mainContent": {
            templateUrl: "app/teams/teams.html"
        }
    }
})
.state("app.teams-detail", {
    url: "/teams/:id", //:id route parameters, the /team/segment the segment is the id 
    views: {
        "mainContent": {
            templateUrl: "app/teams/teams-detail.html"
        }
    }
})

    + add teams.html 
<ion-view>
    <ion-content class="has-header">
        <h1>team detail</h1>
    </ion-content>
</ion-view>

    + team-detail.js 
(function(){
    "use strict";
    
    angular.module("eliteApp").controller("teamDetailCtrl", ["$stateParams", teamDetailCtrl]);
    
    function teamDetailCtrl($stateParams){
        var vm = this; 
        
        console.log("$stateParams", $stateParams);
    };

})();
 
- adding navigation animation 

    + menu-layout.html 
    
    <ion-nav-view name="mainContent" animation="slide-left-right"></ion-nav-view>
- adding a back button for your app 
<ion-nav-back-button class="button-clear button-icon icon ion-ios7-arrow-back"></ion-nav-back-button>

button-clear means no border 

we could also use different icon for the back button 
<ion-nav-back-button class="button-clear">
    <i class="ion-arrow-left-c"></i>
</ion-nav-back-button>

- summary 
    

# ionic components 
- overview 
    + lists 
    + grid system 
    + cards, attractive alternative for displaying information in your app 
    + toggles and buttons
    + ionic popup, is a ionic services 
    
- adding initial data 
    + elite-schedule.net 
    
    + grab some hard code data 
    
    + copy the url ajax call address 
    
    + use the data as development data 
    
    + create a services api called eliteApp.js 
    
    (function(){
        "use strict";
        
        angular.module("eliteApp").factory("eliteApi", [eliteApi]);
        
        function eliteApi(){
        
            var leagues = JSON.parse(`...`);
            var leagueDate = JSON.parse(...);
            
            function getLeagues(){
            
            }
            
            function getLeagueData(){
            
            }
            
            return {
                getLeagues: getLeagues, 
                getLeagueData: getLeagueData 
            };
        }
    
    }
    
    + add the service reference script tag in the index.html 
    
    + add controller to leagues.html 
    
    <ion-view ng-controller="LeaguesCtrl">
        <ion-content class="has-header">
            <h1>Leagues</h1>
        </ion-content>
    </ion-view>
    
    + add LeaguesCtrl leagues-ctrl.js and inject the custom service 
    
    (function(){
        "use strict";
        
        angular.module("eliteApp").controller("LeaguesCtrl", ["eliteApi", LeaguesCtrl]);
        
        function LeaguesCtrl(eliteApi){
            var vm = this;

            var leagues = eliteApi.getLeagues();
            var leagueData = eliteApi.getLeagueData();
        };
    
    })();
    
- adding a basic ionic list 
    + add a list 
    
    //leagues-ctrl.js 
    
    angular.module('eliteApp').controller('LeaguesCtrl', ['$state', 'eliteApi', LeaguesCtrl);
    
    function LeaguesCtrl($state, eliteApi){
        var vm = this;
        
        var leagues = eliteApi.getLeagues();
        vm.leagues = leagues; 
        
        vm.selectLeague = function(leagueId){
            //TODO: select correct league
            $state.go("app.teams");
        }
    }
    
    //leagues.html 
    <ion-view ng-controller="LeaguesCtrl as vm">
        <ion-content class="has-header">
            <div class="list">
                <a class="item item-icon-right" ng-repeat="leaguein vm.leagues" ng-click="vm.selectLeague(league.id)">
                    {{league.name}}
                    <i class="ion ion-chevron-right icon-accessory"/>
                </>
            </div>
        </ion-content>
    </ion-view>

    + add location screen 
    //location-ctrl.js 
    angular.module("eliteApp").controller("LocationsCtrl", ['eliteApi', LocationsCtrl]);
    
    function LocationsCtrl(eliteApi){
        var vm = this; 
        var data = eliteApi.getLeagueData();
        vm.locations = data.locations;
    }
    
    //locations-html
    <ion-view ng-controller="LocationsCtrl as vm">
        <ion-content class="has-header">
            <div class="item" ng-repeat="location in vm.locations">
                <div class="item">
                    {{locationName}}
                </div>
            </div>
        </ion-content>
    </ion-view>
    
- list dividers for grouped data 

    

# data and caching 

# mapping 

# customiing ionic 

# ngCordova