angularjs の基本チュートリアル_AngularJS-jsチュートリアル-php.cn

angularjs の基本チュートリアル_AngularJS

WBOY

リリース： 2016-05-16 16:24:34

オリジナル

1236 人が閲覧しました

長い間何も書いていないので、どこから始めればよいのかさえわからないような気がします。まず、angularjs について書いてみましょう。私の兄はこれを「忺哥拉js」と呼んでいます。

をダウンロードします。

コードをコピーしますコードは次のとおりです:

公式ウェブサイト: <a href="https://angularjs.org/">https://angularjs.org/<code>官方网址：<a href="https://angularjs.org/">https://angularjs.org/</a>
CDN: <a href="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js">https://ajax.googleapis.com /ajax/libs/angularjs/1.3.0-beta.5/angular.min.js<code>CDN：<a href="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js">https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js</a>

2. 1.ng-app の使い方の簡単な紹介

は angularjs のスコープを決定します。次のように使用できます

コードをコピーしますコードは次のとおりです:

…

で angularjs にページ全体をレンダリングさせるには、

を使用することもできます

コードをコピーコードは次のとおりです:

<code><br>
<font face="Arial"><div ng-app='myapp'><br>
……<br>
</div></font><br>

…

はその一部をレンダリングします。

2.ng-model

ng-model、データモデルが変更されると、たとえば ng-model='test'、test の値が変更されると、それに応じて {{test}} の値も変更されます。つまり、テストですng-model への接続も次のように変更されましたコードをコピーします

コードは次のとおりです:

<頭>

<ボディNGアプリ>
{{test}}

3.angular.module

これは主にモジュールの登録、作成、インデックス作成に使用されます。たとえば、ng-app がこれをサービスとして登録したい場合、モジュールを参照してインデックスを作成するときにも使用する必要があります。

コードをコピーします

 コードは次のとおりです:

angular.module(name, [requires], [configFn]);

#name 文字列型 
 によって作成された取得モジュールの名前
#requires 簡単に理解すると、ngRoute ルーティング モジュール

などの使用モジュールを含める必要があるということです。 #configFn オプションの関数モジュール。関数は module.config に似ています。

4.コントローラー

Controller は angular.Module のメソッドcontroller(name,constructor) です。name はコントローラーの名前、constructor はコントローラーのコンストラクターです。

を説明するためにコードを使用します。コードをコピー

コードは次のとおりです:

<頭>

5.値

Value は angular.Module のメソッド value(name, object) でもあり、name はサービスの名前、object はサーバーインスタンスオブジェクトです。この時点で、上記のコードを次のように変更できます。 🎜>

コードをコピーしますコードは次のとおりです:

<頭>

{{test}}

5.工場

factory は angular.Module のメソッド Factory(name, ProviderFunction); です。ここで、name はサービスの名前であり、providerFunction は新しいサーバーオブジェクトの作成に使用される関数です。この時点で、上記を変更できます。コードは次のようになります

コードをコピー

コードは次のとおりです:

    <頭>

        <スクリプトタイプ="text/javascript">
        var app = angular.module('myapp',[])
            .value('testvalue','widuu')
            .factory('testfactory',function(testvalue){
                戻る{
                    lable:function(){
                        return "これは : hello " を出力できます testvalue;
                    }
                }
            });
        app.controller('mytest',function($scope,testvalue,testfactory){
            $scope.test = "hello " テスト値;
            $scope.output = testfactory.lable();
        });

        argularjs の学習 -- widuu

6.プロバイダ

provider も angular.Module 内のメソッドprovider(name, ProviderType); その中のname はサービスの名前、providerFunction は新しいサービスオブジェクトオブジェクトを作成するための関数です、このファクトリの差はあまりありません、私はプロバイダーを再書き込みします

复制代码代码如下:

    <頭>

        <スクリプトタイプ="text/javascript">
        var app = angular.module('myapp',[])
            .value('testvalue','widuu')
            .provider('テストプロバイダ',
                function(){
                  this.lable = "これは出力します: hello widuu";
                  this.$get = function () {
                       これを返します;
                   }
                }
            );
        app.controller('mytest',function($scope,testvalue,testprovider){
            $scope.test = "hello " テスト値;
            $scope.output = testprovider.lable;
        });

        argularjs の学習 -- widuu

7.サービス

service も angular.Module 内のメソッドservice(name,constructor);その中のnameはサービスの名前、constructor のいずれかが例示される構造関数、このファクトリの差はあまりありません、私はサービスを再書き込みします

复制代码代码如下:

    <頭>

        <スクリプトタイプ="text/javascript">
        var app = angular.module('myapp',[])
            .value('testvalue','widuu')
            .service('テストサービス',
                関数(テスト値){
                    this.lable = function(){
                        return "これは出力します:hello " testvalue;
                    }
                }
            );
        app.controller('mytest',function($scope,testvalue,testservice){
            $scope.test = "hello " テスト値;
            $scope.output = testservice.lable();
        });

        argularjs の学習 -- widuu

8.定数

constant も angular です。モジュール内のメソッド constant(name, object); その中の name は常量の名前であり、object は常量の値です。これを記述できます

复制代码代码如下:

    <頭>

        <スクリプトタイプ="text/javascript">
        var app = angular.module('myapp',[])
            .value('testvalue','widuu')
            .constant('カウント',23)
            .service('テストサービス',
                関数(テスト値,カウント){
                    this.lable = function(){
                        return "これは出力します:hello " testvalue "、年齢は " count;
                    }
                }
            );
        app.controller('mytest',function($scope,testvalue,testservice){
            $scope.test = "hello " テスト値;
            $scope.output = testservice.lable();
        });

        argularjs の学習 -- widuu

今天就写到这里，而後以后续。