angularJs 学習ノート-はじめに_html/css_WEB-ITnose-htmlチュートリアル-php.cn

angularJs 学習ノート-はじめに_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:26:00

オリジナル

987 人が閲覧しました

1. angularJs の紹介

AngularJs は MV* JavaScript フレームワーク (MVVM であろうと MVC であろうと、すべて MDV (モデルドライブビュー) の下にあります)、実際には SPA (単一) です。 ) Google -page-application) アプリケーションフレームワークによって起動されます。バックエンドとフロントエンド間のデータの双方向バインディングに使用されます。これは、バックグラウンドでデータを変更すると、その変更がすぐにビューに表示されることを意味します。

ロード時に、angular は dom ツリーと JavaScript を angular アプリにリダイレクトします。 Angular ディレクティブとフィルターを含む HTML はツリー図にコンパイルされ、応答スコープとコントローラーがこのツリーにアタッチされ、内部アプリケーションループによってビューとモデル間のデータバインディングが保証されます。モデルが更新されるたびに (Ajax リクエスト経由、またはコントローラーの直接操作によって)、Angular は $digest ループを再実行し、新しいデータとバインドして、すべてが同期していることを確認します。

jsコードはコマンドを使ってdomを操作します。 Angular では、DOM を直接操作することは推奨されません。 DOM はビューによって管理され、データはスコープ内にあり、メソッドはコントローラー内にあります。

3. ng-app

(1) コードプレビュー、angular ファイルの導入

(2) ブラウザでの効果

(3) ソースコード

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title></title>    <script src="../build/angular.min.js" charset="utf-8"></script>  </head>  <body>      <div class="" ng-app>        hello{{'world'}}      </div>  </body></html>

ログイン後にコピー

4. ng-model

(1) コードプレビュー

(2) ブラウザでの効果

(3) ソースコード

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title></title>    <script src="../build/angular.min.js" charset="utf-8"></script>  </head>  <body>    <div class="" ng-app>      your name :      <input type="text" name="name" value="" ng-model="yourname" placeholder="angular">      <hr>      hello {{yourname || 'angular'}}    </div>  </body></html>

ログイン後にコピー

5.ng-controller

(1)コードプレビュー

(2) ブラウザエフェクト

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>hello cynthia</title>    <script src="../build/angular.min.js" charset="utf-8"></script>  </head>    <script type="text/javascript">    var app = angular.module('app',[]);    app.controller('helloCynthia',function($scope){      $scope.eleName = "cynthia"    })  </script>    <body>    <div class="" ng-app='app' ng-controller='helloCynthia'>      hello,{{eleName}}    </div>  </body></html>

ログイン後にコピー

6 。 ng-repeat

(1) コードプレビュー

( 2) ブラウザ効果

(3) ソースコード

rree

7.example

(1) コードプレビュー

(2) ブラウザ効果（ユーザーAfter）入力してボタンをクリックすると下に入力が表示されますが、現在は未定義と表示されています (3) ソースコード

8.filters

Angular が提供するフィルターは、 Unix のパイプライン。例えば、Webページ上に価格$を表示したい場合、次のように書くことができます

(1) ソースコードのプレビュー

(2) ブラウザでの効果

(3) ソースコード

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title></title>    <script src="../build/angular.min.js" charset="utf-8"></script>  </head>  <script type="text/javascript">    var app = angular.module('ngrepeat',[])    app.controller('ngrepeatCtr',function($scope){      $scope.developers=[        {name:'wuqian',country:'china'},        {name:'cynthia',country:'usa'},        {name:'wupore',country:'canada'},        {name:'selene',country:'english'}      ]    })  </script>  <body>    <div class="" ng-app='ngrepeat' ng-controller='ngrepeatCtr'>      <ul>        <li ng-repeat='person in developers'>          {{person.name}} from {{person.country}}        </li>      </ul>    </div>  </body></html>

ログイン後にコピー

9. フィルタを使用して選択範囲を削除します

(1) コードプレビュー

(2) ブラウザ効果

(3) ソースコード

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title></title>    <script src="../build/angular.min.js" charset="utf-8"></script>  </head>  <script type="text/javascript">    var app = angular.module('appName',[]);    app.controller('controllerName',function($scope){      $scope.clickName = function(){        $scope.message = 'Name : ' + $scope.userInput;      }    })  </script>  <body>    <div class="" ng-app='appName' ng-controller='controllerName'>      <p>        what's your name ?      </p>      <br>      <input type="text" name="name" placeholer="input your name here" ng-model＝‘userInput’>      <button type="button" name="button" ng-click='clickName()'>click here</button>      <h3>{{message}}</h3>    </div>  </body></html>

ログイン後にコピー

10. カスタムフィルター

( 1) コードプレビュー

(2) ブラウザエフェクト(最初の文字が大文字になります)

(3) ソースコード

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title></title>    <script src="../build/angular.min.js" charset="utf-8"></script>  </head>  <body>      <div class="" ng-app>        <span>iphone : {{63573 | currency}}</span>      </div>  </body></html>

ログイン後にコピー

11 .services

コントローラー間でデータを共有するこれは非常に便利ですが、各コントローラーには独自のスコープがあるため、他のコントローラーにバインドすることはできません。これに対して Angular が提供するソリューションはサービスです。

Angular には、http リクエストや非同期 Promise プログラミングモードなど、多くの組み込みサービスがあります。これは angular (依存性注入) の核心への鍵でもあります。

サービスはすべてシングルトンです。つまり、アプリケーション内で各サービスオブジェクトは 1 回だけインスタンス化されます。これは主に、特定の機能に必要なメソッドをまとめたインターフェイスを提供する役割を果たします。最も一般的な方法は、angular.module API のファクトリメソッドです:

例: サービスを介して oneCtrl と twoCtrl の間でデータユーザーを共有する

(1) ソースコードプレビュー

(2) ブラウザでの効果

(3) ソースコード

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title></title>    <script src="../build/angular.min.js" charset="utf-8"></script>  </head>  <script type="text/javascript">    var app = angular.module('ngrepeat',[])    app.controller('ngrepeatCtr',function($scope){      $scope.developers=[        {name:'wuqian',country:'china'},        {name:'cynthia',country:'usa'},        {name:'wupore',country:'canada'},        {name:'selene',country:'english'}      ]    })  </script>  <body>    <div class="" ng-app='ngrepeat' ng-controller='ngrepeatCtr'>      <input type="text" name="name" value="" ng-model='search'>      <ul>        <li ng-repeat='person in developers | filter:search'>          {{person.name}} from {{person.country}}        </li>      </ul>    </div>  </body></html>

ログイン後にコピー

12.ng-show and ng-hide

(1) ソースコードのプレビュー

(2) ブラウザでの効果:ボタン内容の表示/非表示

(3) ソースコード

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>hello cynthia</title>    <script src="../build/angular.min.js" charset="utf-8"></script>  </head>  <script type="text/javascript">    var app = angular.module('app',[]);    // 自定义filter    app.filter('capt',function(){      return function(input,param){        return input.substring(0,1).toUpperCase()+input.substring(1);      }    })  </script>  <body>    <div class="" ng-app='app'>      <span>{{'this is some text' | capt}}</span>    </div>  </body></html>

ログイン後にコピー

13.