发布于 2017-02-24 14:54:18 | 63 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的AngularJS Tutorial中文版,程序狗速度看过来!

AngularJS 前端JS框架

AngularJS诞生于Google是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。


本文给大家介绍使用Angularjs实现多个页面共享数据的方式,通过定义一个共享服务service来实现此功能,对angularjs共享数据相关知识感兴趣的朋友一起学习

废话不多说了,直接看干货吧。

使用service来共享数据

定义一个共享服务的service


//家电维修共享数据的服务 
angular.module("sqhApp").factory("repairDeviceDataShareServer",function($http,$state,$ionicPopup){ 
return { 
//缓存当前需要维修的设备名称、数量、唯一标识 
deviceRepairObj : [], 
//小区位置 
xiquLocation:{}, 
//预约时间 
appointmentDate:{ 
"date":"", 
"time":"" 
}, 
//预约日期界面回退到上一个界面的记录 
appointmentBackPage:"", 
//获取地址回退界面记录 
locationBackPage:"", 
//家电维修描述 
questionDesc:"", 
//确认预约 
confirmAppointment : function(resultJson){ 
var url = "/index.php/Wap/Homemake/createRepairOrder.html"; 
var p = $http.post(url,resultJson); 
p.success(function(response,header,config,status){ 
//提交订单成功 
if(response.status == 0){ 
//提示需要选择设备 
var alertPopup = $ionicPopup.alert({ 
title: '家电维修', 
template: response.msg 
}); 
alertPopup.then(function(res) { 
$state.go("appliance_index"); 
}); 
}else{ 
//提示需要选择设备 
var alertPopup = $ionicPopup.alert({ 
title: '家电维修', 
template: response.msg 
}); 
alertPopup.then(function(res) { 
}); 
} 
}); 
}, 
//确认预约提交的数据 
formData:{} 
}; 
}); 

跳转到一个新的页面,将repairDeviceDataShareServer注入到controller中


//预约时间控制器 
angular.module("sqhApp").controller("orderDateController", ["$scope", "$state", 
'$ionicPopup', 'repairDeviceDataShareServer','appointmentDateService', 
function ($scope, $state, $ionicPopup,repairDeviceDataShareServer,appointmentDateService) { 
$scope.lists=[]; 
//从服务器获取时间 
appointmentDateService.getAppointmentDateList($scope); 
//回退到上一个页面 
$scope.back = function(){ 
var backPage = repairDeviceDataShareServer.appointmentBackPage; 
//如果没有记录值,则跳转到家电清洗服务包目录 
if(backPage == ""){ 
$state.go("appliance_index"); 
}else{ 
$state.go(backPage); 
} 
} 
//选择时间 
$scope.selectTime = function(myevent){ 
var currentObj = $(myevent.target); 
currentObj.closest("div.time_list").find(".line_height_35px").removeClass("bg_fdd000 color_e5005a").addClass("bg_ff"); 
currentObj.addClass("bg_fdd000 color_e5005a").removeClass("bg_ff"); 
}; 
//选择日期 
$scope.selectDate = function(myevent){ 
var currentObj = $(myevent.target); 
currentObj.closest("div.overflow_hidden").find("div.float_left").removeClass("color_e5005a"); 
currentObj.closest("div.float_left").addClass("color_e5005a"); 
}; 
//确认时间日期 
$scope.confirmDateTime = function(){ 
var selectObjs = $(".bg_f8f8f8 .color_e5005a"); 
//获取日期对象 
var dateObj = $(selectObjs[0]); 
if(dateObj.length == 0){ 
alert("请选择日期"); 
return false; 
} 
//获取时间对象 
var timeObj = $(selectObjs[1]); 
if(timeObj.length == 0){ 
alert("请选择时间"); 
return false; 
} 
//repairDeviceDataShareServer.appointmentDate.date = dateObj; 
repairDeviceDataShareServer.appointmentDate.date = "2016-6-6"; 
repairDeviceDataShareServer.appointmentDate.time = timeObj.html(); 
this.back(); 
}; 
}]); 

跳转到一个新的页面中,然后重置repairDeviceDataShareServer里面的数据


angular.module("sqhApp").controller("applianceIndexController", ["$scope", "$state","repairDeviceDataShareServer","applianceWashShareServer", function ($scope, $state, repairDeviceDataShareServer,applianceWashShareServer) { 
//初始化家电维修共享数据 
repairDeviceDataShareServer.deviceRepairObj = []; 
repairDeviceDataShareServer.xiquLocation = {}; 
repairDeviceDataShareServer.appointmentDate = {"date":"","time":""}; 
repairDeviceDataShareServer.appointmentBackPage = {}; 
repairDeviceDataShareServer.locationBackPage = {}; 
repairDeviceDataShareServer.formData = {}; 
repairDeviceDataShareServer.questionDesc = ""; 
//初始化家电清洗共享数据 
applianceWashShareServer.washType=""; 
applianceWashShareServer.formData={}; 
applianceWashShareServer.goodsSelected=[]; 
}]); 

关于本文给大家分享的Angularjs实现多个页面共享数据的方式就给大家介绍这么多,希望对大家有所帮助!



相关阅读 :
Angularjs实现多个页面共享数据的方式
Angular.js实现多个checkbox只能选择一个的方法示例
AngularJS中实现显示或隐藏动画效果的方式总结
angularjs 处理多个异步请求方法汇总
angularjs实现多张图片上传并预览功能
基于AngularJS实现页面滚动到底自动加载数据的功能
AngularJS实现一次监听多个值发生的变化
详解AngularJS中$http缓存以及处理多个$http请求的方法
AngularJS中处理多个promise的方式
AngularJS实现元素显示和隐藏的几个案例
使用AngularJS实现可伸缩的页面切换的方法
使用AngularJS来实现HTML页面嵌套的方法
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务