ホームページ ウェブフロントエンド jsチュートリアル Angularjs に関連する詳細な例を共有する

Angularjs に関連する詳細な例を共有する

Jul 03, 2017 pm 02:14 PM
angularjs javascript 導入

この週末は 2 日間家にいたので、昼の空き時間に Angularjs 関連のコンテンツをシェアし続けました。今日は主に Angularjs の概要とデータ バインディングの部分をシェアします。

1. 基本概念:
AngularJS は、アプリケーションの構築における HTML の欠点を克服するように設計されています。 HTML は、疑似静的テキスト表示デザインには優れた宣言型言語ですが、WEB アプリケーションの構築には弱いです。そこで、ブラウザーに希望どおりの動作をさせるために、いくつかの作業を行いました (ちょっとしたトリックと考えることもできます)。通常、動的アプリケーションを構築する際には、次のテクノロジーを使用して静的 Web ページ テクノロジーの欠点を解決します。
2、バージョン

angualrjs1.x: 現在比較的安定したバージョン。
angularjs2.x: typescript に基づいて書かれており、1.x に基づいて大幅に変更されており、モバイル開発を好み、ES6 標準で書かれています
angularjs4.x 最新バージョン

現在のバージョン 2.x はベースではありません1.x のアップグレードは基本的に破壊的です。現在、2.x は 1.x バージョンの再構築を開始しており、この点では Vue や React と同様にコンポーネント化も推奨されています。 。

3. コア機能
MVC (または MVVM) の設計哲学:

多くの人は Angularjs は単なる設計哲学であると思います。内部ではMVVMの影があると言われていますが、MVVMはMVCをベースにアップグレードされており、双方向のデータバインディング機能が追加されていますが、これは単なる個人的な意見です。修正してください。

双方向データ バインディング:

双方向データ バインディングは AngularJs によって提案されたものではありませんが、Microsoft の WPF は MVVM のアイデアを使用しており、フロントエンド フレームワーク Knockoutjs には 2 つの概念があります。データバインディングの方法。
モジュール化と依存性注入

モジュール化と依存性注入は、AngularJs の中核的な内容であり、Angular のハイライトです。
コマンドシステム

コマンドシステムは、組み込みコマンドとカスタムコマンドに分かれており、多くの強力な機能を実現できると思います。詳細はコマンド説明時に詳しく説明します。

4. 専門分野

1) シングルページアプリケーション (SPA)
2) CRUD プログラム

一部のガーデナーはシングルページアプリケーションをよく理解していない可能性があります。これは簡単な例です。たとえば、従来の MPA は Iframe フレームワークを介したマルチページ アプリケーションです。マルチページ アプリケーションの欠点は、複数のページが複数回ロードされ、単一ページのアプリケーションが HTML セグメントを通じてロードまたは切り替えられることです。 MPA と SPA についてはここではあまり紹介しません。Baidu を参照してください。

AngularJs は CRUD アプリケーション システムには適していますが、頻繁にページ操作を行うアプリケーションやグラフィカル ページやゲーム システムには適していません。

5. AngularJs アプリケーションの構成

NG アプリケーションは、コントローラー、サービス、命令、ルート、フィルターなどのモジュール タイプで構成されます。関係を表すために図を使用します。

6. モジュール

AngularJS では、モジュールはコントローラー、構成、サービス、ファクトリー、ディレクティブ、定数などの多くの側面を含む中心的な存在です。 モジュールの作成方法: angular.module('myApp',[]); モジュールの使用方法: 必要な場所 (特定の HTML タグ上) に ng-app を追加します
モジュールを使用する利点:
1)グローバル名前空間のクリーンさを維持します。
2) テストコードを書きやすくなります。
3) 異なるアプリケーション間でコードを再利用しやすくなります。
4) 人々が理解しやすいように宣言を使用します。



7. アプリケーションで AngularJs を使用する

1) アプリケーションで Angular を使用する場合、まずページ内で Angular フレームワークの JS ライブラリ コードを参照します。

<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!--引用AngularJs库    -->
    <script type="text/javascript" src="/lib/angular-1.3.0.14/angular.js?1.1.11"></script>
  
</head>
ログイン後にコピー

2) Angular を適用する html 要素に ng-app モジュールを追加します。コントローラーを追加する必要がある場合は、body 要素に追加する必要はありませんが、任意の要素に追加できます。これは、Angular アプリケーション境界の使用を示します。

<body ng-app="myapp" ng-controller="myCtrl">
    <!--    1、表达式绑定 -->
    <h1>{{expression}}</h1>
    <!-- 2、指令绑定-->
    <h2>{{ngmodel}}</h2>
    <input type="text" ng-model="ngmodel">
    <!--    3、ng-bind绑定-->
    <h3 ng-bind="ngbind"></h3>
    <h3 class="ng-bind:ngbind"></h3>
    <!--    4、ng-bind-html绑定-->
    <h4 ng-bind-html="htmlbind"></h4>
    <!--    5、ng-bind-template -->
    <h5 ng-bind-template="{{ngbind}},{{1+1}}"></h5>
</body>
ログイン後にコピー
3. jsコードを追加し、モジュールやコントローラーなどを定義します。

<script>
    //模块定义
    // 第一个参数:应用名称,第二个参数:应用依赖模块
    var app = angular.module(&#39;myapp&#39;, [&#39;ngSanitize&#39;]);

    //    控制器定义
    //    第一参数: 控制器名称, 第二个参数: 匿名函数, 传入作用域,并在作用域上添加额外功能
    app.controller(&#39;myCtrl&#39;, function($scope) {
        $scope.expression = "hello expression";
        $scope.ngbind = "hello ng-bind";
        $scope.htmlbind = "<font color=&#39;red&#39;>hello,htmlbind</font>";
        $scope.subCtrl = "hello subCtrl";

    });

</script>
ログイン後にコピー

上記のコードスニペットから、モジュールとコントローラーのメソッドを定義する方法がわかり、各パラメーターの意味がコメントされています。

その時点でソースコードはGitHub上で全員に共有され、誰でもダウンロードできるようになります。

今日はできるだけ多くの内容を共有します。次回はデータ バインディングとコントローラー関連の内容を共有します。間違った点があれば修正してください。

以上がAngularjs に関連する詳細な例を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

wapiとは何かを詳しく紹介 wapiとは何かを詳しく紹介 Jan 07, 2024 pm 09:14 PM

インターネットを利用する際に「wapi」という言葉を目にしたことはあるかもしれませんが、「wapi」が何なのかよく分からないという方もいると思いますので、以下で詳しくご紹介します。 wapi とは: 回答: wapi は、無線 LAN の認証と機密性を確保するためのインフラストラクチャです。一般的にオフィスビルなどの近くでカバーされる赤外線やBluetoothなどの機能と似ています。基本的にこれらは小さな部門によって所有されているため、この機能の範囲はわずか数キロメートルです。 wapi の関連紹介: 1. Wapi は無線 LAN の伝送プロトコルです。 2. この技術により、狭帯域通信の問題を回避し、より良好な通信が可能になります。 3. 信号の送信に必要なコードは 1 つだけです

win11でPUBGゲームが実行できるか詳しく解説 win11でPUBGゲームが実行できるか詳しく解説 Jan 06, 2024 pm 07:17 PM

PlayerUnknown's Battlegrounds としても知られる Pubg は、2016 年の人気以来、多くのプレイヤーを魅了してきた非常に古典的なシューティング バトル ロイヤル ゲームです。最近win11システムがリリースされた後、多くのプレイヤーがwin11でpubgをプレイしたいと考えています。編集者に従ってwin11でpubgをプレイできるかどうかを確認してみましょう。 win11 で pubg をプレイできますか? 回答: Win11 で pubg をプレイできます。 1. win11の開始当初、win11ではtpmを有効にする必要があったため、多くのプレイヤーがpubgから追放されました。 2. しかし、プレイヤーのフィードバックに基づいて、Blue Hole はこの問題を解決し、win11 で pubg を正常にプレイできるようになりました。 3.居酒屋に出会ったら

i5プロセッサがwin11をインストールできるかどうかの詳細な紹介 i5プロセッサがwin11をインストールできるかどうかの詳細な紹介 Dec 27, 2023 pm 05:03 PM

i5 は Intel が所有するプロセッサのシリーズで、第 11 世代 i5 にはさまざまなバージョンがあり、世代ごとに性能が異なります。したがって、i5 プロセッサーが win11 をインストールできるかどうかは、プロセッサーの世代によって異なりますので、エディターに従って個別に学習しましょう。 i5 プロセッサーは win11 にインストールできますか: 回答: i5 プロセッサーは win11 にインストールできます。 1. 第 8 世代以降の i51、第 8 世代以降の i5 プロセッサは、Microsoft の最小構成要件を満たすことができます。 2. したがって、Microsoft Web サイトにアクセスして「Win11 インストール アシスタント」をダウンロードするだけで済みます。 3. ダウンロードが完了したら、インストール アシスタントを実行し、プロンプトに従って Win11 をインストールします。 2. i51 8世代以前と8世代以降

最新のWin11サウンドチューニング方法を紹介 最新のWin11サウンドチューニング方法を紹介 Jan 08, 2024 pm 06:41 PM

最新の win11 にアップデートした後、システムのサウンドが少し変わったように感じますが、調整方法がわからないという人が多いので、このサイトでは、最新の win11 サウンド調整方法を紹介します。操作は難しくなく、選択肢も豊富ですので、ぜひダウンロードして試してみてください。最新のコンピュータ システム Windows 11 のサウンドを調整する方法 1. まず、デスクトップの右下隅にあるサウンド アイコンを右クリックし、「再生設定」を選択します。 2. 次に設定を入力し、再生バーの「スピーカー」をクリックします。 3. 次に、右下の「プロパティ」をクリックします。 4. プロパティの「拡張」オプションバーをクリックします。 5. この時、「すべての効果音を無効にする」の前にある√にチェックが入っている場合は、チェックを外します。 6. その後、以下の効果音を選択して設定し、クリックします。

PyCharm 初心者ガイド: 置換関数の包括的な分析 PyCharm 初心者ガイド: 置換関数の包括的な分析 Feb 25, 2024 am 11:15 AM

PyCharm は、開発効率を大幅に向上させる豊富な機能とツールを備えた強力な Python 統合開発環境です。その中でも置換機能は開発プロセスで頻繁に使用される機能の 1 つであり、開発者がコードを迅速に修正し、コードの品質を向上させるのに役立ちます。この記事では、初心者がこの関数をよりよく習得して使用できるように、特定のコード例と組み合わせて PyCharm の置換関数を詳細に紹介します。置換関数の概要 PyCharm の置換関数は、開発者がコード内の指定されたテキストを迅速に置換するのに役立ちます

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

コンピューター上のプリンタードライバーの場所に関する詳細情報 コンピューター上のプリンタードライバーの場所に関する詳細情報 Jan 08, 2024 pm 03:29 PM

多くのユーザーは、コンピューターにプリンター ドライバーをインストールしていますが、そのドライバーを見つける方法がわかりません。そこで、今日は、コンピューターのプリンタードライバーの場所について詳しくご紹介します。まだ知らない人のために、プリンタードライバーの場所を見てみましょう。元の意味を変えずに内容を書き換える場合、言語は中国語に書き換えられ、元の文章が表示される必要はありません。まず、サードパーティのソフトウェアを使用して検索することをお勧めします。 2. 右上隅の「ツールボックス」を見つけます。下の「デバイスマネージャー」をクリックします。書き換えられた文: 3. 下部にある [デバイス マネージャー] を見つけてクリックします。 4. 次に、[印刷キュー] を開いてプリンター デバイスを見つけます。今回はプリンターの名前とモデルです。 5. プリンター デバイスを右クリックすると、更新またはアンインストールできます。

ドージコインとは ドージコインとは Apr 01, 2024 pm 04:46 PM

Dogecoin は、インターネット ミームに基づいて作成された暗号通貨であり、固定供給上限がなく、速い取引時間、低い取引手数料、そして大規模なミーム コミュニティを備えています。用途には、少額の取引、チップ、慈善寄付が含まれます。しかし、その無限の供給、市場のボラティリティ、ジョークコインとしての地位は、リスクと懸念ももたらします。ドージコインとは何ですか? Dogecoin は、インターネットのミームやジョークに基づいて作成された暗号通貨です。起源と歴史: Dogecoin は、2 人のソフトウェア エンジニア、ビリー マーカスとジャクソン パーマーによって 2013 年 12 月に作成されました。当時人気だった「Doge」ミームからインスピレーションを得た、片言の英語を話す柴犬をフィーチャーしたコミカルな写真。特徴と利点: 無制限の供給: ビットコインなどの他の暗号通貨とは異なります。

See all articles