ホームページ > 記事 > ウェブフロントエンド > AngularJS コンポーネントはどのように機能しますか? angularjsコンポーネントの使用例
AngularJS コンポーネントはどのように機能しますか? angularjsコンポーネントの使用例
- 寻∝梦オリジナル
- 2018-09-08 14:43:211261ブラウズ
この記事では angularjs コンポーネントを紹介します。コンポーネントがどのように機能するかを見てみましょう。それでは、今すぐこの記事を読み始めてください
angularjs についての序文:
人気のあるフロントエンド JS フレームワークは、VUE、REACK、ANGULAR のようなもので、これら 3 つのフレームワークには、双方向のデータ バインディングという共通の特徴があります。 、コンポーネントベースの開発。 angular1.5 のバージョンより前は、ディレクティブはコンポーネント形式として使用されており、ディレクティブ自体はコンポーネントではなく命令であるため、コンポーネントの責任を十分に引き受けることができません。そのため、Google はバージョン 5 でコンポーネントコンポーネントを開始しました。では、コンポーネントはどのように機能するのでしょうか?どのように使用すればよいでしょうか?この章では、コンポーネント コンポーネントの使用法について詳しく説明します。
AngularJS では、コンポーネントはディレクティブよりもコンポーネントベースの開発に適しています。
まず、比較的単純なコンポーネントの例を見てみましょう。
index.html
<!DOCTYPE html><html lang="en" ng-app="ComponentTestApp"><head>
<meta charset="UTF-8">
<title>Document</title></head><body ng-controller="MainCtrl as ctrl">
<h3>hero</h3>
<br>
<hero-detail hero='ctrl.hero'></hero-detail>
<script src="js/angular.js"></script>
<script src="js/index.js"></script>
<script src="js/heroDetail.js"></script></body></html>index.html では、hero-detail タグを定義します。このタグの宣言方法は、hero-detail 属性が定義されていることに注意してください。それは何に使われますか？下を見てみます
index.js
(function(angular){
angular.module('ComponentTestApp',[])
.controller('MainCtrl',function(){
this.hero = {
name:'Sunday'
}
});})(angular);index.jsでこのコントローラーを宣言し、コントローラーで次のコード行を書きました
this.hero = {
name:'Sunday'
}注意深い友人はすでに見たと思います、はい、これは属性に対応しますコンポーネント内での通信の鍵となるindex.html hero='ctrl.hero'で宣言しました。
heroDetail.html
<h1>HeroName: {{$ctrl.hero.name}}</h1>heroDetail.htmlには、index.htmlから転送された値を表示します。
heroDetail.js
(function(angular){
function HeroDetailController(){
}
angular.module('ComponentTestApp')
.component('heroDetail',{
templateUrl:'views/heroDetail.html',
controller:HeroDetailController,
bindings:{
hero:'='
}
});})(angular);heroDetail.jsでは、heroDetailのコンポーネントを宣言します。 ここで、index.htmlに表示されるタグは横棒で区切られており、JSコードではキャメルケースを使用して表示する必要があることに注意してください。 。その中には、コンポーネント内の通信プロトコルを表すバインディング オブジェクトがあります。
ページ上の表示効果は次のとおりです:
データバインディングにバインディングを使用する場合、「=」は双方向のデータバインディングであるため、公式はデータバインディングに「=」を使用することを推奨していません。 , これは、コンポーネント内のデータを変更すると、その親コンポーネントの値も変更されることを意味します。 公式の推奨では、一方向のデータ バインディングには「AngularJS 開発マニュアル にアクセスして学習してください)
さて、データ バインディングを導入しましたが、コンポーネントと親コンポーネント メソッドの間のバインディングはどのように実行されるのでしょうか?
次の例を見てみましょう
index.html
<!DOCTYPE html><html lang="en" ng-app="ComponentTestApp"><head>
<meta charset="UTF-8">
<title>Document</title></head><body ng-controller="MainCtrl as ctrl">
<hero-detail on-log="ctrl.log(text)"></hero-detail>
<script src="js/angular.js"></script>
<script src="js/index.js"></script>
<script src="js/heroDetail.js"></script></body></html>index.js
(function(angular){
angular.module('ComponentTestApp',[])
.controller('MainCtrl',function(){
this.log = function(text){
console.log("输出的内容为： " + text);
}
});})(angular);heroDetail.html
<input type="text" placeholder="被输出的内容" ng-model="text"><br><button ng-click="onLog()">outputLog</button>
heroDetail.js
(function(angular){
function HeroDetailController($scope){
$scope.text = '';
var ctrl = this;
$scope.onLog = function(){
ctrl.onLog({text:$scope.text});
}
}
angular.module('ComponentTestApp')
.component('heroDetail',{
templateUrl:'views/heroDetail.html',
controller:HeroDetailController,
bindings:{
onLog:'&'
}
});})(angular);コードでは、「&」記号を使用して onLog メソッドをバインドします() このメソッドはテキスト パラメータを受け取ります。パラメータが渡されるときは、json 形式で渡されることに注意してください。 このように、outputLogボタンをクリックすると、inputに入力した内容が出力されます。
この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイト AngularJS ユーザー マニュアル にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください。
以上がAngularJS コンポーネントはどのように機能しますか? angularjsコンポーネントの使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。