1. フロントエンドフレームAngularJS エントリ
1.1 AngularJS はじめに
AngularJSは で生まれた2009年で、Misko Hevery などした後、作成され、他のGoogleが買収しました。それは優秀なフロントエンドであるJSの中で使用されているフレームワークGoogleの製品の多様です。AngularJSは、多くの機能を持っている、最も中心的である：MVC 、結合モジュール式の、自動化された双方向のデータ、依存性注入、およびように。
1.2 AngularJS 4つの特徴
1.2.1 MVCのパターン
角度フォローソフトウェアエンジニアリングのMVC パターン、および、データとロジックコンポーネント間の疎結合をショーを奨励する。依存性の注入（依存性注入）、角度のクライアントのためのWeb ような独立の観点として、従来のサーバー側のサービスを、持参への応用コントロール。したがって、軽量で、その結果、バックエンド負荷の数を減らすのWeb アプリケーション。
モデル：データは、実際には、角度変数（$ scope.XX）。
表示： データの表示やHTML +指令（指令）。
コントローラ：運用データ、、ある機能、削除変更、検索データ、
1.2.2 結合双方向
AngularJSは、ビジネスロジックを表現するのに適している宣言型プログラミングは、ユーザインタフェースと書き込みソフトウェアのビルドに、と命令型プログラミングを構築するために使用されるべきであること：信念に基づいています。伝統的なフレームと延びているHTMLを、結合双方向データを介して動的コンテンツに適合するように、双方向のデータは、結合モデルとビュー間の自動同期化を可能にします。したがって、AngularJS ようにDOM 操作が重要と改善テスト容易ではありません。
1.2.3 依存性注入
依存性注入（依存性注入は、と称するDI）デザインパターンは、フレームワークによって自動的に依存オブジェクトを作成するときに手動で依存関係を作成することなく、オブジェクトの他のオブジェクトを参照して、単にこのオブジェクトを「音声は、叫びました」作成し、入って来注入し、実際に法律の少なくとも知識を、モジュールのすべてのサービスとプロバイダオブジェクトのタイプは、パラメータ名に応じて達成することができDI。
1.2.4 モジュラーデザイン
カップリング高粘着性のルール
1）公式モジュールは ngの、ngRoute 、ngAnimate
2）モジュール、ユーザ定義 angular.module（ ' モジュール名'、[]）
1.3 小型の取得デモ
1.3.1 式
| <HTML> <ヘッド> <タイトル> の取得の小さなデモ-1 </ TITLE> </スクリプト> <スクリプトSRCは= "angular.min.js"> </ head>の <BODYアプリ> {{100 + 100}} </ BODY> </ HTML> |
次のように実行結果は以下のとおりです。
式が書かれている {{ 式}} 式は、変数または式であることができます
NG-アプリディレクティブ 役割はによって所有された命令のどのような要素子伝えることです angularJs のangularJsを、識別され
NG-アプリ ディレクティブを定義AngularJS アプリケーションのルート要素。
NG-アプリの アプリケーション・ページがロードされるときに命令が自動的に（自動的に初期化）導きます。
1.3.2 結合双方向
| <HTML> <ヘッド> <タイトル> 小さな取得Demo- 2ウェイ結合</タイトル> </スクリプト> <スクリプトSRCは= "angular.min.js"> </ head>の <BODYアプリ> あなたの名前を入力してください：<モデル-ngのINPUT = "MYNAME"> <BR> {{}} MYNAME、ハロー </ BODY> </ HTML> |
次のように動作した結果は以下のとおりです。
注：入力した後、中国は、ディスプレイに入力します
モデルngの結合のためのコマンド変数、ユーザ入力が変数にバインドされるように、テキストボックスの内容を、変数は、リアルタイム式で出力してもよいです。
1.3.3 初期化コマンド
我々はいくつかの変数は初期値を持っているしたい場合は、使用することができ NG-INIT 変数を初期化するコマンドを
| <HTML> <ヘッド> <タイトル> の取得の小さなデモ-3 の初期化</ TITLE> </スクリプト> <スクリプトSRCは= "angular.min.js"> </ head>の <ボディNG-アプリNG-INIT = "MYNAME = ' 素晴らしい仕事'" > あなたの名前を入力してください：<モデル-ngのINPUT = "MYNAME"> <BR> {{}} MYNAME、ハロー </ BODY> </ HTML> |
結果：
1.3.4 コントローラ
| <HTML> <ヘッド> <タイトル> の取得の小さなデモ-4 の初期化</ TITLE> </スクリプト> <スクリプトSRCは= "angular.min.js"> <スクリプト> var app=angular.module('myApp',[]); //定义了一个叫myApp的模块 //定义控制器 app.controller('myController',function($scope){ $scope.add=function(){ return parseInt($scope.x)+parseInt($scope.y); } }); </script> </head> <body ng-app="myApp" ng-controller="myController"> x:<input ng-model="x" > y:<input ng-model="y" > 运算结果：{{add()}} </body> </html> |
运行结果如下：
ng-controller用于指定所使用的控制器。
理解 $scope：
$scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的$scope 发生改变时也会立刻重新渲染视图.
1.3.5 事件指令
| <html> <head> <title>入门小Demo-5 事件指令</title> <script src="angular.min.js"></script> <script> var app=angular.module('myApp',[]); //定义了一个叫myApp的模块 //定义控制器 app.controller('myController',function($scope){ $scope.add=function(){ $scope.z= parseInt($scope.x)+parseInt($scope.y); } }); </script> </head> <body ng-app="myApp" ng-controller="myController"> x:<input ng-model="x" > y:<input ng-model="y" > <button ng-click="add()">运算</button> 结果：{{z}} </body> </html> |
运行结果：
ng-click 是最常用的单击事件指令，再点击时触发控制器的某个方法
1.3.6 循环数组
| <html> <head> <title>入门小Demo-6 循环数据</title> <script src="angular.min.js"></script> <script> var app=angular.module('myApp',[]); //定义了一个叫myApp的模块 //定义控制器 app.controller('myController',function($scope){ $scope.list= [100,192,203,434 ];//定义数组,注意元素不能重复 }); </script> </head> <body ng-app="myApp" ng-controller="myController"> <table> <tr ng-repeat="x in list"> <td>{{x}}</td> </tr> </table> </body> </html> |
这里的ng-repeat指令用于循环数组变量。
运行结果如下：
1.3.7 循环对象数组
| <html> <head> <title>入门小Demo-7 循环对象数组</title> <script src="angular.min.js"></script> <script> var app=angular.module('myApp',[]); //定义了一个叫myApp的模块 //定义控制器 app.controller('myController',function($scope){ $scope.list= [ {name:'张三',shuxue:100,yuwen:93}, {name:'李四',shuxue:88,yuwen:87}, {name:'王五',shuxue:77,yuwen:56} ];//定义数组 }); </script> </head> <body ng-app="myApp" ng-controller="myController"> <table> <tr> <td>姓名</td> <td>数学</td> <td>语文</td> </tr> <tr ng-repeat="entity in list"> <td>{{entity.name}}</td> <td>{{entity.shuxue}}</td> <td>{{entity.yuwen}}</td> </tr> </table> </body> </html> |
运行结果如下：
1.3.8 内置服务
我们的数据一般都是从后端获取的，那么如何获取数据呢？我们一般使用内置服务$http来实现。注意：以下代码需要在tomcat中运行。
| <html> <head> <title>入门小Demo-8 内置服务</title> <meta charset="utf-8" /> <script src="angular.min.js"></script> <script> var app=angular.module('myApp',[]); //定义了一个叫myApp的模块 //定义控制器 app.controller('myController',function($scope,$http){ $scope.findAll=function(){ $http.get('data.json').success( function(response){ $scope.list=response; } ); } }); </script> </head> <body ng-app="myApp" ng-controller="myController" ng-init="findAll()"> <table> <tr> <td>姓名</td> <td>数学</td> <td>语文</td> </tr> <tr ng-repeat="entity in list"> <td>{{entity.name}}</td> <td>{{entity.shuxue}}</td> <td>{{entity.yuwen}}</td> </tr> </table> </body> </html> |
建立文件 data.json
| [ {"name":"张三","shuxue":100,"yuwen":93}, {"name":"李四","shuxue":88,"yuwen":87}, {"name":"王五","shuxue":77,"yuwen":56}, {"name":"赵六","shuxue":67,"yuwen":86} ] |
注意：不能直接浏览器打开运行，需要把html和js、json文件发布到一个web服务器才能正常运行。
运行结果：
