实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
​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>手册网基础教程(shouce.ren)</title>
7
    <link href="/static/example/ionic.min.css" rel="stylesheet">
8
    <script src="/static/example/ionic.bundle.min.js"></script>
9
    <script type="text/javascript">
10
      angular.module('ionicApp', ['ionic'])
11
​
12
    .config(function($stateProvider, $urlRouterProvider) {
13
​
14
      $stateProvider
15
        .state('tabs', {
16
          url: "/tab",
17
          abstract: true,
18
          templateUrl: "templates/tabs.html"
19
        })
20
        .state('tabs.home', {
21
          url: "/home",
22
          views: {
23
            'home-tab': {
24
              templateUrl: "templates/home.html",
25
              controller: 'HomeTabCtrl'
26
            }
27
          }
28
        })
29
        .state('tabs.facts', {
30
          url: "/facts",
31
          views: {
32
            'home-tab': {
33
              templateUrl: "templates/facts.html"
34
            }
35
          }
36
        })
37
        .state('tabs.facts2', {
38
          url: "/facts2",
39
          views: {
40
            'home-tab': {
41
              templateUrl: "templates/facts2.html"
42
            }
43
          }
44
        })
45
        .state('tabs.about', {
46
          url: "/about",
47
          views: {
48
            'about-tab': {
49
              templateUrl: "templates/about.html"
50
            }
51
          }
52
        })
53
        .state('tabs.navstack', {
54
          url: "/navstack",
55
          views: {
56
            'about-tab': {
57
              templateUrl: "templates/nav-stack.html"
58
            }
59
          }
60
        })
61
        .state('tabs.contact', {
62
          url: "/contact",
63
          views: {
64
            'contact-tab': {
65
              templateUrl: "templates/contact.html"
66
            }
67
          }
68
        });
69
​
70
​
71
       $urlRouterProvider.otherwise("/tab/home");
72
​
73
    })
74
​
75
    .controller('HomeTabCtrl', function($scope) {
76
      console.log('HomeTabCtrl');
77
    });
78
    </script>
79
  </head>
80
​
81
  <body>
82
  
83
    <ion-nav-bar class="bar-positive">
84
      <ion-nav-back-button>
85
      </ion-nav-back-button>
86
    </ion-nav-bar>
87
            
88
    <ion-nav-view></ion-nav-view>
89
​
90
​
91
    <script id="templates/tabs.html" type="text/ng-template">
92
      <ion-tabs class="tabs-icon-top tabs-positive">
93
​
94
        <ion-tab title="Home" icon="ion-home" href="#/tab/home">
95
          <ion-nav-view name="home-tab"></ion-nav-view>
96
        </ion-tab>
97
​
98
        <ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
99
          <ion-nav-view name="about-tab"></ion-nav-view>
100
        </ion-tab>
101
​
102
        <ion-tab title="Contact" icon="ion-ios-world" ui-sref="tabs.contact">
103
          <ion-nav-view name="contact-tab"></ion-nav-view>
104
        </ion-tab>
105
​
106
      </ion-tabs>
107
    </script>
108
​
109
    <script id="templates/home.html" type="text/ng-template">
110
      <ion-view view-title="Home">
111
        <ion-content class="padding">
112
          <p>
113
            <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
114
          </p>
115
        </ion-content>
116
      </ion-view>
117
    </script>
118
​
119
    <script id="templates/facts.html" type="text/ng-template">
120
      <ion-view view-title="Facts">
121
        <ion-content class="padding">
122
          <p>Banging your head against a wall uses 150 calories an hour.</p>
123
          <p>Dogs have four toes on their hind feet, and five on their front feet.</p>
124
          <p>The ant can lift 50 times its own weight, can pull 30 times its own weight and always falls over on its right side when intoxicated.</p>
125
          <p>A cockroach will live nine days without it's head, before it starves to death.</p>
126
          <p>Polar bears are left handed.</p>
127
          <p>
128
            <a class="button icon ion-home" href="#/tab/home"> Home</a>
129
            <a class="button icon icon-right ion-chevron-right" href="#/tab/facts2">More Facts</a>
130
          </p>
131
        </ion-content>
132
      </ion-view>
133
    </script>
134
​
135
    <script id="templates/facts2.html" type="text/ng-template">
136
      <ion-view view-title="Also Factual">
137
        <ion-content class="padding">
138
          <p>111,111,111 x 111,111,111 = 12,345,678,987,654,321</p>
139
          <p>1 in every 4 Americans has appeared on T.V.</p>
140
          <p>11% of the world is left-handed.</p>
141
          <p>1 in 8 Americans has worked at a McDonalds restaurant.</p>
142
          <p>$283,200 is the absolute highest amount of money you can win on Jeopardy.</p>
143
          <p>101 Dalmatians, Peter Pan, Lady and the Tramp, and Mulan are the only Disney cartoons where both parents are present and don't die throughout the movie.</p>
144
          <p>
145
            <a class="button icon ion-home" href="#/tab/home"> Home</a>
146
            <a class="button icon ion-chevron-left" href="#/tab/facts"> Scientific Facts</a>
147
          </p>
148
        </ion-content>
149
      </ion-view>
150
    </script>
151
​
152
    <script id="templates/about.html" type="text/ng-template">
153
      <ion-view view-title="About">
154
        <ion-content class="padding">
155
          <h3>Create hybrid mobile apps with the web technologies you love.</h3>
156
          <p>Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.</p>
157
          <p>Built with Sass and optimized for AngularJS.</p>
158
          <p>
159
            <a class="button icon icon-right ion-chevron-right" href="#/tab/navstack">Tabs Nav Stack</a>
160
          </p>
161
        </ion-content>
162
      </ion-view>
163
    </script>
164
​
165
    <script id="templates/nav-stack.html" type="text/ng-template">
166
      <ion-view view-title="Tab Nav Stack">
167
        <ion-content class="padding">
168
          <p><img src="https://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"></p>
169
        </ion-content>
170
      </ion-view>
171
    </script>
172
​
173
    <script id="templates/contact.html" type="text/ng-template">
174
      <ion-view title="Contact">
175
        <ion-content>
176
          <div class="list">
177
            <div class="item">
178
              @IonicFramework
179
            </div>
180
            <div class="item">
181
              @DriftyTeam
182
            </div>
183
          </div>
184
        </ion-content>
185
      </ion-view>
186
    </script>
187
​
188
  </body>
189
</html>
190