Angle.js의 경로를 선택하는 방법
- 高洛峰원래의
- 2017-02-06 11:41:561426검색
단일 페이지에 여러 모듈을 추가하여 웹페이지가 필요할 때만 이 모듈을 로드할 수 있습니다. 모듈 전환은 웹 페이지 전환을 대체할 수 있습니다. 따라서 모듈 전환을 통해 웹 페이지 전환을 실현할 수 있습니다.
얼핏 보면 아주 평범해 보이지만 잘 생각해보면 이 아이디어가 많은 자원을 해결할 수 있다는 것을 알 수 있습니다.
예를 들어 1,000개의 제품에 대한 정보를 표시해야 하는 페이지가 있고 각 제품마다 표현 형식이 다른 경우(자체 독립적인 CSS 및 JS가 있다고 가정) 일반적으로 다음이 필요합니다. 이 정보를 로드하려면 1,000개의 웹페이지를 준비하세요. 그러나 이 모듈식 아이디어를 사용하면 백그라운드에서 1,000개의 서로 다른 모듈을 설정한 다음 필요에 따라 필요한 제품의 해당 모듈을 단일 페이지에 로드할 수 있습니다.
위에서 소개한 기능을 구현하려면 라우팅 기능을 사용해야 합니다.
주요 아이디어:
1. 백그라운드에서 여러 독립 모듈 설정
2. 라우팅 제어 모듈 설정
3. 필요 모듈을 홈페이지에 로드해야 합니다
4. 로드하는 동안 다른 모듈을 숨깁니다.
그렇다면 라우팅 모듈을 구축하는데 얼마나 많은 노력이 필요한가? 사실 놀라울 정도로 간단합니다.
먼저 메인 페이지에 해당 코드를 작성합니다.
55efc87653a0016330b9eaa14089c1747a91cead4d31023d90a4b7b2272b3235 이 태그가 작성될 때만 라우팅 이벤트가 실행됩니다:
<html ng-app="myTodo"><head>
<meta charset="utf-8">
<title>angularjs • TodoMVC</title>
<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
<style>
.pagination {
overflow: hidden;
padding: 20px;
}
.pagination ul li {
width: 60px;
height: 30px;
line-height: 30px;
border:1px solid black;
float: left;
list-style-type: none;
margin-right: 10px;
text-align: center;
}
</style>
</head>
<body>
<ng-view></ng-view> <!-- 路由区域，视图区域-->
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
</body>
</html>다른 모든 것은 장식입니다. 24행을 보세요.
라우팅 영역과 보기 영역에서는 콘텐츠를 추가할 수 있으며 웹페이지도 추가할 수 있습니다.
다음으로 해당 app.js를 살펴보세요.
var app = angular.module("myTodo", ['ngRoute']);
//路由的配置：
app.config(function($routeProvider) {
var routeconfig = {
templateUrl: "body.html",
controller: "myTodoCtrl"
/*controller: 'myTodoCtrl'*/
}
var ohter_config = {
templateUrl: "other.html"
}
$routeProvider.
when("",routeconfig).
//status ： 它对应我们页面的hash: all completed active
//路由规则的优先级按写法的顺序所决定的
when("/other", ohter_config).
when("/:aaa", routeconfig ).
otherwise( { redirectTo: "/all" });
});
app.controller("myTodoCtrl", function($scope, $routeParams, $filter){
console.log($routeParams);
});라우팅만 사용한다면 위의 코드로 충분합니다.
1. 페이지가 홈페이지나 다른 이상한 곳에 남아 있으면 자동으로
/all
으로 이동합니다. .0.1:8020/finishAngularJS-mark2/index.html#/all
index 뒤에 오는 내용에 주의하세요.
2. 페이지 이동 방향이 /other인 경우
http://127.0.0.1:8020/finishAngularJS-mark2/iother.html
으로 이동합니다. 특정 점프가 발생하면(여기에 지정된 세 개의 점프는 /active, /complete/all) 해당 페이지로도 점프하지만 이는 인덱스 아래의 점프입니다——
http:// 127.0.0.1:8020/finishAngularJS-mark2/index.html#/active
http://127.0.0.1:8020/finishAngularJS-mark2/index.html#/모두
http: //127.0.0.1:8020/finishAngularJS-mark2/index.html#/complete
[특히 주의할 점: 2를 제외하면 이 페이지에서 점프하고 다른 점프는 지정된 뷰에 표시됩니다. 지역과 라우팅 지역, 그리고 본문 웹페이지의 내용이 로드됩니다. 】
다음으로 원리를 설명합니다:
app.config(function($routeProvider)
경로를 설정하는 데 사용되는 코드입니다. 직접 작성하세요.
var routeconfig = {
templateUrl: "body.html",
controller: "myTodoCtrl"
/*controller: 'myTodoCtrl'*/
}
var ohter_config = {
templateUrl: "other.html"
}이것은 두 개의 점프입니다. 점프는 templateUrl입니다. 즉, index.html이 body.html을 로드하는 이유입니다. 컨트롤러 이름은 - myTodoCtrl입니다.
두 번째 점프는 중요하지 않기 때문에 통과됩니다.
$routeProvider.
when("",routeconfig).
//status ： 它对应我们页面的hash: all completed active
//路由规则的优先级按写法的顺序所决定的
when("/other", ohter_config).
when("/:aaa", routeconfig ).
otherwise( { redirectTo: "/all" });
});이 코드는 해시 값이 변경되는 시점을 판단하는 데 사용됩니다. object
해시값이 "", 즉 두 번째 문장이 비어 있을 때, 해시값이 "/other"일 때, 즉 in에서 Routeconfig
를 실행합니다. 다섯 번째 라운드, other_config 실행
해시 값이 특수 변수인 경우 변수 이름은 aaa이고 값은 X입니다(X는 정의된 임의의 참조일 수 있으며 여기서는 all,complete,active입니다). , 즉 "/active", "/complete", "/all", Routeconfig 실행
해시 값이 다른 경우에는 기본적으로 "/all"의 경우 해시 값으로 점프합니다.
해시값을 얻어서 다음 객체를 실행하고 객체 템플릿을 꺼내어 홈 페이지에 추가하고 컨트롤러를 시작하면 전체 라우팅이 완료됩니다. 편집자가 가져온angular.js 선택 방법의 전체 내용입니다. 많은 분들께 도움이 되었으면 좋겠습니다. PHP 중국어 홈페이지를 응원해주세요~
PHP 중국어 홈페이지를 주목해주세요. js 경로 선택 방법에 대한 관련 기사를 보려면