AngularJS Routing
이 ngRoute모듈은 응용 프로그램이 단일 페이지 응용 프로그램이되도록 도와줍니다.
Angular에서 라우팅이란 무엇입니까?
응용 프로그램의 다른 페이지로 이동하려고하지만 페이지를 다시로드하지 않고 응용 프로그램을 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>
이 ngRoute모듈은 응용 프로그램이 단일 페이지 응용 프로그램이되도록 도와줍니다.
Angular에서 라우팅이란 무엇입니까?
응용 프로그램의 다른 페이지로 이동하려고하지만 페이지를 다시로드하지 않고 응용 프로그램을 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>
게시글 목록
| 번호 | 제목 |
|---|---|
| 1326 |
AngularJS
AngularJS Filters에 uppercase (대문자변환)
|
| 1325 |
AngularJS
AngularJS Scope 3
|
| 1324 |
AngularJS
AngularJS Scope 2
|
| 1323 |
AngularJS
AngularJS Scope 1
|
| 1322 | |
| 1321 | |
| 1320 |
AngularJS
AngularJS Controllers
|
| 1319 |
AngularJS
AngularJS Data Binding 2번째
|
| 1318 | |
| 1317 |
AngularJS
AngularJS ng-model Directive
|
| 1316 | |
| 1315 |
AngularJS
AngularJS Directives(지시문) - 데이터 바인딩
|
| 1314 |
AngularJS
AngularJS Directives(지시문)
|
| 1313 |
AngularJS
AngularJS 모듈 만들기
|
| 1312 |
AngularJS
앵큘러js 간단한 예제
|
| 1311 | |
| 1310 |
AngularJS
AngularJS Input Controls - Data-Binding
|
| 1309 |
AngularJS
AngularJS $event Object
|
| 1308 |
AngularJS
AngularJS Toggle, True/False
|
| 1307 |
AngularJS
AngularJS ng-click 지시문
|
| 1306 |
AngularJS
AngularJS 마우스 이벤트
|
| 1305 |
AngularJS
AngularJS 이벤트
|
| 1304 |
jQuery Mobile
scrollstart 이벤트
|
| 1303 |
jQuery Mobile
pageshow 이벤트
|
| 1302 |
jQuery Mobile
pageremove 이벤트
|
| 1301 |
jQuery Mobile
pageloadfailed 이벤트
|
| 1300 |
jQuery Mobile
pageload 이벤트
|
| 1299 |
jQuery Mobile
pageinit 이벤트
|
| 1298 |
jQuery Mobile
pagehide 이벤트
|
| 1297 |
jQuery Mobile
pagecreate
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기