Angularjs solving multiple page resource waste problems by routing parameters

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.