AngularJS 라우팅
이 ngRoute모듈은 애플리케이션이 단일 페이지 애플리케이션이 되도록 도와줍니다.
AngularJS에서 라우팅이란 무엇입니까?
애플리케이션에서 다른 페이지로 이동하고 싶지만 페이지를 다시 로드하지 않고 애플리케이션이 SPA(단일 페이지 애플리케이션)가 되도록 하려면 ngRoute모듈을 사용할 수 있습니다.
이 ngRoute모듈 은 전체 애플리케이션을 다시 로드하지 않고 애플리케이션을 다른 페이지로 라우팅 합니다.
예시:
"red.htm", "green.htm" 및 "blue.htm"으로 이동합니다.
<body ng-app="myApp">
<p><a href="#/!">Main</a></p>
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
</body>
내가 무엇이 필요 하나?
애플리케이션을 라우팅할 수 있도록 하려면 AngularJS Route 모듈을 포함해야 합니다.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
ngRoute그런 다음 애플리케이션 모듈에 종속성으로 추가해야 합니다 .
var app = angular.module("myApp", ["ngRoute"]);
이제 애플리케이션은 $routeProvider.
$routeProvider애플리케이션에서 다른 경로를 구성 하려면 다음을 사용하십시오 .
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl :
"green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
어디로 가나요?
애플리케이션에는 라우팅에서 제공하는 콘텐츠를 넣을 컨테이너가 필요합니다.
이 컨테이너는 ng-view지시문입니다.
ng-view애플리케이션에 지시문 을 포함하는 세 가지 방법이 있습니다 .
예시:
<div ng-view></div>
예시:
<ng-view></ng-view>
예시:
<div
class="ng-view"></div>
애플리케이션은 하나 ng-view의 지시문만 가질 수 있으며 이는 경로에서 제공하는 모든 보기에 대한 자리 표시자가 됩니다.
$routeProvider
$routeProvider사용자가 링크를 클릭할 때 표시할 페이지를 정의할 수 있습니다 .
예시:
정의 $routeProvider:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm"
})
.when("/paris", {
templateUrl : "paris.htm"
});
});
응용 프로그램의 방법을 $routeProvider사용하여 정의합니다 . config메소드 에 등록된 작업 config은 애플리케이션이 로드될 때 수행됩니다.
컨트롤러
각 "보기"에 대한 $routeProvider컨트롤러를 정의할 수도 있습니다.
예시:
컨트롤러 추가:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm",
controller : "londonCtrl"
})
.when("/paris", {
templateUrl : "paris.htm",
controller : "parisCtrl"
});
});
app.controller("londonCtrl", function ($scope) {
$scope.msg = "I love London";
});
app.controller("parisCtrl", function
($scope) {
$scope.msg = "I love Paris";
});
"london.htm" 및 "paris.htm"은 일반 HTML 파일로, AngularJS 애플리케이션의 다른 HTML 섹션과 마찬가지로 AngularJS 표현식을 추가할 수 있습니다.
파일은 다음과 같습니다.
<h1>London</h1>
<h3>London is the capital city of England.</h3>
<p>It
is the most populous city in the United Kingdom, with a metropolitan area of
over 13 million inhabitants.</p>
<p>{{msg}}</p>
<h1>Paris</h1>
<h3>Paris is the capital city of France.</h3>
<p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
<p>{{msg}}</p>
주형
이전 예제에서는 메서드 templateUrl에서 속성을
사용했습니다.$routeProvider.when
template페이지를 참조하지 않고 속성 값에 직접 HTML을 작성할 수 있는 속성을 사용할 수도 있습니다 .
예시:
템플릿 작성:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Click
on the links to change this content</p>"
})
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas
contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes
contain around 95% water.</p>"
});
});
그렇지 않으면 방법
이전 예에서 우리는 의 when방법을 사용했습니다 $routeProvider.
otherwise다른 사람이 일치하지 않을 때 기본 경로인 방법 을 사용할 수도 있습니다 .
예시:
"바나나"나 "토마토" 링크를 모두 클릭하지 않은 경우 다음과 같이 알려주십시오.
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/banana", {
template : "<h1>Banana</h1><p>Bananas
contain around 75% water.</p>"
})
.when("/tomato", {
template : "<h1>Tomato</h1><p>Tomatoes
contain around 95% water.</p>"
})
.otherwise({
template : "<h1>None</h1><p>Nothing
has been selected</p>"
});
});