我的第一段ionic代码

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 页面内容
posted @ 2016-09-16 20:54  魔豆  阅读(525)  评论(0)  编辑  收藏  举报