迹忆客 专注技术分享

当前位置：主页 > 学无止境 > 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>

上一篇：AngularJS 中的自定义指令范围

下一篇：CLI - 在 Angular 上为生产构建

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：https://www.jiyik.com/tm/xwzj/web_5672.html

相关文章

Do you understand JavaScript closures?

发布时间：2025/02/21 浏览次数：108 分类：JavaScript

The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.

Do you know about the hidden traps in variables in JavaScript?

发布时间：2025/02/21 浏览次数：178 分类：JavaScript

Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av

How much do you know about the Prototype Chain?

发布时间：2025/02/21 浏览次数：150 分类：JavaScript

The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start

用 jQuery 检查复选框是否被选中

发布时间：2024/03/24 浏览次数：102 分类：JavaScript

在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

Js Javascript Prototype Vue WEB Python Pandas Mysql Jquery Angular Flask Django CSharp C# Batch Linux Bash C++ arduino Numpy powershell R Rust Ruby
扫码一下
查看教程更方便