我的第一段ionic代码

最新推荐文章于 2024-11-08 14:35:14 发布

diejiankuai3444

最新推荐文章于 2024-11-08 14:35:14 发布

阅读量69

点赞数

文章标签： javascript 前端框架 ViewUI

原文链接：http://www.cnblogs.com/modou/p/5877194.html

版权

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 页面内容

转载于:https://www.cnblogs.com/modou/p/5877194.html

diejiankuai3444

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫