AngularJS 시작하기 튜토리얼(2) - 라우팅에서 매개변수를 전달하는 방법 소개

이 글에서는 주로 AngularJS가 라우팅 매개변수를 전달하는 방법을 예제 형식으로 분석하고, 관련 작업 단계와 주의사항을 정리하여 참고할 수 있도록 하겠습니다. 🎜>

이 문서의 예에서는 AngularJS가 라우팅에서 매개변수를 전달하는 방법을 설명합니다. 다음과 같이 참조할 수 있도록 모든 사람과 공유하세요.

다음과 같이 컨트롤러에서 속성 값을 직접 정의할 수 있을 뿐만 아니라

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

AngularJS는 또한 매개변수 전달 기능 외에도 뷰에서 매개변수를 전달하는 방법을 현재 접했습니다.

<!--首页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는 홈페이지 보기에서 list.html 보기로 "18"을 전달하는 방법을 제공합니다. 즉, 뷰 라우팅 주소 뒤에 실제 매개변수를 넣는 것입니다. 예를 들어 여기에서는

user

그런 다음 JS when 메소드에서 실제 매개변수와 일치하도록 변수를 선언합니다. 하지만 실제 매개변수는 $routeParams(배열)에 "키 값"으로 저장되어 있으며 이를 제어 기호에 주입해야 합니다. (소위 주입이라는 것은 실제로 그 안의 모든 속성과 값을 공유한다는 의미일까요?) . 그런 다음 컨트롤러에서 값을 선언하고 할당합니다(즉, 가져옵니다).

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

매개변수 전달 단계를 요약하면 다음과 같습니다.

1. 홈페이지 보기에서 전달될 실제 매개변수입니다. 2. 일치를 위한 라우팅 구성의 라우팅 경로에 /:variable 형식으로 변수를 정의합니다.
3. 컨트롤러를 구성하고 $routeParams를 컨트롤러에 삽입합니다.
4. 컨트롤러에서 값을 지정합니다. $scope.params=$routeParams;
5. 라우팅이 완료된 후 실제 매개변수가 보기에 성공적으로 표시됩니다.

{{params.age}}

한 가지 주의할 점은 실제 매개변수가

에 키 값으로 저장되어 있으며 The를 통해 액세스해야 한다는 것입니다. 해당 변수(이 경우 연령)를 사용하여 이 값을 얻을 수 있습니다. $routeParams

위 내용은 AngularJS 시작하기 튜토리얼(2) - 라우팅에서 매개변수를 전달하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!