>웹 프론트엔드 >JS 튜토리얼 >AngularJs_AngularJS에서 경로를 사용하고 구성하는 방법

AngularJs_AngularJS에서 경로를 사용하고 구성하는 방법

WBOY
WBOY원래의
2016-05-16 15:16:061235검색

Angular는 Google에서 개발한 단일 페이지 애플리케이션 프레임워크로, 현재 가장 주류를 이루는 단일 페이지 애플리케이션 프레임워크 중 하나로, 후면의 MVC 패턴을 적용한 양방향 데이터 바인딩 등 많은 강력한 기능을 갖추고 있습니다. -프런트엔드부터 사용자 정의 지침 등

단일 페이지 애플리케이션이기 때문에 페이지 전환은 당연히 필수입니다. 먼저 Angle의 라우팅에 대해 이야기해 보겠습니다.

angular는 페이지 전환을 구현할 때 경로를 사용합니다.

<script src="js/plugins/angular/angular.min.js"></script>
<script src="js/plugins/ui-router/angular-ui-router.min.js"></script> 

angular.min.js가 angle-ui-router.min.js보다 먼저 로드되어야 합니다. 그런 다음 앱에 등록하겠습니다.

(function () {
angular.module('demo', [
'ui.router', 
])
})(); 

등록 후 경로를 구성해야 합니다

function config($stateProvider, $urlRouterProvider,$httpProvider) {
$urlRouterProvider.otherwise("/home/get");
$stateProvider
.state('login', {
url: "/login",
templateUrl: "../views/login.html",
})
.state('home', {
abstract: true,
url: "/home",
templateUrl: "views/common/content.html",
})
.state('home.get', {
url: "/get",
templateUrl: "views/get.html",
data: { pageTitle: 'Example view' }
})
.state('home.post', {
url: "/post",
templateUrl: "views/post.html",
data: { pageTitle: 'Example view' }
});
}
app = angular.module('demo');
app.config(config); 

구성의 각 상태는 페이지를 나타내는 보기입니다. 해당 HTML 파일은
에 해당하는 파일에 있습니다.

위 내용은 편집자가 공유한 AngularJs의 경로 사용 및 구성에 대한 지식입니다. 모든 분들께 도움이 되기를 바랍니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.