[Ionic Open source Project Tutorial]-12th the implementation of the medical module and the extraction package of service layer Loadmore and Dorefresh

Follow the subscription number: Tongeblog for a complete tutorial on [Ionic Open source project].

This talk mainly realizes tab2 "medical" module, "medical" module is similar to TAB1 "health" module.

[Ionic Open source Project Tutorial]-12th the implementation of the medical module and the extraction package of service layer Loadmore and Dorefresh

[]

1. Implement the view partial implementation of the Tab2.html "medical" module (similar to tab1.html):

<Ion-viewView-title= "Medical"><Ion-slide-boxShow-pager= "false"on-slide-changed= "slidechanged ($index)"><Ion-slideng-repeat= "Slide in slides">  <ion-content>    <Ion-refresherPulling-text= " drop-down Refresh"On-refresh= "Slide.dorefresh ()"></Ion-refresher>    <Divclass= "List Has-header">      <ang-repeat= "Item in Slide.items"class= "Item Item-thumbnail-right item-text-wrap"Ng-click= "Godetails (item, ' {{slide.type}} ')">        <imgng-src= "{{imgurl+item.img}}"width= "+"Height= "+"alt="">        <H3>{{:: Item.name}}</H3>        <P>{{:: item.description | substring:item.description}}</P>      </a>     </Div>    <Ion-infinite-scrollng-if= "!slide.isload"On-infinite= "Slide.loadmore ()"Distance= "1%">    </Ion-infinite-scroll>  </ion-content></Ion-slide>  </Ion-slide-box> <Ion-tabsID= "{{currenttabid}}"class= "tabs-striped tabs-top"><Ion-tabng-repeat= "Item in Tabs"On-select= "Selectedtab ($index)"title= "{{item.name}}"></Ion-tab> </Ion-tabs></Ion-view>

Note: Tab2.html also defines a unique identity currenttabid for tabs builds.

2. Perfecting the service layer Tab3service

To implement code reuse, Loadmore and Dorefresh are mentioned separately, and 3 tab calls are made to two methods respectively. (It is interesting to study the service layer Tab1service of the health module to encapsulate the Loadmore and Dorefresh in this way)

. Service (' Tab2service ',function($http) {varLoadmore =function($ This) {Console.log ("Loading more data ..." + $ This. Page); $http. Get ($ This. URL + "? page=" + $ This. Page + "&rows=" + settings.rows). Success (function(response) {Console.log (response); if(response.list) {$ This. Items = $ This. Items.concat (response.list); $ This. page++; } Else{Console.log ("No data ...")      $ This. Isload =true; }    $ This. Callback (); });}varDorefresh =function($ This) {Console.log ("Performing refresh operation ..."); $http. Get ($ This. URL + "? page=1&rows=" + settings.rows). Success (function(response) {Console.log (response); if(response.list) {$ This. page = 2; $ This. Items =response.list; }    $ This. Callback (); $ This. Isload =true; });} This. Gettab2menu =function () {  return[{name:' Disease search ', Isload:true, Url:server.domain + '/disease/list ', type: ' Disease ', page:1, rows:20, items: [], Loadmore:function() {Loadmore ( This); }, Dorefresh:function() {Dorefresh ( This); }, Callback:function () {        //return function}}, {name:' Pathological inquiry ', Isload:true, Url:server.domain + '/symptom/list ', type: ' Symptom ', page:1, rows:20, items: [], Loadmore:function() {Loadmore ( This); }, Dorefresh:function() {Dorefresh ( This); }, Callback:function () {        //return function}}, {name:' Check items ', Isload:true, Url:server.domain + '/check/list ', type: ' Check ', page:1, rows:20, items: [], Loadmore:function() {Loadmore ( This); }, Dorefresh:function() {Dorefresh ( This); }, Callback:function () {        //return function}}, {name:' Surgical Project ', Isload:true, Url:server.domain + '/operation/list ', type: ' Operation ', page:1, rows:20, items: [], Loadmore:function() {Loadmore ( This); }, Dorefresh:function() {Dorefresh ( This); }, Callback:function () {        //return function      }    }  ]}})

3. Perfect the TAB2 controller layer Tab2ctrl

Depending on the injected tab2service, call Gettab2menu () to build the page's data and action, and note that this assigns the value to Currenttabid.

. Controller (' Tab2ctrl ',function($scope, $state, Tab2service, $controller, $ionicTabsDelegate) {$scope. Classify=Tab2service.gettab2menu () $scope. Currenttabid= "TAB2"; $controller (' Basectrl ', {$scope: $scope}); $scope. Godetails=function(item, type) {vartitle = "", name = ""; if(item.title) {title+=Item.title; }            if(item.name) {title+=Item.name; } $state. Go (' Tab.tab2-details ', {id:item.id, Title:title, Type:type}) $ionicTabsDelegate. Showbar (false); }    })

Difficulties and precautions

• Remember to assign a value to Currenttabid
• Extraction Package for service layer Loadmore and Dorefresh

If you have any questions, please contact me by contacting us at the bottom of the article.

[Ionic Open source Project Tutorial]-12th the implementation of the medical module and the extraction package of service layer Loadmore and Dorefresh