案例：ionic案例     状态：可编辑再运行    进入竖版
 运行结果　
​x
 
1
<html ng-app="ionicApp">
2
  <head>
3
    <meta charset="utf-8">
4
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
5
6
    <title>W3xue教程(w3xue.com)</title>
7
​
8
    <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
9
    <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
10
    <script>
11
    angular.module('ionicApp', ['ionic'])
12
    .controller('AppCtrl', function($scope, $timeout, $ionicLoading) {
13
​
14
      // Setup the loader
15
      $ionicLoading.show({
16
        content: 'Loading',
17
        animation: 'fade-in',
18
        showBackdrop: true,
19
        maxWidth: 200,
20
        showDelay: 0
21
      });
22
23
      // Set a timeout to clear loader, however you would actually call the $ionicLoading.hide(); method whenever everything is ready or loaded.
24
      $timeout(function () {
25
        $ionicLoading.hide();
26
        $scope.stooges = [{name: 'Moe'}, {name: 'Larry'}, {name: 'Curly'}];
27
      }, 2000);
28
29
    });
30
    </script>
31
  </head>
32
  <body ng-controller="AppCtrl">
33
34
      <ion-view title="Home">
35
        <ion-header-bar>
36
          <h1 class="title">The Stooges</h1>
37
        </ion-header-bar>
38
        <ion-content has-header="true">
39
          <ion-list>
40
            <ion-item ng-repeat="stooge in stooges" href="#">{{stooge.name}}</ion-item>
41
          </ion-list>
42
        </ion-content>
43
      </ion-view>
44
45
  </body>
46
</html>