AngularJS
ngRoute를 사용한 라우팅

비고

기본 예제

이 예제는 controllerAs 구문을 사용하여 자체보기 및 컨트롤러가있는 각각 3 개의 라우트로 구성된 작은 애플리케이션을 설정하는 방법을 보여줍니다.

각 .config 기능으로 라우터를 구성합니다.

1. $routeProvider 를 .config 삽입합니다.
2. 경로 정의 객체를 사용하여 .when 메소드에서 경로 이름을 정의합니다.
3. .when 메소드에 template 또는 templateUrl , controller 및 controllerAs 지정하는 객체를 제공합니다.

app.js

angular.module('myApp', ['ngRoute'])
  .controller('controllerOne', function() {
    this.message = 'Hello world from Controller One!';
  })
  .controller('controllerTwo', function() {
    this.message = 'Hello world from Controller Two!';
  })
  .controller('controllerThree', function() {
    this.message = 'Hello world from Controller Three!';
  })
  .config(function($routeProvider) {
    $routeProvider
    .when('/one', {
      templateUrl: 'view-one.html',
      controller: 'controllerOne',
      controllerAs: 'ctrlOne'
    })
    .when('/two', {
      templateUrl: 'view-two.html',
      controller: 'controllerTwo',
      controllerAs: 'ctrlTwo'
    })
    .when('/three', {
      templateUrl: 'view-three.html',
      controller: 'controllerThree',
      controllerAs: 'ctrlThree'
    })
    // redirect to here if no other routes match
    .otherwise({
      redirectTo: '/one'
    });
  });

그런 다음 HTML에서 <a> 요소를 href 사용하여 탐색을 정의하고 helloRoute 의 경로 이름에 helloRoute <a href="#/helloRoute">My route</a>

우리는 또한 컨테이너와 지시어와 우리의 관점 제공 ng-view 우리의 경로를 주입합니다.

index.html

<div ng-app="myApp">
  <nav>
    <!-- links to switch routes -->
    <a href="#/one">View One</a>
    <a href="#/two">View Two</a>
    <a href="#/three">View Three</a>
  </nav>
  <!-- views will be injected here -->
  <div ng-view></div>
  <!-- templates can live in normal html files -->
  <script type="text/ng-template" id="view-one.html">
    <h1>{{ctrlOne.message}}</h1>
  </script>

  <script type="text/ng-template" id="view-two.html">
    <h1>{{ctrlTwo.message}}</h1>
  </script>

  <script type="text/ng-template" id="view-three.html">
    <h1>{{ctrlThree.message}}</h1>
  </script>
</div>

경로 매개 변수 예제

이 예제는 경로에서 기본 매개 변수 전달 매개 변수를 확장하여 컨트롤러에서 사용합니다.

이렇게하려면 다음을 수행해야합니다.

1. 경로 이름에 매개 변수 위치 및 이름 구성
2. 컨트롤러에서 $routeParams 서비스를 삽입하십시오.

app.js

angular.module('myApp', ['ngRoute'])
  .controller('controllerOne', function() {
    this.message = 'Hello world from Controller One!';
  })
  .controller('controllerTwo', function() {
    this.message = 'Hello world from Controller Two!';
  })
  .controller('controllerThree', ['$routeParams', function($routeParams) {
    var routeParam = $routeParams.paramName

    if ($routeParams.message) {
        // If a param called 'message' exists, we show it's value as the message
        this.message = $routeParams.message;
    } else {
        // If it doesn't exist, we show a default message
        this.message = 'Hello world from Controller Three!';
    }
  }])
  .config(function($routeProvider) {
    $routeProvider
    .when('/one', {
      templateUrl: 'view-one.html',
      controller: 'controllerOne',
      controllerAs: 'ctrlOne'
    })
    .when('/two', {
      templateUrl: 'view-two.html',
      controller: 'controllerTwo',
      controllerAs: 'ctrlTwo'
    })
    .when('/three', {
      templateUrl: 'view-three.html',
      controller: 'controllerThree',
      controllerAs: 'ctrlThree'
    })
    .when('/three/:message', { // We will pass a param called 'message' with this route
      templateUrl: 'view-three.html',
      controller: 'controllerThree',
      controllerAs: 'ctrlThree'
    })
    // redirect to here if no other routes match
    .otherwise({
      redirectTo: '/one'
    });
  });

그런 다음 템플릿에 변경 사항을 적용하고 새 메시지에 맞춤 설정 메시지 만 추가하면보기에 새 맞춤 메시지가 표시됩니다.

index.html

<div ng-app="myApp">
  <nav>
    <!-- links to switch routes -->
    <a href="#/one">View One</a>
    <a href="#/two">View Two</a>
    <a href="#/three">View Three</a>
    <!-- New link with custom message -->
    <a href="#/three/This-is-a-message">View Three with "This-is-a-message" custom message</a>
  </nav>
  <!-- views will be injected here -->
  <div ng-view></div>
  <!-- templates can live in normal html files -->
  <script type="text/ng-template" id="view-one.html">
    <h1>{{ctrlOne.message}}</h1>
  </script>

  <script type="text/ng-template" id="view-two.html">
    <h1>{{ctrlTwo.message}}</h1>
  </script>

  <script type="text/ng-template" id="view-three.html">
    <h1>{{ctrlThree.message}}</h1>
  </script>
</div>

개별 경로에 대한 사용자 지정 동작 정의

개별 경로에 대한 사용자 지정 동작을 정의하는 가장 간단한 방법은 매우 쉽습니다.

이 예제에서는 사용자를 인증하는 데 사용합니다.

1) routes.js : 원하는 경로에 대해 새 속성 (예 : requireAuth ) 만들기

angular.module('yourApp').config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/home', {
            templateUrl: 'templates/home.html',
            requireAuth: true
        })
        .when('/login', {
            templateUrl: 'templates/login.html',
        })
        .otherwise({
            redirectTo: '/home'
        });
}])

2) 각도 ng-view 안의 요소에 바인딩되지 않은 최상위 컨트롤러에서 ( $routeProvider 와의 충돌을 피하기 위해) newUrl 에 requireAuth 속성이 있는지 확인하고 그에 따라 작동합니다

angular.module('YourApp').controller('YourController', ['$scope', 'session', '$location',
    function($scope, session, $location) {

        $scope.$on('$routeChangeStart', function(angularEvent, newUrl) {
            
            if (newUrl.requireAuth && !session.user) {
                // User isn’t authenticated
                $location.path("/login");
            }
            
        });
    }
]);