SoFunction
Updated on 2025-04-13

AngularJS Introduction Tutorial 2: Analysis of Methods of Passing Parameters in Routing

This article describes the method of AngularJS passing parameters in a route. Share it for your reference, as follows:

We can not only directly define the value of the attribute in the controller, for example:

('listController',function($scope){
  $="ROSE";
});

AngularJS also provides the function of passing parameters. One way I've been exposed to is to pass parameters from the view:

<!--front pagehtml-->
&lt;li&gt;&lt;a href="#/user/18" rel="external nofollow" rel="external nofollow" >User</a></li>
//js
.config(['$routeProvider', function($routeProvider){
    $routeProvider.
    when('/user/:age',{
        templateUrl:'',
        controller:'listController'})
 }]);

&lt;!----&gt;
&lt;div&gt;
  &lt;div&gt;
  &lt;h1&gt;HI,here it is&lt;/h1&gt;
  &lt;h2&gt;{{name}}&lt;/h2&gt;
  &lt;h3&gt;{{}}&lt;/h3&gt;
&lt;/div&gt;
&lt;/div&gt;

AngularJs provides a way to pass "18" to the view in the homepage view. That is to place the actual parameter behind the view routing address. For example, here <li><a href="#/user/18" rel="external nofollow" rel="external nofollow" >user</a></li>. Then declare this variable in JS when method to match the argument. However, this parameter is stored in $routeParams (array) as a "key value". We must inject it into the control character (the so-called injection is actually sharing the properties and values ​​in it?). Then declare and assign a value in the controller (that is, take it out). as follows:

.controller('listController',function($scope,$routeParams){
  $="ROSE";
  $=$routeParams;
});

The steps to summarize the parameters are as follows:

1. Add the actual parameters to be passed after "/" in the homepage view.
2. Define a variable in the routing path in the routing configuration to match, the format is /:variable.
3. Configure the controller and inject $routeParams into the controller.
4. Assign values ​​in the controller. $=$routeParams; .
5. This parameter is successfully displayed in the view after the routing is completed. <h3>{{}}</h3>

One thing to note is that this parameter exists as a key value$routeParamsInside, you must access its corresponding variable (age here) to get the value.

For more information about AngularJS, readers who are interested in view the topic of this site:Summary of AngularJS command operation skills》、《AngularJS Introduction and Advanced Tutorial"and"AngularJS MVC architecture summary

I hope this article will be helpful to everyone's AngularJS programming.