Angularjs route-Pass value $routeparams

The ANGULARJS uses route-passing values,

1. Guide Package

<src= "Angular.min.js"></script>    <  src= "Angular-route.js"></script>

2. Dependency Injection Ngroute

var myapp=angular.module ("MyApp", ["Ngroute"]);

3. Configure Routing

myapp.config (function ($routeProvider) {//page selection $routeProvider. When ("/home", {//T Emplate: "<H2>This is the main page.</H2>"Templateurl:" home.html "}). When ("/about", {//Template: "<H2>This is a message about us.</H2>"Templateurl:" about.html "}). When ("/cel", {//Template: "<H2>Please contact us</H2>"Templateurl:" cel.html ",//Controller:" Celctrl "}). When ("/cel/:sub", {//Parameter templateurl: "Cel.html", Controller: "Celctrl"})}) ;

4. Write CEL's controller

Myapp.controller ("Celctrl", Function ($scope, $routeParams) {            //assigns a value to the input box according to the passed parameter           var param = $routeParams ["Sub" ];           if (param== "a") {               $scope. mname= "I'd like to make a suggestion ...";           } else if (param== "B") {               $scope. mname= "I want to Buy ..."}        );

5. Send value to cel page via about page

<P>About page</P>    <ul>        <Li><ahref= "#cel /A">Tell us</a></Li>        <Li><ahref= "#cel/b">Inquiry</a></Li>    </ul>

Modify the value of the input box for the CEL page

<P>Show Page</P>    <ul>        <Li><inputtype= "text"placeholder= "Sub"Ng-model= "Mname"></Li>        <Li><inputtype= "text"placeholder= "Message"Ng-model= "Minfo"></Li>    </ul>

Finally, the page layout

<BodyNg-app= "MyApp"><!--Page Layout -    <Header>        <P>My Site</P>        <Div>            <ahref= "#home">Home</a>            <ahref= "#about">About Us</a>            <ahref= "#cel">Contact Us</a>        </Div>    </Header>    <DivNg-view=""class= "View"></Div></Body>

Look at the effect:

　　

Angularjs route-Pass value $routeparams