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

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

1.

をダウンロードします。

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

公式ウェブサイト: <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 はコントローラーのコンストラクターです。

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

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

<頭>



        <スクリプトタイプ="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();
        });
       
       
   
   
    {{test}}
   

        {{出力}}
   

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;
        });
       
       
   
   
    {{test}}
   

        {{出力}}
   

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();
        });
       
       
   
   
    {{test}}
   

        {{出力}}
   

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();
        });
       
       
   
   
    {{test}}
   

        {{出力}}
   

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