AngularJS のスコープ、継承構造、イベント システム、ライフサイクルを深く掘り下げる
この記事の例では、AngularJS のスコープ、継承構造、イベント システム、ライフ サイクルについて説明します。参考のために皆さんと共有してください。詳細は次のとおりです:
スコープscopeの詳細な説明
すべての$scopeはクラスScopeのインスタンスです。クラス Scope には、スコープのライフサイクルを制御できるメソッドがあり、イベントを伝播する機能を提供し、テンプレートのレンダリングをサポートします。
スコープ階層
この単純な HelloCtrl の例をもう一度見てみましょう:
var HelloCtrl = function($scope){
$scope.name = 'World';
}
HelloCtrl は、実際には、$scope パラメーターを除いて、通常の JavaScript コンストラクターのように見えます。それ以外には、実際には何も新しいものはありません。それについて。しかし、このパラメータはどこから来たのでしょうか?
この新しいスコープは、Scope.$new() メソッドを使用して ng-controller ディレクティブによって生成されます。待ってください。新しいスコープを作成するには、少なくとも 1 つのスコープのインスタンスが必要です。はい、AngularJS には実際には $rootScope があります (これは他のすべてのスコープの親です)。この $rootScope インスタンスは、新しいアプリケーションの起動時に作成されます。
ng-controller ディレクティブは、スコープを作成できるディレクティブの 1 つです。 AngularJS は、DOM ツリー内でこの create-scope ディレクティブを検出すると、Scope クラスの新しいインスタンスを作成します。これらの新しく作成されたスコープは、$parent プロパティを介して独自の親スコープを指します。 DOM ツリーにはスコープを作成できるディレクティブが多数存在します。その結果、多数のスコープが作成されます。
スコープの形式は親子のツリーのような関係に似ており、ルートは $rootScope インスタンスです。スコープの作成が DOM ツリーによって行われるのと同様に、スコープ ツリーも DOM の構造を模倣します。
一部のディレクティブが新しい子スコープを作成することがわかったので、なぜこれほど複雑な作業が必要なのか疑問に思うかもしれません。これを理解するために、ng-repeat ループ ディレクティブが使用される例を示します。
コントローラーは次のとおりです:
var WorldCtrl = function ($scope) {
$scope.population = 7000;
$scope.countries = [
{name: 'France', population: 63.1},
{name: 'United Kingdom', population: 61.8},
];
};
テンプレートは次のとおりです:
<ul ng-controller="WorldCtrl">
<li ng-repeat="country in countries">
{{country.name}} has population of {{country.population}}
</li>
<hr>
World's population: {{population}} millions
</ul>
この ng-repeat ディレクティブは、国のコレクションを反復し、国の項目ごとに新しい DOM 要素を作成できます。コレクション。 ng-repeat ディレクティブの構文は非常に理解しやすいです。各項目には新しい変数 country が必要で、ビューのレンダリングのためにそれを $scope にハングします。
しかし、ここには問題があります。つまり、各国は $scope に新しい変数をマウントする必要があり、以前にマウントされた値を単純に上書きすることはできません。 AngularJS は、コレクション内の要素ごとに新しいスコープを作成することでこの問題を解決します。これらの新しく作成されたスコープは、対応する DOM ツリー構造に非常に似ており、前述した素晴らしい Chrome 拡張機能 Batarang を使用して視覚化することもできます。
各スコープ (四角形で囲まれた) は独自のデータ モデルを維持します。同じ名前の変数を異なるスコープに追加してもまったく問題はなく、名前の競合も発生しません (異なる DOM 要素は異なるスコープを指し、対応するスコープの変数を使用してテンプレートをレンダリングします)。このように、各要素には独自の名前空間があり、各
スコープの階層と継承
想像してみてください。スコープで定義されたプロパティはその子に表示されます。子スコープでは同じ名前のプロパティを繰り返し定義する必要はありません。これは、スコープ チェーンを通じて使用できるプロパティを何度も再定義する必要がないため、実際には非常に便利です。
前の例をもう一度見て、世界の総人口に対するこれらの国の指定された割合を表示したいとします。この関数を実装するには、次のようにスコープで worldsPercentage メソッドを定義し、WorldCtrl で管理します:
$scope.worldsPercentage = function (countryPopulation) {
return (countryPopulation / $scope.population)*100;
}
その後、ng-repeat によって作成されたすべてのスコープ インスタンスがこれを呼び出します。メソッドは次のとおりです:
<li ng-repeat="country in countries">
{{country.name}} has population of {{country.population}},
{{worldsPercentage(country.population)}} % of the World's
population
</li>
AngularJS のスコープの継承ルールは、JavaScript のプロトタイプの継承ルールと同じです (属性を読み取る必要がある場合、属性が見つかるまで継承ツリーの先頭にクエリを実行し続けます。このプロパティに対して) ）。
スコープチェーンを介した継承のリスク
スコープの階層関係を介したこの種の継承は、データを読み取るときに非常に直感的で理解しやすいです。ただし、データを書き込む場合は少し複雑になります。
子スコープにあるかどうかに関係なく、スコープに変数を定義した場合を見てみましょう。 JavaScript コードは次のとおりです:
var HelloCtrl = function ($scope) {
};
ビューのコードは次のとおりです:
<body ng-app ng-init="name='World'">
<h1>Hello, {{name}}</h1>
<div ng-controller="HelloCtrl">
Say hello to: <input type="text" ng-model="name">
<h2>Hello, {{name}}!</h2>
</div>
</body>
このコードを実行すると、name 変数は最上位スコープでのみ定義されていることがわかります。アプリ全体で表示されます!これは、変数がスコープ チェーンから継承されていることを示しています。つまり、変数は親スコープで定義され、子スコープでアクセスされます。
现在，我们一起来看看，如果在 中写点字会发生什么，运行结果你可能会感到吃惊，因为 HelloCtrl 控制器所初始化的作用域创建了一个新的变量，而不是直接去修改$rootScope 实例中的值。不过当我们认识到作用域也只不过是在彼此间进行了原型继承，也就不会觉得那么吃惊了。所有可以用在 JavaScript 对象上的原型继承的规则，都可以同等的用在 作用域 的原型链继承上去。毕竟 Scopes 作用域就是 JavaScript 对象嘛。
在子级作用域中去改变父级作用域上面的属性有几种方法。第一种，我们就直接通过 $parent 属性来引用父级作用域，但我们要看到，这是一个非常不可靠的解决方案。麻烦之处就在于，ng-model 指令所使用的表达式非常严重的依赖于整个DOM结构。比如就在 标签上面的哪里插入另一个 可创建作用域 的指令，那$parent 就会指向一个完全不同的作用域了。
就经验来讲，尽量避免使用 $parent 属性，因为它强制的把 AngularJS 表达式和你的模板所创建的 DOM 结构捆绑在了一起。这样一来，HTML结构的一个小小的改动，都可能会让整个应用崩溃。
另一个解决方案就是，不要直接把属性绑定到 作用域上，而是绑到一个对象上面，如下所示：
<body ng-app ng-init="thing = {name : 'World'}">
<h1>Hello, {{thing.name}}</h1>
<div ng-controller="HelloCtrl">
Say hello to: <input type="text" ng-model="thing.name">
<h2>Hello, {{thing.name}}!</h2>
</div>
</body>
这个方案会更可靠，因为他并没有假设 DOM 树的结构是什么样子。
避免直接把数据绑定到 作用域的属性上。应优先选择把数据双向绑定到对象的属性上（然后再把对象挂到 scope 上）。就经验而言，在给 ng-model 指令的表达式中，你应该有一个点（例如， ng-model="thing.name"）。
作用域层级和事件系统
层级关系中的作用域可以使用 event bus（一种事件系统）。AngularJS可以在作用域层级中传播具名的装备齐全的事件。事件可以从任何一个作用域中发出，然后向上（$emit）和向下（$broadcast）四处传播。
AngularJS核心服务和指令使用这种事件巴士来发出一些应用程序状态变化的重要事件。比如，我们可以监听$locationChangeSuccess 事件（由 $rootScope 实例发出），然后在任何 location（浏览器中就是URL）变化的时候都会得到通知，如下所示：
$scope.$on('$locationChangeSuccess', function(event, newUrl, oldUrl){
//react on the location change here
//for example, update breadcrumbs based on the newUrl
});
每一个作用域对象都会有这个 $on 方法，可以用来注册一个作用域事件的侦听器。这个函数所扮演的侦听器在被调用时会有一个 event 对象作为第一个参数。后面的参数会根据事件类型的不同与事件本身的配备一一对应。
类似于 DOM 事件，我们可以调用 event 对象的 preventDefault() 和 stopPropagation() 方法。stopPropagation() 方法将会阻止事件沿着作用域层级继续冒泡，并且只在事件向上层传播的时候（$emit）才有效。
尽管 AngularJS 的事件系统是模仿了 DOM 的，但两个事件传播系统是完全独立的，没有任何共同之处。
虽然在作用域层级中传播事件对一些问题来说是一种非常优雅方案（特别是对全局的，异步的状态变化来说），但还是要适度使用。通常情况下，可以依靠双向数据绑定来得到一个比较干净的方案。在整个 AngularJS 框架中，一共只发出（$emit）了三个事件（$includeContentRequested,$includeContentLoaded,$viewContentLoaded）和七个广播（$broadcast）（$locationChangeStart, $locationChangeSuccess, $routeUpdate, $routeChangeStart,$routeChangeSuccess, $routeChangeError, $destroy）。正如你所看到的，作用域事件使用的非常少，我们应该在发送自定义的事件之前认真的评估一下其他的可选方案（多数会是双向数据绑定）。
千万不要在 AngularJS 中模仿 DOM 的基于事件的编程方式。大多数情况下，你的应用会有更好的架构方式，你也可以在双向数据绑定这条路上深入探索。
作用域的生命周期
作用域需要提供相互隔离的命名空间，避免变量的命名冲突。作用域们都很小，而且被以层级的方式组织起来，对内存使用的管理来说很有帮助。当其中一个作用域不再需要 ，它就可以被销毁了。结果就是，这个作用域所暴露出来的模型和方法就符合的垃圾回收的标准。
新的作用域通常是被 可创建作用域 的指令所生成和销毁的。不过也可以使用 $new() 和 $destroy() 方法来手动的创建和销毁作用域。
希望本文所述对大家AngularJS程序设计有所帮助。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7500
15
1377
52
78
11
19
54
入門から習得まで、2022 年の最新 5 つの angularjs チュートリアル
Jun 15, 2017 pm 05:50 PM
Javascript は、コードの構成、コードのプログラミング パラダイム、およびオブジェクト指向理論の点で非常にユニークな言語です。しかし、JavaScript が 20 年間主流であったとはいえ、jQuery、Angularjs、さらには React などの人気のあるフレームワークを理解したい場合は、「Black Horse Cloud Classroom JavaScript Advanced Framework」を見てください。デザインビデオチュートリアル」。
PHP と AngularJS を使用して応答性の高い Web サイトを構築し、高品質のユーザー エクスペリエンスを提供します
Jun 27, 2023 pm 07:37 PM
今日の情報化時代において、ウェブサイトは人々が情報を入手し、コミュニケーションを図るための重要なツールとなっています。レスポンシブな Web サイトはさまざまなデバイスに適応し、ユーザーに高品質のエクスペリエンスを提供できます。これは、現代の Web サイト開発のホットスポットとなっています。この記事では、PHP と AngularJS を使用して応答性の高い Web サイトを構築し、高品質のユーザー エクスペリエンスを提供する方法を紹介します。 PHP の概要 PHP は、Web 開発に最適なオープンソースのサーバー側プログラミング言語です。 PHP には、学びやすさ、クロスプラットフォーム、豊富なツール ライブラリ、開発効率など、多くの利点があります。
PHP と AngularJS を使用して Web アプリケーションを構築する
May 27, 2023 pm 08:10 PM
インターネットの継続的な発展に伴い、Web アプリケーションは企業情報構築の重要な部分となり、最新化作業に必要な手段となりました。 Web アプリケーションの開発、保守、拡張を容易にするために、開発者は開発ニーズに合った技術フレームワークとプログラミング言語を選択する必要があります。 PHP と AngularJS は非常に人気のある 2 つの Web 開発テクノロジであり、それぞれサーバー側とクライアント側のソリューションであり、これらを組み合わせて使用すると、Web アプリケーションの開発効率とユーザー エクスペリエンスを大幅に向上させることができます。 PHPPHPの利点
PHP と AngularJS を使用してオンライン ファイル管理プラットフォームを開発し、ファイル管理を容易にする
Jun 27, 2023 pm 01:34 PM
インターネットの普及に伴い、ネットワークを使用してファイルを転送したり共有したりする人が増えています。ただし、さまざまな理由により、FTP などの従来の方法をファイル管理に使用しても、現代のユーザーのニーズを満たすことができません。したがって、使いやすく、効率的で安全なオンライン ファイル管理プラットフォームを確立することがトレンドになっています。この記事で紹介するオンライン ファイル管理プラットフォームは、PHP と AngularJS をベースにしており、ファイルのアップロード、ダウンロード、編集、削除などの操作を簡単に実行でき、ファイル共有、検索、検索などの一連の強力な機能を提供します。
PHP プログラミングで AngularJS を使用するにはどうすればよいですか?
Jun 12, 2023 am 09:40 AM
Web アプリケーションの人気に伴い、フロントエンド フレームワーク AngularJS の人気も高まっています。 AngularJS は、Google が開発した JavaScript フレームワークで、動的な Web アプリケーション機能を備えた Web アプリケーションの構築に役立ちます。一方、バックエンド プログラミングの場合、PHP は非常に人気のあるプログラミング言語です。サーバーサイド プログラミングに PHP を使用している場合、PHP と AngularJS を使用すると、Web サイトにさらに動的な効果がもたらされます。
Flask と AngularJS を使用してシングルページ Web アプリケーションを構築する
Jun 17, 2023 am 08:49 AM
Web テクノロジーの急速な発展に伴い、シングル ページ Web アプリケーション (SinglePage Application、SPA) は、Web アプリケーション モデルとしてますます人気が高まっています。従来の複数ページの Web アプリケーションと比較して、SPA の最大の利点は、ユーザー エクスペリエンスがよりスムーズであり、サーバーのコンピューティング負荷も大幅に軽減されることです。この記事では、FlaskとAngularJSを使って簡単なSPAを構築する方法を紹介します。 Flask は軽量の Py です
フロントエンド開発に PHP と AngularJS を使用する方法
May 11, 2023 pm 05:18 PM
インターネットの普及と発展に伴い、フロントエンド開発の重要性がますます高まっています。フロントエンド開発者として、私たちはさまざまな開発ツールとテクノロジーを理解し、習得する必要があります。その中でも、PHP と AngularJS は非常に便利で人気のあるツールです。この記事では、これら 2 つのツールをフロントエンド開発に使用する方法を説明します。 1. PHP の概要 PHP は、人気のあるオープン ソースのサーバー側スクリプト言語であり、Web 開発に適しており、Web サーバーやさまざまなオペレーティング システム上で実行できます。 PHP の利点は、シンプルさ、スピード、利便性です。
