我的第一段ionic程式碼

weixin_34120274發表於2016-09-16
C程式

ionic是基於angularjs的前端框架，用於實現移動app。

 

下面是第一段程式碼，先貼程式碼，有時間再整理：

 

demo1.htm

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8">
    <title>ionic-demo1</title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <script type="text/javascript" src="lib/ionic/js/ionic.bundle.js" charset="utf-8"></script>        
</head>
<body>
    <ion-nav-bar class="bar-stable"></ion-nav-bar>
    <ion-nav-view></ion-nav-view>
    <script type="text/javascript">
    var app = angular.module('app',['ionic']);
    
    app.config(function($stateProvider, $urlRouterProvider) {
      $stateProvider
      .state('dash', {
        url: '/dash',
        templateUrl: 'dash.html',
        controller: 'DashCtrl'
      });

      $urlRouterProvider.otherwise('/dash');

    });
    
    app.controller('DashCtrl', function($scope) {});
    </script>
</body>
</html>

引入了ionic.bundle.js指令碼後，不用引用angular.js就可以使用angular了，我開始百思不得其解，折騰老半天。。。

 

dash.html

<ion-view view-title="Dashboard">
  <ion-content class="padding">
    <div class="list card">
      <div class="item item-divider">Recent Updates</div>
      <div class="item item-body">
        <div>
          There is a fire in <b>sector 3</b>
        </div>
      </div>
    </div>
    <div class="list card">
      <div class="item item-divider">Health</div>
      <div class="item item-body">
        <div>
          You ate an apple today!
        </div>
      </div>
    </div>
    <div class="list card">
      <div class="item item-divider">Upcoming</div>
      <div class="item item-body">
        <div>
          You have <b>29</b> meetings on your calendar tomorrow.
        </div>
      </div>
    </div>
  </ion-content>
</ion-view>

 

整個示例用到了三個ionic的標籤：

ion-nav-bar 頁面的頭部導航bar
ion-nav-view 頁面的正文內容
ion-view 頁面內容

相關文章