ionic 简单的使用

来源:互联网 发布:java小游戏开发实例 编辑:程序博客网 时间:2024/06/06 02:26

//先导入bundle包不能再导入angular包了不然会报错

<script src="js/ionic.bundle.min.js" type="text/javascript" charset="utf-8"></script>

//简单的一个小案例

<body ng-app="myApp" ng-controller="myCtrl">
//设置一个标题
  <!--<div class="bar bar-header bar-positive" >
   <h1 class="title">bar-light</h1>
  </div>-->
  <ion-header-bar class="bar-positive">
   <h1 class = "title">头部</h1>
  </ion-header-bar>
  <!--
         内容
        -->
  <ion-content>
   <ul class="list">
    <li class="item">张三</li>
    <li class="item">张三</li>
    <li class="item">张三</li>
    <li class="item">张三</li>
   </ul>
   <input class="button button-balanced"  type="button" value="按钮"/>
  </ion-content>
  <!--
         底部
        -->
//设置底部
  <ion-footer-bar class="bar-assertive">
   <h1 class="title">我是底部</h1>
  </ion-footer-bar>
  <!--js开始-->
  <script type="text/javascript">
   var mo = angular.module("myApp", ["ionic"]);
   mo.controller("myCtrl", function($scope) {
    
   })
  </script>
  <!-----------------------js结束----------------------------------------->
 </body>

原创粉丝点击