Common HTML page for tab switching

In a project in the same module, there are more than one tab (and multiple tab corresponding page structure is exactly the same), tab each switch, different tab calls different interfaces, using a switch to judge, according to the current type to call different interfaces, return different data, The refresh of the page data is realized,

The purpose of this is to reduce the duplication of HTML pages, to realize the reuse of code ...... .........

( There are problems , every time the page refresh, just refresh the data, the URL is not updated, this will cause a problem, that is, when you click on the browser to refresh the page, you can not record the current status, each time will be returned to the original page, not the current location)

There are drawbacks to the code show:

HTML: Each tab switch calls the Get_list () method, which passes a type used to make judgments

<ulclass= "List-inline">    <Liclass= "Hand"Ng-click= "get_list (' Referee's instrument ')">        <Buttonclass= "Btn my-tra-btn"Ng-class= "{' my-nav-active ':p osition_type== ' referee document '} '>Referee Documents</Button></Li>    <Liclass= "Hand"Ng-click= "Get_list (' Industry Meeting ')">        <Buttonclass= "Btn my-tra-btn"Ng-class= "{' my-nav-active ':p osition_type== ' industry Meeting '}">Industry Conferences</Button></Li>    <Liclass= "Hand"Ui-sref= "Laoli_video ({type: ' Lao li says"}) ">        <Buttonclass= "Btn my-tra-btn"Ng-class= "{' my-nav-active ':p osition_type== ' Lao Li ' to know the production '}">Lao Li said that he knew how to produce</Button></Li>    <binclass= "Hand"Ng-click= "get_list (' Talent report ')">        <Buttonclass= "Btn my-tra-btn"Ng-class= "{' my-nav-active ':p osition_type== ' talent Report '}">Talent Report</Button></Li>    <Liclass= "Hand"Ng-click= "get_list (' Information ')">        <Buttonclass= "Btn my-tra-btn"Ng-class= "{' my-nav-active ':p osition_type== ' information '}">Information</Button></Li></ul>

Js:ctrl/consult.js file (use Angular-require method to put multiple small controllers in one file)

Define ([' App ', ' Services/filter ', ' services/setting ', ' api/news_api ', ' Services/common ', ' directives/showimg/' Showimg ', ' directives/sharecomponent/sharecomponent '], function (MyApp) {

Myapp.controller (' news_list ', [' $scope ', ' $state ', ' $stateParams ', ' News_api ', function (s, $state, $ STATEPARAMS,NEWS_API) {
Get list data
     S.get_list = function (typename) {//typename: Toggle to identify tab
            S.mypagers.bigcurrentpage = 1;//Current Page "1"

            TypeName = TypeName;                  Get_list_by_type (TypeName, s.mypagers.bigcurrentpage);        } s.get_list (S.position_type);                    Function Get_list_by_type (typename, N) {switch (typename) {case "referee instrument": {                         S.hand_data.ppageindex = n;//No test switch to update the current page number News_api.get_judge_document_list (s.hand_data)                        . Success (data) {....../})                        . Error (function (data) {Console.log (data);                });                    }                    ;                Break                    Case "Industry Meeting": {s.position_type = "industry Meeting";                    S.current_nav = "Industry Meeting";                           News_api.get_file_meeting_list ({pageindex:n, pagesize:10}). Success (function (data) { ......./}). Error (function data) {Conso ().                        Le.log (data);                });                    }                    ;                Break                    Case "Talent Report": {S.position_type = "talent Report";                    S.current_nav = "Talent Report"; News_api.get_human_resource_report_list ({pageindex:n, pagesize:10}). Success (function (data) {:                    ..... error (data) {Console.log (data), or "..").                });                    }                    ;                Break                    Case "Information": {s.position_type = "information";                    S.current_nav = "Information";                           News_api.gethotnews ({pageindex:n, pagesize:10}). Success (function (data) {             .................//             }). Error ();                    }                    ;            Break }        }

Myapp.controller (' news_detaile ', [' $scope ', ' $stateParams ', ' $sce ', ' setting ', ' News_api ', ' $rootScope ',
    function (S, $stateParams, $sce, setting, News_api, $rootScope) {
   
       

}]

});

Routing configuration:

in Router.js://industry meeting, consulting, talent reportdefine ([' App ', ' env ',    ' Router/news ',    ' Ctrl/rootctrl ',    ' Router/about ',    ' Router/badcomment ',    ' Router/collect_doc ',    ' Router/consult '], function(MyApp, env) {$stateProvider. State (' Consult ', {URL:‘/‘, Views: {"Main": {templateurl:' Tpls/news/news.html ', Resolve: {deps: $requireProvider. Requirejs ([//using Angular.require' Ctrl/consult '])}, CONTROLLER:' News_index_ctrl '        }    }}); Router in/consult.js:Define ([' app '],function(MyApp) {myapp.config ([' $stateProvider ', ' $urlRouterProvider ', ' $locationProvider ', ' $requireProvider ',        function($stateProvider, $urlRouterProvider, $locationProvider, $requireProvider) {$stateProvider. State (' Consult.news_list ', {URL:' News_list/:typename.html ', Views: {' Content ': {templateurl:' Tpls/news/content/news_list.html ',//all tabs, modules share a news_list pageController: ' News_list '                    },                    ' C_right ': {templateurl:' Tpls/news/c_right/c_right.html ', Controller:' News_ctrl '}} ). State (' Consult.news_detaile ', {URL:': itemsid.html ', Views: {' Content ': {templateurl:' Tpls/news/content/news_detaile.html ',//all tabs share a single detail page news_detail.htmlController: ' News_detaile '                    },                    "C_footer": {templateurl:' Tpls/news/c_footer/c_footer.html ', Controller:' C_footer '                    },                    ' C_right ': {templateurl:' Tpls/news/c_right/c_right.html ', Controller:' News_ctrl '                    }                }            })        }])});

Different people may have different workarounds for the problems that exist above.

A common type of:

1: The page is split, each tab is individually as a module, respectively, to establish their own controller

(Cons: Not implementing the HTML page of the public, which is abandoning the problem, abandoning the interests of the practice)

2: The second is, you can find a way every time in the tab switch, the page will be refreshed, the URL to change it, convenient for the browser to record.

On the basis of the original, we only need to change simply to be able to:

  //Get list DataS.get_list =function(TypeName) {//TypeName: A Toggle to identify tab           //s.mypagers.bigcurrentpage = 1;//Current Page "1"            //typename = typename;            //Get_list_by_type (TypeName, s.mypagers.bigcurrentpage);            //Get_list_by_type (typename); $state. Go ("Consult.news_list" {typename:typename});//This is to refresh the page } varGet_list_data=function(typename, N) {Get_list_by_type (typename, N); } get_list_data (s.position_type,s.mypagers.bigcurrentpage);

After each click of the tab, the page will be refreshed, update the URL

Common HTML page for tab switching