一、引用

<link href="../scripts/ionic/CSS/ionic.min.css" rel="stylesheet" /><script src="../scripts/ionic/js/ionic.bundle.min.js"></script>二、主頁模板
<ion-nav-bar class="bar-positive">    <ion-nav-back-button></ion-nav-back-button></ion-nav-bar><ion-nav-view animation="slide-in-up"></ion-nav-view>三、列表頁模板
<!--列表頁--><script id="templates/tabs.html" type="text/ng-template">    <ion-view view-title="列表頁面">        <ion-content>            <div class="list">                <a class="item" href="#/detail/?url=http%3a%2f%2fwww.gongjuji.net">                    http://www.gongjuji.net                </a>                <a class="item" href="#/detail/?url=http%3a%2f%2fwww.baidu.com">                    http://www.baidu.com                </a>                <a class="item" href="#/detail/?url= http://www.taobao.com">                    http://www.taobao.com                </a>            </div>        </ion-content>    </ion-view></script>四、詳細頁模板
<!--詳細頁面--><script id="templates/detail.html" type="text/ng-template">    <ion-view view-title="詳細頁面" ng-controller="detailCtrl">        <ion-content overflow-scroll="false" style="padding:10px;">            {{content}}        </ion-content>    </ion-view></script>五、初始化、路由配置等
var app = angular.module('myApp', ['ionic', 'ui.router']);//路由配置app.config(function ($statePRovider, $urlRouterProvider) {    $stateProvider        .state('tabs', {            url: "/",            templateUrl: "templates/tabs.html"        })        .state('detail', {            url: '/detail/?url',            templateUrl: "templates/detail.html",        });    $urlRouterProvider.otherwise("/");});//全局配置加載動作app.constant('$ionicLoadingConfig', {    template: '<ion-spinner icon="lines" class="spinner-calm"></ion-spinner>',    animation: 'fade-in'});//全局配置請求處理app.service('$Ajax', function ($http, $ionicLoading) {    this.get = function (url, data, onSuccess, onError) {        $ionicLoading.show(); //顯示動畫        $http.get(url, {            param: data        })        .then(function (result) {            if (result.status == 200) {                if (onSuccess)                    onSuccess(result.data);            } else {                if (onError)                    onError(result.data);            }            $ionicLoading.hide(); //隱藏動畫        }).catch(function (err) {            console.error(err);            if (onError)                onError(err.data);            $ionicLoading.hide(); //隱藏動畫        });    }});app.controller('myCtrl', function ($scope, $http, $ajax) {    $scope.show = function ($event) {        $event.stopPropagation();    }});詳細頁處理
//詳細頁面app.controller('detailCtrl', function ($scope, $ajax, $ionicNavBarDelegate, $stateParams) {    if ($scope.content) {    } else {        //如果不設置緩存，總會在頁面顯示執行控制器代碼        //獲取瀏覽器參數        $ajax.get($stateParams.url, {}, function (data) {            console.info($stateParams);            $ionicNavBarDelegate.setTitle($stateParams.url);            $scope.content = data;        });    }});
更多：
ionic 加載動作$ionicLoading 和加載動畫 ion-spinner
 
Cordova 配置WebView可以打開外部鏈接
 
Ionic Tab選項卡使用整理（一）