angular 학습 의 ngRoute 경로 메커니즘

12544 단어 angularjsngroute
ngRoute 안내
길 은 AngularJS 의 중요 한 일환 입 니 다.프로젝트 의 페이지 를 연결 하여 프로젝트 를 구성 할 수 있 습 니 다.자주 사용 하 는 길 은 ngRoute 와 ui-route 가 있 습 니 다.제 가 먼저 ngRoute 를 말씀 드 리 겠 습 니 다.ngRoute 는 모듈 로 경로 와 심층 링크 에 필요 한 서비스 와 명령 을 제공 합 니 다.
주의 하 세 요.이전 글 과 달리 ngRoute 를 사용 하기 전에 다른 js 파일 angular-route.js 를 도입 해 야 합 니 다.

<script src="script/angular.min.js"></script>
<script src="script/angular-route.min.js"></script>
ngRoute 는 다음 과 같은 내용 을 포함 합 니 다.
명칭.
유형
역할.
ngView
Directive
루트 의 다른 템 플 릿 은 사실 이 요소 에 삽 입 됩 니 다.
$routeProvider
Provider
경로 설정
$route
Service
각 경로 의 url,view,controller
$routeParams
Service
경로 매개 변수
ngRoute 를 사용 하 는 기본 절 차 는 다음 과 같 습 니 다.
  • 보기 템 플 릿 을 정의 하기 위해 경로 가 필요 한 곳 에서 ngView 를 사용 합 니 다.
  • module 에 ngRoute 모듈 주입
  • config 에서$routeProvider 로 경로 에 templateUrl,contrller,resolve 를 설정 합 니 다.
  • 컨트롤 러 마다 업무 논리 쓰기
  • controller 에$routeParams 를 주입 하여 url 의 인 자 를 얻 을 수 있 습 니 다.
    • 아래 의 이 예 를 볼 수 있다.
    color.html
    
<!DOCTYPE html>
<html>
<head>
  <meta charset="uft-8"/>
  <title></title>
</head>
<script src="script/angular.min.js"></script>
<script src="script/angular-route.min.js"></script>
<body ng-app="color">
<p><a href="#/" rel="external nofollow" rel="external nofollow" >Main</a></p>

<a href="#red" rel="external nofollow" rel="external nofollow" >Red</a>
<a href="#green" rel="external nofollow" rel="external nofollow" >Green</a>

<div ng-view></div>

</body>

<script>
  var app = angular.module("color", ["ngRoute"]);

  app.config(function ($routeProvider) {
    $routeProvider
        .when("/", {
          templateUrl: "main.html",
          controller: 'mainController'
        })
        .when("/red", {
          templateUrl: "red.html",
          controller: 'redController'
        })
        .when("/green", {
          templateUrl: "green.html",
          controller: 'greenController'
        })       
        .otherwise('/');
  });

  app.controller('mainController',['$scope',function mainController($scope){
    $scope.message='this is main page';
  }]);
  app.controller('redController',['$scope',function mainController($scope){
    $scope.message='this is red page';
  }]);
  app.controller('greenController',['$scope',function mainController($scope){
    $scope.message='this is green page';
  }]);
</script>
</html>
    red.html(다른 페이지 와 유사 하면 중복 되 지 않 습 니 다)
    
<div style="background: red">
{{message}}
</div>
    예 는 매우 간단 합 니 다.우 리 는 경로 의 설정 만 이야기 합 니 다.
  • $routeProvider.when 을 사용 하여 경로 의 관 계 를 설정 합 니 다.방법 은 두 개의 인 자 를 받 아들 입 니 다.첫 번 째 인 자 는 url 의 경로 이 고 두 번 째 인 자 는 url 에 대응 하 는 templateUrl 과 contrller 를 설정 합 니 다.
  • $routeProvider.otherwise 방법 은 default 에 해당 합 니 다.
    • 루트 모듈 화
    위 에 있 는 것 이 모두 함께 쓰 여 있다 는 것 을 알 고 있 을 것 입 니 다.프로젝트 가 점점 커지 면 머리 가 아 프 지 않 을 것 입 니 다.그러면 모듈 화 할 수 있 습 니까?각 모듈 마다 직접적인 module,contrller,config 등 이 있 습 니 다.모듈 이 의존 하 는 기술 은 우리 가 이전에 말 한 모듈 의 글 에서 이미 말 한 적 이 있다.그러면 경로 가 있 는 상황 에서 어떻게 모듈 화 하 는 지 살 펴 보 자.
    color.html:
    
<!DOCTYPE html>
<html>
<head>
  <meta charset="uft-8"/>
  <title></title>
</head>
<script src="script/angular.min.js"></script>
<script src="script/angular-route.min.js"></script>
<script src="red.js"></script>
<script src="green.js"></script>
<script src="main.js"></script>
<body ng-app="color">
<p><a href="#/" rel="external nofollow" rel="external nofollow" >Main</a></p>

<a href="#red" rel="external nofollow" rel="external nofollow" >Red</a>
<a href="#green" rel="external nofollow" rel="external nofollow" >Green</a>

<div ng-view></div>

</body>

<script>
  var app = angular.module("color", ["ngRoute","Module.red","Module.main","Module.green"]);

  app.config(function ($routeProvider) {
    $routeProvider.otherwise('/');
  });
</script>
</html>
    우리 의 color.html 파일 이 매우 간결 한 지 볼 수 있 습 니 다.config 의 경로 설정 에는$routeProvider.otherwise 방법 만 있 습 니 다.그러나 module 은 ngRoute 를 제외 한 세 개의 module:"Module.red","Module.main","Module.green"을 주입 하 였 습 니 다.이것 은 path 에 대응 하 는 경 로 를 모듈 로 추출 하여 전문 적 인 js 로 처리 하 였 습 니 다.그들 에 대응 하 는 템 플 릿 과 대응 하 는 것 같 습 니 다.red.html 에 대응 하 는 모듈 js 를 살 펴 보 겠 습 니 다.
    red.js
    
angular.module('Module.red', ['ngRoute'])

  .config([
    '$routeProvider',
    function ($routeProvider) {
      $routeProvider.when('/red', {
        templateUrl: 'red.html',
        controller: 'redController'
      });
    }
  ])


  .controller('redController', [
    '$scope',
    function ($scope) {
      $scope.color='red';
      $scope.message = 'This is red page';
    }
  ]);
    경로 의 매개 변수
    그러면 루트 는 어떻게 파 라미 터 를 템 플 릿 페이지 에 전달 합 니까?우 리 는 위의 예 를 개조 하여 예 를 통 해 설명 한다.
    main.js
    
angular.module('Module.main', ['ngRoute'])

  .config([
    '$routeProvider',
    function ($routeProvider) {
      $routeProvider
        .when('/', {
          templateUrl: 'main.html',
          controller: 'mainController'
        });
    }
  ])

  .controller('mainController', [
    '$scope',
    function ($scope) {
      $scope.message = 'This is main page';
      $scope.colors=['blue','yellow','pink'];
    }
  ]);
    전달 할 데이터 로 colors 의 배열 을 초기 화 했 습 니 다.
    main.html
    
{{message}}
<br>
<ul>
  <li ng-repeat="color in colors">
    <a href="#/color/{{color}}" rel="external nofollow" >{{color}}</a>
  </li>
</ul>
    ng-repeat 순환 을 통 해 a 링크 를 만 들 고 배열 의 요 소 는 링크 를 통 해 들 어 옵 니 다.
    colorId.js
    
angular.module('Module.colorId', ['ngRoute'])

  .config([
    '$routeProvider',
    function ($routeProvider) {
      $routeProvider
        .when('/color/:colorId', {
          templateUrl: 'colorId.html',
          controller: 'colorIdController'
        });
    }
  ])

  .controller('colorIdController', [
    '$scope','$routeParams',
    function ($scope,$routeParams) {
      $scope.color = $routeParams.colorId;
      $scope.message = 'This is ' +$routeParams.colorId +' page';
    }
  ]);
    여기에 colorId 모듈 을 정의 합 니 다.:colorId 를 통 해 들 어 오 는 매개 변 수 를 일치 시 킵 니 다.여기 서 일치 하 는 것 은 배열 의 요소 입 니 다.예 를 들 어/color/blue 는 blue 와 일치 합 니 다.
    colorId.html
    
<div style="background: {{color}}">
  {{message}}
</div>
    마지막 으로 colorId 에 나타 납 니 다.
    여러 개의 매개 변수 라면 바로 뒤에 있 는/color/:colorId/:year/:month/:day 를 받 을 수 있 습 니 다.예 를 들 어/color/pink/2017/3/13.
    지원*번호:/color/:color/lagecode/:largecode*/edit 일치/color/brown/lagecode/code/with/lashes/edit 이면 color 는 brown 에 일치 하고 largecode 는 code/with/lashes 에 일치 합 니 다.
    지지번호:/color/:color/largecode/:largecode?/edit 는/color/brown/largecode/code/edit 와 일치 할 수 있 으 며,largecode 는 code 와 일치 합 니 다.
    /color/:color/largecode/:largecode?/edit 는 일치/color/brown/lagecode/edit 와 일치 할 수 있 으 며,largecode 는 빈 값 과 일치 합 니 다.
    경로 의 resolve
    페이지 가 이동 할 때 데 이 터 를 불 러 오 는 가장 흔 한 상황두 가지 방법 으로 할 수 있다.
  • 페이지 가 이동 한 후에 불 러 오고 controller 를 통 해 데이터 의 불 러 오 는 것 을 제어 합 니 다.시간 이 길 면 loading 인터페이스 가 표 시 됩 니 다.데이터 요청 이 성공 한 후에 데이터 인터페이스 로 교체 합 니 다
  • 페이지 가 이동 하기 전에 불 러 오고 경로 의 resolve 를 통 해 설정 합 니 다.
    • 개인 적 으로 점프 후 불 러 오 는 방식 을 더 좋아 합 니 다.더 우호 적 이기 때문에 resolve 에 감기 에 걸 리 지 않 지만 resolve 에 대해 서 는 말씀 드 리 겠 습 니 다.
    resolve 는 map 대상 입 니 다:
  • map 의 key 는 controller 에 주입 할 수 있 는 선택 가능 한 의존 항목 입 니 다.resolve 에서 의존 항목 의 반환 값 이 promise 라면 controller 가 초기 화 되 기 전에 모든 promise 가 resolved 되 었 거나 그 중 하나 가 rejected 될 때 까지 기 다 립 니 다.모든 promise 가 resolved 에 성공 하면 이 의존 항목 들 은 contrller 에 주입 되 고$route Change Success 이 벤트 를 동시에 실행 할 수 있 습 니 다.하나의 promise 가 rejected 라면$route Change Error 이 벤트 를 실행 하고 경로 전환 을 중단 합 니 다.
  • map 의 value 가 문자열 이 라면 service 의 별명 이 될 것 입 니 다.함수 라면,그의 반환 값 은 contrller 에 의존 하여 주입 할 수 있 습 니 다.반환 값 이 promise 라면,주입 하기 전에 resolved 가 되 어야 합 니 다.이 때 ngRoute.$routeParams 를 사용 할 수 없습니다.인 자 를 사용 하려 면$route.current.params 를 사용 해 야 합 니 다.
    • 다음 예 를 보십시오.
    news.html
    
<html>
<head>
  <meta charset="uft-8"/>
  <title></title>
</head>
<script src="script/angular.min.js"></script>
<script src="script/angular-route.min.js"></script>
<body ng-app="ngst-news">
<div ng-controller="MainController">
  <ul>
    <li ng-repeat="news in newsAarry">
      <a href="#/newsDetail/{{news.id}}" rel="external nofollow" >{{news.title}}</a>
    </li>
  </ul>
  <div ng-view></div>
</div>
</body>

<script src="news.js" charset="UTF-8"></script>
<script src="newsDetail.js" charset="UTF-8"></script>
</html>
    news.js
    
var news = angular.module("ngst-news", ["ngst-newsDetail"]);

news.controller("MainController", ["$scope", function ($scope) {
  $scope.newsAarry = [{"id": "1", "title": "                      "},
    {"id": "2", "title": "      ，            ，      "},
    {"id": "3", "title": "                     "}];
}]);
    뉴스 페이지 는 뉴스 목록 입 니 다.목록 아래 에 ng-view 가 있 습 니 다.뉴스 목록 링크 아래 의 ng-view 를 클릭 하여 경로 전환 을 합 니 다.
    newsDetails.html
    
{{message}}
    newsDetails.js
    
var news = angular.module("ngst-newsDetail", ['ngRoute']);

news.config(["$routeProvider",
  function ($routeProvider) {
    $routeProvider.when("/newsDetail/:newsId", {
      templateUrl: 'newsDetail.html',
      controller: 'newsDetailController',
      resolve: {
        content: ['$q', '$timeout', "$route", function ($q, $timeout, $route) {
          var deferred = $q.defer();
          $timeout(function () {
            deferred.resolve('     id=' + $route.current.params.newsId);
          }, 1000);
          return deferred.promise;
        }]
      }
    });
  }])
  .controller("newsDetailController", ['$scope', 'content',
    function ($scope, content) {
      $scope.message = content;
    }]);
    $route.current.params 를 사용 하여 인 자 를 얻 습 니 다.
    이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
    MyBatis 는 pagehelper 를 바탕 으로 페이지 원리 와 코드 인 스 턴 스 를 실현 합 니 다.
    JAVA 문자열 맞 춤 법 집합

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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