AngularJS 中狀態的概念
-
AngularJS 中的
狀態概念 -
在 AngularJS 中初始化一個
State -
使用
Stateprovider為 AngularJS 中的任何給定應用程式提供狀態 -
AngularJS 中
$stateProvider和$routeProvider的區別 -
AngularJS
狀態的示例
本文將探討 AngularJS 中 State 的概念以及如何使用它來構建一個簡單的應用程式。
AngularJS 中的狀態概念
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，它只關注狀態。我們可以利用 UI-Route 提供的各種功能。
此外，你可以在一個頁面上擁有多個 ui-views。通過在路由步驟中建立狀態，可以巢狀和維護各種檢視。
單擊此處瞭解有關 Angular 狀態提供程式的更多資訊。
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