Angularjs solving multiple page resource waste problems by routing parameters

In the actual development will encounter a lot of similar module interface is generally consistent only a few details are not the same, at this time, whether it is in the HTML page and JS and data interaction when we do not need to separate files because of these different pages, which is a waste of memory and efficiency, So I thought of a way of developing it: passing parameters through NG routing makes it possible for multiple pages to manage edits using a set of overall files. This improves both development efficiency and resource memory.

First in the list data, link set jump route and parameters, multiple parameters can be passed using object method, here I use the object to pass two parameters one is to jump past the details of the query ID, the other is the page identifier:

1 <Divclass= "Col-md-3 itempr">2  　　 <aTarget= "_blank"Ui-sref= "Bargaindetail ({id:b.id,appdetail: ' Rentdetail '})">3     　　 <h4>Total Product:<spanNg-bind= "B.realreceivable"></span>Yuan</h4>4    　　  <h4ng-if= "B.received">Amount Received:<spanNg-bind= "B.received"></span>Yuan</h4>5   　 </a>6</Div>

Then set this route and accept the parameters in the route:

1 //Product Public Details2. State ('residenceresourcedetails',{3Url:'/residenceresourcedetails/:id/:appdetail',4 views:{5     　　 'Ts-view':{6Controller'Residenceresourcedetailsctrl',7Templateurl:'tpl/resourcerent/residenceresourcedetails.html'8 }9  　　 }Ten})

Next, accept the routing parameters in the corresponding controller and make the following settings:

1 //Interface Settings2 if($stateParams. appdetail==='Rentdetail'){//Example 13$scope. xxxxxionbtn=false;//XXXXX Show Hidden4$scope. xxxxxionpageurl='xxxxxlist';//XXXXX Interface Address5$scope. xxxxxmissionurl='xxxxxission';//XXXXX Interface Address6$scope. xxxxxommissionurl='xxxxxission';//XXXXX Interface Address7$scope. xxxxxtcommissionconfirmtimeurl='Xxxxxfirmtime';//XXXXX Interface Address8$scope. xxxxxtcommissionaudittimeurl='Xxxxxdittime';//XXXXX Interface Address9$scope. xxxxxinurl='Xxxxxondhouse';//XXXXX Interface AddressTen  One}Else if($stateParams. appdetail==='Selldetail'){//Example 2 A$scope. xxxxxonbtn=true;//XXXXX Show Hidden -$scope. xxxxxpageurl='xxxxxsionlist';//XXXXX Interface Address -$scope. xxxxxssionurl='xxxxxmission';//XXXXX Interface Address the$scope. xxxxxsionurl='xxxxxssion';//XXXXX Interface Address -$scope. xxxxxfirmtimeurl='Xxxxxfirmtime';//XXXXX Interface Address -$scope. xxxxxonaudittimeurl='Xxxxxaudittime';//XXXXX Interface Address -$scope. xxxxxinurl='Xxxxxdhouse';//XXXXX Interface Address +  -}Else if($stateParams. appdetail==='Newdetail'){//Example 3 +$scope. xxxxxpageurl='xxxxxsionlist';//XXXXX Interface Address A$scope. xxxxxrl='Xxxxxuse';//XXXXX Interface Address at$scope. xxxxxionurl='xxxxxission';//XXXXX Interface Address -$scope. xxxxxmmissionurl='xxxxxssion';//XXXXX Interface Address -$scope. xxxxxrmtimeurl='Xxxxxfirmtime';//XXXXX Interface Address -$scope. xxxxxdittimeurl='Xxxxxittime';//XXXXX Interface Address -}

The above is in a public page, the route passed by the parameters, by passing the parameters we inject $stateParams service in the controller to receive parameters, the above each branch judgment is a page of the data interface and which buttons show which buttons do not show, In this way, the link in a public HTML page to control his link display hidden, in the list through the link control details of the data display, through these operations only need to have a different navigation and a public page a common controller file can solve multiple modules similar to the page display and data interaction, This greatly saves resource usage and development speed.

Angularjs solving multiple page resource waste problems by routing parameters