基于Angular移动UI库：Ionic
2020-01-17 本文已影响0人
CodeMT
官网：http://www.ionic.wang/
GitHub：https://github.com/ionic-team/ionic
ionic的用法
ionic是一个用来开发混合手机应用的，开源的，免费的代码库。可以优化html、css和js的性能，构建高效的应用程序，而且还可以用于构建Sass和AngularJS的优化。ionic会是一个可以信赖的框架。
基本内容
-
ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。绑定了AngularJS和Sass。这个框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。 -
ionic的开发添加android和ios环境。 -
ionic提供很多css组件 和javascript UI库。 -
ionic可以支持定制android和ios的插件，也支持服务端REST的敏捷开发。
ionic 的特点
- ionic 基于Angular语法，简单易学。
- ionic 是一个轻量级框架。
- ionic 完美的融合下一代移动框架，支持 Angularjs 的特性， MVC ，代码易维护。
- ionic 提供了漂亮的设计，通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。
- ionic 专注原生，让你看不出混合应用和原生的区别
- ionic 提供了强大的命令行工具。
- ionic 性能优越，运行速度快。
代码
1.带路由
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="lib/css/ionic.css" />
<script src="lib/js/ionic.bundle.js"></script>
<style>
body {
width: 700px;
margin: 0 auto;
padding: 20px;
}
ul {
float: left;
}
li {
margin: 0px 5px 5px 5px;
}
table {
width: 80%;
border-bottom: 1px solid;
}
table tr td {
margin: 3px;
}
</style>
<script>
angular.module("myApp", ["ionic"])
.config(function($stateProvider,$urlRouterProvider) {
$stateProvider
.state("state1", {
url: "/index",
templateUrl: "views/index.html"
})
.state("state2", {
url: "/cart",
templateUrl: "views/cart.html"
})
$urlRouterProvider.otherwise("/index");
}).service("prodata", function($http) {
this.cart = [];
this.data = [{
"proname": "天天特价S925银渐变天鹅项链吊坠女纯银锁骨链韩版简约生日送女友",
"price": 158,
"type": "饰品"
},{
"proname": "羊剪绒外套短款女仿皮草大衣连帽皮毛一体狐狸毛领",
"price": 120,
"type": "女装"
},{
"proname": "星星的你同款皮草大衣女中长款狐狸毛内胆仿皮草外套",
"price": 278,
"type": "女装"
},{
"proname": "天天特价男士棉服冬季韩版潮流面包服男款棉衣冬天袄子男冬装外套",
"price": 88,
"type": "男装"
},{
"proname": "天天特价花花公子贵宾马甲男秋冬季外套羽绒棉背心休闲马夹坎肩潮",
"price": 69,
"type": "男装"
},{
"proname": "天天特价马丁靴女秋冬女鞋2017新款短靴女百搭英伦风裸靴平底女靴",
"price": 79,
"type": "鞋包"
}];
})
.controller("democ", function($scope, prodata, $filter, $state) {
// $state.go("state1");
//总价
$scope.sumPrice = 0;
$scope.num = 0;
$scope.datas = prodata.data; //首页的所有商品
$scope.cart = []; //购物车中的数量
//购物车
$scope.shop = function(i) {
$scope.num = $scope.num + 1;
var pro = $scope.datas[i];
$scope.sumPrice = $scope.sumPrice + pro.price;
$scope.addCart(pro); //调用处理购物车的逻辑
}
$scope.addCart = function(good) {
var b = false;
for(var i = 0; i < $scope.cart.length; i++) {
if($scope.cart[i].good == good) {
$scope.cart[i].num++;
b = true;
return;
}
}
if(!b) {
$scope.cart.push({
"good": good,
"num": 1
});
}
console.log("购物车商品:", $scope.cart)
}
$scope.del = function(i) {
var num = --$scope.cart[i].num;
if(num == 0) {
$scope.cart.splice(i, 1);
}
$scope.num = $scope.num - 1;
var pro = $scope.datas[i];
$scope.sumPrice = $scope.sumPrice - pro.price;
}
$scope.selectData = function(type) {
//过滤数据
$f = $filter("filter");
$scope.datas = $f(prodata.data, {
"type": type
});
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="democ">
<div class="bar bar-header bar-positive">
<a class="button" href="#/index">运动商城</a>
<div class="buttons">
<span class="title">您的购物车:{{num}} 个商品 {{sumPrice|currency:"RMB ¥"}}</span>
<a class="button" href="#/cart">结算</a>
</div>
</div>
<ion-nav-view>
<!-- 空白区域 -->
</ion-nav-view>
</body>
</html>
<ion-view view-title="运动商城">
<ion-content style="padding-top: 50px;">
<div class="alert alert-warning" ng-show="cart.length==0">
您的购物车是空的。<a href="#/index" class="alert-link">继续购物</a>
</div>
<table ng-hide="cart.length==0">
<tr>
<td>数量</td>
<td>商品名称</td>
<td>单价</td>
<td>小计</td>
</tr>
<tr ng-repeat="good in cart ">
<td>{{good.num}}</td>
<td>{{good.good.proname}}</td>
<td>{{good.good.price|currency:"RMB ￥"}}</td>
<td>
{{good.good.price*good.num |currency:"RMB ￥"}}
<button class="button-small" ng-click="del($index)">删除</button>
</td>
</tr>
</table>
</ion-content>
</ion-view>
<ion-view view-title="运动商城">
<ion-content style="padding-top: 50px;">
<ul>
<li>
<a class="button " style="width: 350px; background: steelblue;" ng-click="selectData('')">首页</a>
</li>
<li>
<button class="button " style="width: 350px;" ng-click="selectData('女装')">女装</button>
</li>
<li>
<button class="button " style="width: 350px;" ng-click="selectData('男装')">男装</button>
</li>
<li>
<button class="button " style="width: 350px;" ng-click="selectData('饰品')">饰品</a>
</li>
<li>
<button class="button " style="width: 350px;" ng-click="selectData('鞋包')">鞋包</button>
</li>
</ul>
<div id="content">
<ul class="list">
<li class="item" ng-repeat="p in datas " style="width: 500px;">
<h3>{{p.proname}}</h3>
<img src="img/y.jpg" width="100px" />
<button style="float: right;" class="button button-small button-assertive" ng-click="shop($index)">加入购物车</button>
<span style="float: right;"> {{p.price|currency:"RMB ¥"}}</span>
</li>
</ul>
</div>
</ion-content>
</ion-view>
