一、引用

<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选项卡使用整理（一）