AngularJS 中状态的概念

当前位置：主页 > 学无止境 > WEB前端 > Angular >

Vue React JavaScript Angular CSS HTML

AngularJS 中状态的概念

作者：迹忆客最近更新：2023/04/13 浏览次数：

本文将探讨 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。通过在路由步骤中建立状态，可以嵌套和维护各种视图。

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>