AngularJS 状態の概念

  2. プログラミングのヒント
  3. Angular ハウツー記事
  4. AngularJS 状態の概念
Muhammad Adil 2023年1月30日
Angular AngularJS State
  1. AngularJS の States の概念
  2. AngularJS で状態を初期化する
  3. Stateprovider を使用して、AngularJS の特定のアプリケーションの状態を提供する
  4. AngularJS の $stateProvider と $routeProvider の違い
  5. AngularJS 状態の例
AngularJS 状態の概念

この記事では、AngularJS の State の概念と、それを使用して単純なアプリケーションを構築する方法について説明します。

AngularJS の States の概念

AngularJS の STATE は、モデルの変更に基づいてビューを更新できるメカニズムです。これは、データと DOM 要素間の双方向のバインディングです。

さらに、State は、特定のボタンが押されたかどうかなど、時間の経過とともに変化するデータを追跡するのに役立ちます。

AngularJS で状態を初期化する

AngularJS での STATE の設定は比較的簡単です。 $stateProvider サービスの State() メソッドを使用して、状態を構成します。

このプロシージャでは、引数 stateName および stateConfig が使用されます。stateName は州のユニークな名前であり、/home、/aboutus、/Contactus などのようになります。

stateConfig は、templates、templateURL、ResolveURL などのプロパティを持つ状態設定オブジェクトです。

Stateprovider を使用して、AngularJS の特定のアプリケーションの状態を提供する

$stateProvider は、AngularJS で使用されるモジュールであり、特定のアプリケーションの状態を提供します。

州に名前、別のコントローラー、または別の視点を提供するために、ルートへの直接リンクを使用する必要はありません。

多かれ少なかれ、それは $routeProvider, と同じように動作しますが、URL の代わりに、状態のみに焦点を合わせます。UI-Route が提供するさまざまな機能を利用できます。

さらに、1つのページに多数の UI ビューを表示できます。ルーティングステップで 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
Muhammad Adil avatar Muhammad Adil avatar

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