AngularJS Getting Started Tutorial (2) - Introduction to how to pass parameters in routing

This article mainly introduces the method of AngularJS passing parameters in routing. It analyzes the related skills of AngularJS in implementing routing parameters in the form of examples, and summarizes the relevant operation steps and precautions. Friends in need can refer to the following

The example in this article describes how AngularJS passes parameters in routing. Share it with everyone for your reference, the details are as follows:

Not only can we directly define the value of the attribute in the controller, such as:

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

AngularJS also provides In addition to the function of passing parameters, one way I am currently exposed to is to pass parameters from the view:

<!--首页html-->
<li><a href="#/user/18" rel="external nofollow" rel="external nofollow" >用户</a></li>

//js
.config(['$routeProvider', function($routeProvider){
    $routeProvider.
    when('/user/:age',{
        templateUrl:'list.html',
        controller:'listController'})
 }]);

<!--list.html-->
<p>
  <p>
  <h1>HI,这里是list.html</h1>
  <h2>{{name}}</h2>
  <h3>{{params.age}}</h3>
</p>
</p>

AngularJs provides a way to pass "18" to the list.html view in the homepage view. That is to put the actual parameter after the view routing address. Such as here

user

. Then declare the variable in the when method of JS to match the actual parameter. But the actual parameter is stored in $routeParams (array) as a "key value", and we must inject it in the control symbol (the so-called injection actually means sharing all the attributes and values ​​​​in it?). Then declare and assign the value in the controller (that is, take it out). As follows:

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

Summarize the steps of passing parameters as follows:

1. Add after "/" in the home page view The actual parameters to be passed.
2. Define a variable in the routing path in the routing configuration for matching, in the format /:varible.
3. Configure the controller and inject $routeParams into the controller.
4. Assign values ​​in the controller. $scope.params=$routeParams; .
5. The actual parameter is successfully displayed in the view after routing is completed.

{{params.age}}

One thing to note is that the actual parameter is stored as a key value in $routeParams , the value must be obtained by accessing its corresponding variable (age in this case).

The above is the detailed content of AngularJS Getting Started Tutorial (2) - Introduction to how to pass parameters in routing. For more information, please follow other related articles on the PHP Chinese website!