AngularJS에서 라우팅 Ui 라우터 모듈을 사용하기 위한 샘플 코드
- 黄舟원래의
- 2017-05-31 10:22:451324검색
이 글에서는 주로 AngularJSroutingUi-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>Html의 바디코드를 보면 네이티브 ng-route를 사용할 때 바디코드와 다른 곳이 세 군데 있다는 것을 알 수 있습니다. 각각 ui-sref, index, ui-view입니다. 먼저 건너뛰고 ui-route 모듈을 초기화하는 방법을 살펴보세요. ui-route 모듈 초기화:
var app = angular.module('myApp',['ui.router']);
app.config(["$stateProvider",function($stateProvider){
$stateProvider
.state("index",{
url:'/',
template:'<p>我是首页内容</p>'
})
}]);우선 기본 ng-route 라우팅 모듈과 유사하게 ui-route를 먼저 삽입해야 합니다. 그런 다음 특정 구성을 진행합니다. 기본 ng-route와 달리 ui-route는 기본 when() 대신 state()를 사용합니다. 이는 부분 경로가 응답하는 명령을 구별하기 위해 when()을 기반으로 새 매개변수를 추가합니다. 에게. "이라는 이름을 가리킵니다. url속성
은 경로의 후속 주소를 고유하게 식별하여 후속 경로와 구별할 수 있습니다.위 내용은 AngularJS에서 라우팅 Ui 라우터 모듈을 사용하기 위한 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.