この記事では、Angularjs のビューと手順について説明します。お役に立てば幸いです。
最初の記事では、AngularJS がアプリケーションをビュー、コントローラー、モデルに分割する方法について説明しました。 (MVC)。この記事では、AngularJS ビューの作成方法を詳しく説明します。 [関連チュートリアルの推奨事項: "angular チュートリアル"]
始める前に、この記事の例を体験するために使用できる単純な AngularJS アプリケーションをセットアップしましょう:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="MyController" >
<span></span>
</div>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
//empty controller function
});
</script>
</body>
</html>AngularJS ビューは、モデルのデータを HTML テンプレートに混合します。 AngularJSDirectives を使用して、データを HTML テンプレートに混合する方法を AngularJS に指示できます。この記事では、最も一般的に使用される AngularJS ディレクティブについて説明します。
補間ディレクティブ
補間ディレクティブは、AngujarJS の最も基本的なディレクティブの 1 つです。 。補間ディレクティブは、式の結果を HTML テンプレートに挿入します。 {{ }} 記号を使用して、式を挿入する場所をマークできます。例を次に示します。
<div ng-controller="MyController" >
<span> {{myData.text}} </span>
</div>HTML テンプレートは、ng-controller 属性を持つ div 要素に含まれています。 HTML テンプレート内には span 要素があり、その中に補間命令があります。このディレクティブは、指定された位置にデータ値を挿入するように AngularJSmyData.text に指示します。
補間ディレクティブは、モデル オブジェクトの関数から返されたデータを補間することもできます。以下に例を示します。
<div ng-controller="MyController" >
<span>{{myData.textf()}}</span>
</div>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.textf = function() { return "A text from a function"; };
});
</script> この例では、補間ディレクティブ {{myData.textf()}} がモデル オブジェクト myData.textf()# で呼び出されます。 ## function $scope を実行し、関数から返されたテキストを HTML テンプレートに挿入します。
textf() 関数は、コントローラー関数内の $scope.myData オブジェクトに挿入されます。
ng-bind
ディレクティブこれは補間ディレクティブの代替です。これを使用するには、AngularJS でデータを挿入する HTML 要素にng-bind 属性を挿入します。例を次に示します。
<div ng-controller="MyController" > <span ng-bind="myData.textf()"></span> </div>
これにより、myData.text() 関数によって返されたデータが span 要素の本体に挿入されます。属性 {{ }} 内の式を囲む ng-bind は必要ないことに注意してください。 モデルからの HTML のエスケープ
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
