AngularJS의 UI-Sref
-
Angular
UI-Router란 무엇이며 작동 원리 -
Angular에서
Ng-Route와UI-Router (state)의 차이점 -
Angular에서
ui-sref의 상태 간 탐색 -
Angular에서
UI-Router구현 및 설치 -
Angular에서
ui-sref사용을 이해하기 위한 구성 요소 및 앱 라우터 만들기
Angular의 ngHref 지시문을 사용하면 매개변수를 URL에 연결할 수 있습니다. UI-Router가 제공하는 ui-sref를 사용하여 상태에 바인딩할 수 있습니다.
일반 URL과 관련하여 동일하지 않습니다. 궁극적으로 상태를 연결하는 방법의 다른 시나리오입니다.
이 기사에서는 주요 주제에 대해 자세히 알아보고 UI-Router를 사용하여 Angular에서 ui-Sref를 사용하는 방법에 대해 논의합니다.
Angular UI-Router 란 무엇이며 작동 원리
Angular UI-Router는 단일 페이지 애플리케이션을 만드는 데 도움이 되는 모듈입니다. 애플리케이션의 모든 경로를 관리하여 애플리케이션과 브라우저 간의 추상화를 제공합니다.
또한 보다 효율적인 방식으로 애플리케이션을 변경하는 데 도움이 됩니다. 예를 들어, 새로운 경로를 추가하고 싶을 때 단 한 줄의 코드로 추가할 수 있습니다.
단순히 경로 URL이 아닌 애플리케이션의 상태를 기반으로 앱의 보기를 수정한다는 점에서 ng-Route와는 다른 접근 방식을 취합니다. ng-Route보다 UI-Router는 두 가지 주요 기능인 중첩 보기와 다중 보기가 있기 때문에 가장 좋은 옵션입니다.
이 기술은 ng-Route와 같은 브라우저 URL에 페이지와 경로를 바인딩하지 않습니다. 여기를 클릭 ui-router에 대해 자세히 알아보세요.
중첩 보기와 다중 보기에 대한 아이디어가 있다면 도움이 될 것입니다.
-
중첩 보기는 다른 보기 안에 하나의 보기를 포함하기 때문에 상위-하위 관계와 유사합니다. 다른 방법으로, 한 곳에서 모든 스마트폰 목록을 갖는 것입니다.
스마트폰을 클릭하면 다른 관점에서 해당 속성을 볼 수 있습니다.
-
다중 보기는 동일한 페이지에 둘 이상의 보기가 있는 것으로 정의됩니다. 많은 섹션은 일반적으로 모든 응용 프로그램의 특정 페이지에 연결됩니다. 예를 들어 기본 페이지에 애플리케이션의 여러 항목을 표시합니다.
이러한 각 구성 요소를 가지려면 각 구성 요소에 대해 별도의 보기를 만들어야 합니다.
Angular에서 Ng-Route와 UI-Router (state)의 차이점
모든 개발자는 ng-route와 ui-router의 근본적인 차이점을 알아야 합니다.
Ng-Route는 UI-Router보다 더 오래 사용되었으며 개념은 React와 같은 다른 프레임워크에서 온 개발자에게 더 친숙합니다.
Ng-Route는 중첩 및 지연 로딩 경로와 같이 ‘UI-Router’가 제공하지 않는 기능도 제공합니다.
UI-Router (state)는 UI 구성 요소의 라우팅을 처리하는 데 사용되는 라이브러리입니다. Angular 개발자에게 인기 있는 선택입니다.
또한 UI-Router (state)는 구문이 더 깨끗하고 이 프레임워크에서 중첩 뷰를 만드는 것이 더 쉽지만 Ng-Route처럼 지연 로드 경로를 제공하지 않습니다.
Angular에서 ui-sref의 상태 간 탐색
ui-sref 지시문은 한 상태에서 다른 상태로 이동하는 첫 번째 옵션입니다. HTML 앵커 요소의 href 속성은 이미 알고 있을 것입니다. 마찬가지로 ui-sref 지시문은 상태 참조를 나타냅니다.
앵커에 첨부된 ui-sref 지시어로 상태 이름을 선언하는 것은 지시어를 사용하는 방법입니다. 더 나은 방법으로 그것을 이해하기 위해 예를 논의합시다.
<a ui-sref="Contact Form" href="#Contact">Contact Us</a>
Angular controller에서 사용할 수 있는 $state 개체의 메서드를 사용하는 것은 상태 간 탐색을 위한 다음 기술입니다. 예를 들어.
angular.module('app').controller('PageController',
['$scope', '$state',
function ($scope, $state) {
$scope.navigate = function () {
$state.go('Contact');
};
}]);
Angular에서 UI-Router 구현 및 설치
먼저 명령 터미널에서 패키지 관리자 npm을 사용하여 Angular UI-router를 설치해야 합니다.
$ npm install angular --save // AngularJS
$ npm install angular-ui-router --save // angular UI-router
ui-router를 추가한 후 index.html 파일을 작업할 차례입니다.
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
</head>
<body ng-app="Example">
<div ui-view="header"></div>
<div ui-view=""></div>
<div ui-view="footer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js" ></script>
<script src="app/app.routes.js"></script>
</body>
</html>
Angular에서 ui-sref 사용을 이해하기 위한 구성 요소 및 앱 라우터 만들기
구성 요소는 재사용할 수 있는 재사용 가능한 격리된 개체입니다. 명령과 같습니다.
주요 차이점은 격리 여부를 선택할 수 있는 지시문 대신 항상 제한된 범위라는 것입니다.
여기서는 header 구성 요소만 만들었습니다. ui-sref 의 사용법을 가르치는 것이 주요 초점이기 때문에 home, about us 및 contact us 구성 요소에 대한 다른 구성 요소를 만들지 않았습니다.
<nav class="navbar-default">
<div class="Box">
<div class="header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<div class="icon-bar"></div>
<div class="icon-bar"></div>
<div class="icon-bar"></div>
</button>
</div>
<div class="new-class" id="112211">
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About us</a></li>
<li><a ui-sref="contact">contact us</a></li>
</ul>
</div>
</div>
</nav>
이것이 ui-sref를 사용한 방법입니다. ui-sref는 여기에서 페이지를 라우팅하는 데 사용됩니다.
이제 앱의 최종 코드를 작성할 차례입니다.
var app = angular.module('Example', ['ui.router', 'app.routes']);
angular.module('app.routes',['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
// create default view
$urlRouterProvider.otherwise("/home");
$stateProvider
// home states and nested view
.state('home', {
url: "/home",
template: '<div <p> Home Tab is active!!!</p></div>'
})
// about states and nested view
.state('about', {
url: "/about",
template: '<div <p> About Us Tab is active!!!</p></div>'
})
.state('contact', {
url: "/contact",
template: '<div <p> Contact Us Tab is active!!!</p></div>'
});
});
코드의 라이브 데모를 확인하려면 여기를 클릭하십시오.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook