Angularjsの基礎知識と事例まとめ_AngularJS

angularjs は、Google が開発したハイエンド フロントエンド MVC 開発フレームワークです。

Angularjs 公式 Web サイト: https://angularjs.org/ 公式 Web サイトにはデモがあり、アクセスするには FQ が必要な場合があります

Angularjs 中国語コミュニティ: http://www.angularjs.cn/ 初心者に適しています

参照ファイル: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js

angular を使用する場合は注意してください

angularjs ライブラリを引用します: https://github.com/litengdesign/angularjsTest/blob/master/angular-1.0.1.... の例の github からダウンロードできます。このセクション
使用しているエリアに ng-app="appName" を追加するか、ng-app (グローバル) を直接追加する必要があります。
コントローラー ng-controller="Ctrl" を設定します。
サンプルをテストするときは、次の点に注意してください

作者は angular-1.0.1.min.js を使用しているので、head の前に angularjs コードを導入する必要があります。バージョンの違いに注意してください。
すべての小さな例は次の領域で実行されます。必ず ng-app をスコープに追加してください。
以下では、いくつかの小さなケースを使用して、デフォルトの一般的な命令と angularjs の使用法を説明します。

hello world プログラム (二重データ バインディング)

ng-model={{name}} を使用してデータをバインドします

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

name:

---

こんにちは:{{名前 || 'リテン'}}

http://2.liteng.sinaapp.com/angularjsTest/helloangularjs.html

イベント バインディングを使用する小さなケース

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

単価:
数量:

合計価格: {{(価格) * (数量)}}

注:

html5 に関連する入力: http://www.w3school.com.cn/ html5 /att_input_type.asp

http://www.w3school.com.cn/html5/att_input_type.asp">>

ng-init: 初期値を設定

http://2.liteng.sinaapp.com/angularjsTest/event-bind.html

ng-init: デフォルトで属性値を指定可能

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

{{value}}

http://2.liteng.sinaapp.com/angularjsTest/ng-init.html

ng-repeat: js の情報の i と同様のデータを反復するために使用されます

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

私には {{friends.length}} 人の友達がいます

• 
  [{{$index 1}}]: {{friend.name}} の年齢: {{friend.age}}
  

http://2.liteng.sinaapp.com/angularjsTest/ng-repeat.html

ng-click:dom クリック イベント

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

{{a}}

関数 ctrl($scope){
$scope.a='こんにちは';
$scope.showMsg=function(){
$scope.a='世界';
}
}

http://2.liteng.sinaapp.com/angularjsTest/ng-click.html

ng-show: 要素の表示を設定します

注: ng-show="!xx": 属性値の前に追加します。追加されていない場合は表示の確認を示します。不明な場合は、

を表示しないでください。

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

ng-show="!show"

ng-show="表示"

http://2.liteng.sinaapp.com/angularjsTest/ng-show.html

ng-hide: 要素を非表示に設定します

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

ng-hide="aaa"

ng-show="!aaa"

http://2.liteng.sinaapp.com/angularjsTest/ng-hide.html

ng-show を使用してトグル効果を作成します

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

切り替え

ロゴを表示

http://liteng.org/sites/default/files/logo.png" alt="">

http://2.liteng.sinaapp.com/angularjsTest/ng-toggle.html

ng-style: デフォルトのスタイル

に似ています

ここでの記述形式に注意してください: 文字列は引用符で囲む必要があります

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

ボックス

http://2.liteng.sinaapp.com/angularjsTest/ng-style.html

フィルター: フィルターフィールド

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

{{9999|数値}}

{{9999 1 |number:2}}

{{9*9|通貨}}

{{'hello world' 大文字}}

http://2.liteng.sinaapp.com/angularjsTest/filter.html

ng-template: テンプレートをロードできます

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

tpl.html

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

こんにちは

http://2.liteng.sinaapp.com/angularjsTest/show-tpl.html

$http: ajax のようなメソッドはうまく機能します

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

HTTP リクエストメソッド 1

• 
  {{x.名前}} {{x.国}}
                                                                                       

方法 2

• 
  {{y.aid}} {{y.title}}
                                                                                       

//方法 1
var TestCtrl=function($scope,$http){
var p=$http({
メソッド: 'GET'、

url:'json/date.json'
}); p.success(function(response,status,headers,config){
$scope.names=response;
});
p.error(function(status){
console.log(ステータス);
});
}
//方法 2
関数 TestCtrl2($scope,$http){
$http.get('json/yiqi_article.json').success(function(response){
$scope.info=response;
});
}

http://2.liteng.sinaapp.com/angularjsTest/ajax.html

上記のすべてのコード: https://github.com/litengdesign/angularjsTest

実装されたデモ: http://2.liteng.sinaapp.com/angularjsTest/index.html

angularjsのルーティング(ルーター)とディレクティブ(ディレクティブ)については、次回に分けてお話します。