ホームページ > 記事 > ウェブフロントエンド > Angularjs に関連する詳細な例を共有する

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

零下一度オリジナル: 2017-07-03 14:14:551047ブラウズ

この週末は 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 までご連絡ください。

前の記事：携帯電話番号、メールアドレス、IDカード、銀行カードの定期認証例次の記事：携帯電話番号、メールアドレス、IDカード、銀行カードの定期認証例

続きを見る