AngularJS 의 경로 사용 및 구현 코드
이 장 에 서 는 AngularJS 경 로 를 소개 합 니 다.AngularJS 루트 는 서로 다른 URL 을 통 해 서로 다른 내용 을 접근 할 수 있 도록 합 니 다.AngularJS 를 통 해 다 중 보기 의 단일 페이지 웹 애플 리 케 이 션(single page web application,SPA)을 실현 할 수 있 습 니 다.
1.1 Angular JS 루트 기초 지식 설명
AngularJS 에서 사용 할 경로:
1.경로 파일 가 져 오기:angular-route.js
2.메 인 모듈 에"ngRoute"를 주입 합 니 다.
angular.module("app",["ngRoute"])
<a href="#/" rel="external nofollow" rel="external nofollow" > </a> // #/
<a href="#/page1" rel="external nofollow" rel="external nofollow" >page1</a> // "#/ "
<div ng-view></div>
// <ng-view></ng-view>5.config 설정 단계 에서$routeProvider 를 주입 하여 경로 설정 을 진행 합 니 다.
.config(function($routeProvider){
$routeProvider
.when("/",{template:'<h1 style="color:red;"> </h1>'})
.when("/page1",{templateUrl:"page.html",controller:"ctrl1"})
.when("/page2",{templateUrl:"page.html",controller:function($scope){
$scope.text = " ctrl ！！"
}})
.when("/page3",{templateUrl:"page.html"})
.when("/page4",{})
.otherwise({redirectTo:"/"})
})$routeProvider 는 when(path,object)&otherwise(object)함 수 를 순서대로 정의 합 니 다.함 수 는 두 개의 인 자 를 포함 합 니 다.
AngularJS 경로 도 서로 다른 템 플 릿 을 통 해 이 루어 질 수 있다.
$routeProvider.when 함수 의 첫 번 째 매개 변 수 는 URL 이나 URL 정규 규칙 이 고 두 번 째 매개 변 수 는 경로 설정 대상 입 니 다.
경로 설정 대상 문법 규칙 은 다음 과 같 습 니 다.
$routeProvider.when(url,{
template:string, // ng-view html
templateUrl:string, // ng-view html
controller:string,function / array, // controller
controllerAs:string, // controller
redirectTo:string,function, //
resolve:object<key,function> // controller
});① template:HTML 템 플 릿 을 사용자 정의 하면 이 HTML 을 ng-view 에 직접 기록 합 니 다.
.when("/page3",{templateUrl:"page.html"})
.when("/page1",{templateUrl:"page.html",controller:"ctrl1"})
.when("/page1",{templateUrl:"page.html",controller:"ctrl1"})따라서 ng-view 에서 현재 역할 영역의 변 수 를 수정 하려 면 이 변 수 를 대상 의 속성 으로 성명 해 야 합 니 다!!
④ redirecto:방향 을 바꾼다.일반적으로.otherwise()에서 첫 페이지 로 돌아 가 는 데 사 용 됩 니 다!
.otherwise({redirectTo:"/"})AngularJS 는 사용자 정의 명령 을 허용 합 니 다!!
예 를 들 어또는
1.directive()를 사용 하여 사용자 정의 명령 을 설명 합 니 다.
2.명령 을 정의 할 때 명령 명 은 낙타 봉 명명 법 을 사용 해 야 한다.명령 을 호출 할 때"-"링크 를 사용 합 니 다.
.directive("huangGe") -->
.directive("huangge") -->
3.명령 을 정의 할 때 대상 에서 사용 하 는 속성:
① template:명령 을 호출 할 때 생 성 된 템 플 릿
② restrict:명령 이 허용 하 는 호출 방식 을 설명 하 는 데 사용 합 니 다.
E->서명 표시 허용 A->속성 호출 허용 C->클래스 이름 호출 허용 M->주석 호출 허용
기본 값:EA
주석 호출 이 필요 하 다 면 속성 을 하나 더 추가 해 야 합 니 다:replace:true,그리고 주석 호출 전에"directive:"eg:
.directive("jiangHao",function(){
return {
restrict : "EACM",
replace:true,
template:"<h1> </h1>",
}
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{
overflow: hidden;
}
li{
width: 100px;
height: 40px;
text-align: center;
float: left;
line-height: 40px;
list-style: none;
cursor: pointer;
}
li a{
text-decoration: none;
color: black;
}
li:hover{
background-color: yellow;
}
#div1{
width: 1000px;
height: 500px;
margin: 20px auto;
border: 2px solid red;
}
</style>
</head>
<body ng-app="app" ng-controller="ctrl">
<ul>
<li><a href="#/" rel="external nofollow" rel="external nofollow" > </a></li>
<li><a href="#/page1" rel="external nofollow" rel="external nofollow" >page1</a></li>
<li><a href="#/page2" rel="external nofollow" >page2</a></li>
<li><a href="#/page3" rel="external nofollow" >page3</a></li>
<li><a href="#/page4" rel="external nofollow" >page4</a></li>
</ul>
<div id="div1" ng-view></div>
<jiang-hao></jiang-hao>
<div jiang-hao></div>
<div class="jiang-hao"></div>
</body>
<script src="js/angular.js" type="text/javascript"></script>
<script src="js/angular-route.js" type="text/javascript"></script>
<script type="text/javascript">
angular.module("app",["ngRoute"])
.config(function($routeProvider){
$routeProvider
.when("/",{template:'<h1 style="color:red;"> </h1>'})
.when("/page1",{templateUrl:"page.html",controller:"ctrl1"})
.when("/page2",{templateUrl:"page.html",controller:function($scope){
$scope.text = " ctrl ！！"
}})
.when("/page3",{templateUrl:"page.html"})
.when("/page4",{})
.otherwise({redirectTo:"/"})
})
.controller("ctrl",function($scope){
$scope.test = " ！";
$scope.obj = {
test:" ！"
}
})
.controller("ctrl1",function($scope){
$scope.text = " ctrl1 ！";
})
*/
.directive("jiangHao",function(){
return {
restrict : "EACM",
replace:true,
template:"<h1> </h1>",
}
})
</script>
</html>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
연말이므로 웹 앱을 만들었습니다.minmax 패널을 번갈아 가서 총 득점을 겨루는 게임이다. 선수는 좋아하는 위치에서 시작된다. 후손은 선수가 선택한 위치를 포함한 세로 일렬 중에서 패널을 선택한다. 다시 선수는 후손이 선택한 패널을 포함한 가로 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
