AngularJS 상태의 개념
-
AngularJS의
States개념 -
AngularJS에서
State초기화 -
Stateprovider를 사용하여 AngularJS에서 주어진 애플리케이션에 대한 상태 제공 -
AngularJS에서
$stateProvider와$routeProvider의 차이점 -
AngularJS
상태의 예
이 기사에서는 AngularJS에서 State의 개념과 이를 사용하여 간단한 애플리케이션을 구축하는 방법을 살펴봅니다.
AngularJS의 States 개념
AngularJS의 STATE는 모델 변경 사항에 따라 뷰를 업데이트할 수 있는 메커니즘입니다. 데이터와 DOM 요소 간의 양방향 바인딩입니다.
또한 상태는 특정 버튼을 눌렀는지 여부와 같이 시간이 지남에 따라 변경되는 데이터를 추적하는 데 도움이 됩니다.
AngularJS에서 State 초기화
AngularJS에서 STATE를 구성하는 것은 비교적 쉽습니다. $stateProvider 서비스의 State() 메서드를 사용하여 상태를 구성합니다.
stateName 및 stateConfig 인수가 이 절차에서 사용됩니다. stateName은 상태에 대한 고유한 이름이며 /home, /aboutus, /Contactus 등과 같을 수 있습니다.
stateConfig는 templates, templateURL, ResolveURL과 같은 속성을 가진 상태 설정 객체입니다.
Stateprovider를 사용하여 AngularJS에서 주어진 애플리케이션에 대한 상태 제공
$stateProvider는 AngularJS에서 주어진 애플리케이션에 대한 상태를 제공하는 데 사용되는 모듈입니다.
State에 이름, 다른 컨트롤러 또는 다른 관점을 제공하기 위해 경로에 대한 직접 링크를 사용할 필요가 없습니다.
어느 정도 $routeProvider,와 동일하게 작동하지만 URLs 대신 State에만 초점을 맞춥니다. UI-Route에서 제공하는 다양한 기능을 활용할 수 있습니다.
게다가, 당신은 한 페이지에 수많은 ui-views를 가질 수 있습니다. 라우팅 단계에서 State를 설정하여 다양한 보기를 중첩하고 유지할 수 있습니다.
여기를 클릭 Angular State 공급자에 대해 자세히 알아보세요.
AngularJS에서 $stateProvider와 $routeProvider의 차이점
$stateProvider |
$routeProvider |
|---|---|
ui-router 타사 모듈을 사용하여 라우팅 기능을 확장하고 확장합니다. |
ngRoute AngularJS 모듈을 사용합니다. |
| $stateProvider.state()`를 렌더링합니다. | $routeProvider.when()을 렌더링합니다. |
ui-router는 애플리케이션의 현재 상태에 따라 라우팅을 생성합니다. |
ngRoute는 경로 URL을 사용하여 라우팅을 수행합니다. |
ui-router는 $state.go()를 사용합니다. |
ng-router는 $location.path()를 사용합니다. |
한 페이지나 섹션에서 다른 페이지로 이동하려면: $state.go('Services'); |
한 페이지 또는 섹션에서 다른 페이지로 이동하려면: $location.path('Services'); |
AngularJS 상태의 예
상태의 개념을 명확하게 이해하기 위해 예를 살펴보겠습니다.
첫 번째 단계는 $stateProvider를 정의하는 것입니다.
var app = angular.module('app', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/index");
$stateProvider
그런 다음 완전한 JavaScript 및 HTML 코드를 작성해 보겠습니다.
var app = angular.module('app', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/index");
$stateProvider
// index
.state('index', {
url: "/index",
views: {
'menu-view': {
templateUrl:"menu.html"
},
'container-view': {
templateUrl:"home.html"
},
'left-view@index' :{
templateUrl:"entries.html"
},
'status-view': {
template:"<p>index<p>"
},
},
})
.state('entries', {
url: "/entries",
views: {
'menu-view': {
templateUrl:"menu.html"
},
'container-view': {
templateUrl:"entries.html"
},
'status-view': {
template:"<p>entries<p>"
},
},
})
.state('entries.add', {
url: "/add",
views: {
'bottom-view@entries': {
templateUrl:"entries.add.html"
},
'status-view@': {
template:"<p>entries.add<p>"
},
},
})
.state('entries.list', {
url: "/list",
views: {
'bottom-view@entries': {
templateUrl:"entries.list.html"
},
'status-view@': {
template:"<p>entries.list<p>"
},
},
})
});
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body ng-app="app">
<div class="container">
<div class="row">
<div ui-view="menu-view" class="col-md-2"></div>
<div ui-view="container-view" class="col-md-10"></div>
</div>
<div class="pull-right">
<div style="width: auto; float:left; margin-right:10px">status:</div>
<strong style="width: auto; float:left;" ui-view="status-view"> </strong>
</div>
</div>
<script id="menu.html" type="text/ng-template">
<div class="alert alert-info">
<h3><a ui-sref="index">Home</a></h3>
<h3><a ui-sref="entries">Entries</a></h3>
</div>
</script>
<!-- home -->
<script id="home.html" type="text/ng-template">
<h4>Home</h4>
<div ui-view="left-view" class="col-md-7">
</script>
<script id="entries.html" type="text/ng-template">
<div class="alert alert-warning">
<strong>Entries</strong>
<h5><a ui-sref="entries.add">add new</a></h5>
<h5><a ui-sref="entries.list">view list</a></h5>
<div style="background:white">
<div ui-view="bottom-view"></div>
</div>
</div>
</script>
<script id="entries.add.html" type="text/ng-template">
Create new Entry <input type=text/>
</script>
<script id="entries.list.html" type="text/ng-template">
<ol>
<li>First Entry</li>
<li>Second Entry</li>
<li>Third Entry</li>
</ol>
</script>
<script id="arrivals.html" type="text/ng-template">
<div class="alert alert-success">
<div style="background:white">
<div ui-view="bottom-view"></div>
</div>
</div>
</body>
</html>
위에서 언급한 전체 작동 코드를 확인하려면 여기를 클릭하십시오.
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