angularjs 경로 전송 값$routeParams 상세 설명

3069 단어 angularjs경로 전송 값routeParams
AngularJS 는 경로 전송 값 을 이용 하여 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
1.가방 안내

 <script src="angular.min.js"></script>
 <script src="angular-route.js"></script>
2.주입 ngRoute 에 의존

var myapp=angular.module("myapp",["ngRoute"]);
3.경로 설정

myapp.config(function ($routeProvider) {
  //    
  $routeProvider.when("/home",{
//  template:"<h2>     </h2>"
  templateUrl:"home.html"
  }).when("/about",{
//  template:"<h2>         </h2>"
  templateUrl:"about.html"
  }).when("/cel",{
//  template:"<h2>     </h2>"
  templateUrl:"cel.html",
//  controller:"celCtrl"
  }).when("/cel/:sub",{//   
  templateUrl:"cel.html",
  controller:"celCtrl"
  })
 });
4.cel 을 쓰 는 컨트롤 러

 myapp.controller("celCtrl",function ($scope,$routeParams) {
  //              
  var param = $routeParams["sub"];
  if(param=="a"){
  $scope.mname="     ...";
  }else if(param=="b"){
  $scope.mname="    ..."
  }
 });
5.about 페이지 를 통 해 cel 페이지 에 값 전달

<p>About  </p>
 <ul>
 <li><a href="#cel/a" rel="external nofollow" >    </a></li>
 <li><a href="#cel/b" rel="external nofollow" >  </a></li>

</ul>
cel 페이지 의 입력 상자 값 수정

<p>    </p>
 <ul>
 <li><input type="text" placeholder="sub" ng-model="mname"></li>
 <li><input type="text" placeholder="Message" ng-model="minfo"></li>
 </ul>
마지막 으로 페이지 레이아웃 입 니 다.

<body ng-app="myapp">
<!--    -->
 <header>
 <p>    </p>
 <div>
  <a href="#home" rel="external nofollow" >  </a>
  <a href="#about" rel="external nofollow" >    </a>
  <a href="#cel" rel="external nofollow" >    </a>
 </div>
 </header>
 <div ng-view="" class="View"></div>
</body>
효과 보기:
　　


이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
초보 vue 구축 단일 페이지 응용 인 스 턴 스 코드
vue-ajax 작은 패키지 인 스 턴 스

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage