AngularJS에서 라우팅 Ui 라우터 모듈을 사용하기 위한 샘플 코드-JS 튜토리얼-php.cn

AngularJS에서 라우팅 Ui 라우터 모듈을 사용하기 위한 샘플 코드

黄舟

풀어 주다： 2017-05-31 10:22:45

원래의

1246명이 탐색했습니다.

이 글에서는 주로 AngularJS routingUi-router 모듈의 사용법을 소개하고, Ui-router 모듈의 기능, 사용법 및 관련 Notes를 예제 형식으로 분석합니다. 도움이 필요한 친구들은 예제를 참고할 수 있습니다. in this article

AngularJS 라우팅 Ui-router 모듈의 사용법을 설명합니다. 다음과 같이 참조할 수 있도록 모든 사람과 공유하십시오.

일부 설계상의 이유로 AngularJS의 기본 라우팅 모듈에는 뷰 중첩을 지원하지 않는 등 몇 가지 단점이 있습니다. 따라서 많은 커뮤니티에서 자체 라우팅 모듈을 설계하기 시작했습니다. 그 중 가장 대표적인 것이 가장 중요한 것이 ui-route이다.

ui-route는 기본 ng-route 모듈의 다른 기능을 향상시키는 강력한 라우팅 모듈입니다.

이제 ui-route에 접근하기 위한 몇 가지 데모 만들기를 시작하세요.

<!--初始页面-->
<!doctype html>
<meta charset="UTF-8">
<html>
<head>
  <link href="self.css" rel="external nofollow" rel="stylesheet">
</head>
<body >
<p ng-app="myApp">
<p><a ui-sref = "index">首页</a></p>
<p ui-view></p><!--这里是路由视图存放的地方-->
</p>
<script src="angular.min.js"></script>
<script src="angular-ui-router.js"></script>
<script src="test2.js"></script>
</body>
</html>

로그인 후 복사

먼저 angular-ui-router.js 파일을 참조해야 합니다. 이 파일은 AngularJs의 angle-route.js 파일과 다릅니다. 그리고 해당 파일은angular.min.js 아래에 있어야 합니다.

Html의 바디코드를 보면 네이티브 ng-route를 사용할 때 바디코드와 다른 곳이 세 군데 있다는 것을 알 수 있습니다. 각각 ui-sref, index, ui-view입니다. 먼저 건너뛰고 ui-route 모듈을 초기화하는 방법을 살펴보세요.

ui-route 모듈 초기화:

var app = angular.module(&#39;myApp&#39;,[&#39;ui.router&#39;]);
app.config(["$stateProvider",function($stateProvider){
  $stateProvider
    .state("index",{
      url:&#39;/&#39;,
      template:&#39;<p>我是首页内容</p>&#39;
    })
}]);

로그인 후 복사

우선 기본 ng-route 라우팅 모듈과 유사하게 ui-route를 먼저 삽입해야 합니다. 그런 다음 특정 구성을 진행합니다. 기본 ng-route와 달리 ui-route는 기본 when() 대신 state()를 사용합니다. 이는 부분 경로가 응답하는 명령을 구별하기 위해 when()을 기반으로 새 매개변수를 추가합니다. 에게.

홈페이지

로 돌아가면 아마도 그들의 견해와 그것 사이의 관계를 알 수 있을 것입니다. ui-view는 이전 ng-view를 대체하고 ui-sref는 이전 ng-href를 대체하며 더 이상 링크를 가리키지 않고 "Navigation

"이라는 이름을 가리킵니다.

url속성

은 경로의 후속 주소를 고유하게 식별하여 후속 경로와 구별할 수 있습니다.

위 내용은 AngularJS에서 라우팅 Ui 라우터 모듈을 사용하기 위한 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!