angularjsの3大モジュール学習メモ（モーダル、コントローラー、ビュー）_AngularJS
今日は主に angularjs の 3 つの主要なモジュール、モーダル、コントローラー、ビューについて詳しく説明します。
まず、これら 3 つのモジュールの関係について説明します。
1. データモデル (モーダル) は主にデータを提供します。ビューとは直接対話しません。
2. コントローラーはモーダルによって提供されたデータを保存し、ビューを操作します。
3.viewはビュー、つまりページ表示です。
4. つまり、コントローラーはデータとビューの間の通信を担当し、この 2 つの間のインターフェイスです。役割分担が明確であり、モジュール化が実現されています。
1. データモデル(モーダル)の使い方は？
データ モデルについて言えば、前のチュートリアルの例を見てみましょう:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="angular-1.2.19/angular.js"></script> <!-- 引入了AngularJS包 -->
<script src="controll.js"></script> //引入控制器
</head>
<body>
<div ng-controller="controller">
<input type="text" ng-model="text">
<b>{{greeting.text}} {{text}}</b>
</div>
</body>
</html>
1. まず angularjs パッケージを導入します。開始するときは、スコープ全体を指定する ng-app ディレクティブを探します。
2. 次に、具体的な手順を探し続けます。ここでは、「テキスト」データ モデルを定義する ng-model を見つけます。3. 以下ではテキスト モデルが使用されているため、双方向のバインディングが実現されます。 (ng-appの範囲内であればテキストを直接使用することも可能です)
2. コントローラーの使い方は？
まず、コントローラーを使用する際の重要なポイントについて説明します。1. コントローラーをビューに再利用しないでください。コントローラーは通常、少数のビュー (1 対 1 の対応) のみを担当します。
2. コントローラーで DOM を直接操作しないでください。これはコントローラーの責任ではありません。指示コマンドを使用します (前のチュートリアルを参照)。
3. コントローラーでデータ フィルター操作を実行しないでください。これを実装するための専用のフィルター サービスがあります。4. 一般的に、異なるコントローラーは相互に呼び出しを行うことはなく、コントローラー間の対話は一般にイベントを通じて実行されます。
次に、上記のコードの青い部分を見てみましょう。control.js の内容は次のとおりです。
Angularjs は ng-controller 命令を見つけて、この命令が定義されている場所 (control.js ファイル) を見つけます。その後、greeting.text を使用してその値を直接取得できます。
function controller($scope){
$scope.greeting = {
text : 'hello'
};
}
ビューの使用方法について話すときは、ディレクティブについて言及する必要があります。 (これは新しい知識です!!!) コードの一部を見てみましょう:
上記のコードは、HTML 内で
var appModule = angular.module('app', []); //app是html中ng-app指令的名称
appModule.directive('hello', function() { //定义一个指令，名称叫hello
return {
restrict: 'E',
template: '<div>Hi there</div>',
replace: true
};
});
1.restrict: (文字列) オプションのパラメーター。DOM で命令がどのような形式で宣言されているかを示します。値は次のとおりです: E (要素)、A (属性)、C (クラス)、M (コメント); 上記の例は要素形式 (
3.templateUrl: 上記と同様に、URL を通じてコンテンツを返します。大量のコンテンツが返される場合は、この属性を使用することをお勧めします。
4.relace: (ブール値)、デフォルト値は false です。上記の例は true に設定されています。hello タグを使用した後、ページは返された div に置き換えられます。
5.transclude: (ブール値)、true に設定されている場合。この設定オプションを使用すると、ディレクティブの要素に含まれるコンテンツを抽出し、ng-transclude で使用されるディレクティブ テンプレート内の特定の場所に配置できます。
6. 他にもいくつかの属性があります。後で詳しく学びましょう。 。 。
OK、上記はこれら 3 つの主要モジュールの使用手順です。皆様の学習のお役に立てれば幸いです。 。 。上記の注意事項についてわからないことがあれば、質問していただければ必ずお答えします。皆さんの幸せな人生を祈っています！
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7629
15
1389
52
89
11
31
141
入門から習得まで、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の利点
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 を使用するにはどうすればよいですか?
Jun 12, 2023 am 09:40 AM
Web アプリケーションの人気に伴い、フロントエンド フレームワーク AngularJS の人気も高まっています。 AngularJS は、Google が開発した JavaScript フレームワークで、動的な Web アプリケーション機能を備えた Web アプリケーションの構築に役立ちます。一方、バックエンド プログラミングの場合、PHP は非常に人気のあるプログラミング言語です。サーバーサイド プログラミングに PHP を使用している場合、PHP と AngularJS を使用すると、Web サイトにさらに動的な効果がもたらされます。
PHP と AngularJS を使用してオンライン ファイル管理プラットフォームを開発し、ファイル管理を容易にする
Jun 27, 2023 pm 01:34 PM
インターネットの普及に伴い、ネットワークを使用してファイルを転送したり共有したりする人が増えています。ただし、さまざまな理由により、FTP などの従来の方法をファイル管理に使用しても、現代のユーザーのニーズを満たすことができません。したがって、使いやすく、効率的で安全なオンライン ファイル管理プラットフォームを確立することがトレンドになっています。この記事で紹介するオンライン ファイル管理プラットフォームは、PHP と AngularJS をベースにしており、ファイルのアップロード、ダウンロード、編集、削除などの操作を簡単に実行でき、ファイル共有、検索、検索などの一連の強力な機能を提供します。
フロントエンド開発に PHP と AngularJS を使用する方法
May 11, 2023 pm 05:18 PM
インターネットの普及と発展に伴い、フロントエンド開発の重要性がますます高まっています。フロントエンド開発者として、私たちはさまざまな開発ツールとテクノロジーを理解し、習得する必要があります。その中でも、PHP と AngularJS は非常に便利で人気のあるツールです。この記事では、これら 2 つのツールをフロントエンド開発に使用する方法を説明します。 1. PHP の概要 PHP は、人気のあるオープン ソースのサーバー側スクリプト言語であり、Web 開発に適しており、Web サーバーやさまざまなオペレーティング システム上で実行できます。 PHP の利点は、シンプルさ、スピード、利便性です。
