ionic


ionic



<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0,
 minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
 <!--
  导入ionic环境
  -->
 <link rel="stylesheet" href="css/ionic.min.css" />
 <script type="text/javascript" src="js/ionic.bundle.min.js" ></script>
  
 <title></title>
 <script type="text/javascript">
 //注入引入ionic框架
 var app = angular.module("myApp",['ionic']);
 app.controller("myCtrl",function($scope){
 $scope.names = ["刘备","张飞","关羽"];
  
 $scope.dosomething1 = function(){
 alert("点击了左按钮");
 };
 $scope.dosomething2 = function(){
 alert("点击了右按钮");
 };
 })
 </script>
 </head>
 <body ng-app="myApp" ng-controller="myCtrl">
 <!--
  定义hearder头部
  -->
 <ion-header-bar align-title="center" class="bar-positive">
 <div class="buttons">
 <button class="button" ng-click="dosomething1();">左按钮</button>
 </div>
 <span class="title">1603L商城</span>
 <div class="buttons">
 <button class="button" ng-click="dosomething2();">右按钮</button>
 </div>
 </ion-header-bar>
 <ion-content>
 <h6>下面是列表</h6>
 <table border="1px" bordercolor="red" cellpadding="1px" cellspacing="1px">
 <tr><td>序号</td><td>名字</td></tr>
 <tr ng-repeat="n in names">
 <td>{{$index}}</td>
 <td>{{n}}</td>
 </tr>
 </table>
 </ion-content>
 <ion-footer-bar align-title="center" class="bar-assertive">
 <div class="buttons">
 <button class="button">左下按钮</button>
 </div>
 <span class="title">联系我们</span>
 <div class="buttons">
 <button class="button">右下按钮</button>
 </div>
 </ion-footer-bar>
 </body>
 </html>
 



需要在css中添加一个icon文档

;