AngularJSフレームワークは、基本的にフロントエンドプロジェクトで使用されます。私はこのフレームワークについて以前は知りませんでしたし、それは最近引き継いだからだったので、それをよく学ぶつもりでした。私は以前はPC側でしたが、今ではモバイルプロジェクトを引き継ぎました。モバイルUIフレームワークはIonic + Vordovaを使用しますが、ブートストラップは使用しません。主にiOS + Androidアプリインターフェイスを使用しています。私はイオンのフレームワークについてあまり知りません。それに精通するために時間を費やす必要があります。 Angularjs学習初心者は私を修正することを歓迎します。
Angularjsとは何ですか？
簡単に言えば、それはスクリプトタグを介してWebページに追加されるJavaScriptのフレームワークです。つまり、AngularJSを使用する場合、次のコードを導入する必要があります。
<Script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script>
通常、スクリプトを<body>要素の下部に配置することをお勧めします。これは、Webページの読み込み速度を改善するためです。 HTMLロードはスクリプトの読み込みの対象ではないためです。
Angularjsとは何ですか？
AngularJSを使用すると、最新のシングルページアプリケーション（SPA：シングルページアプリケーション）を簡単に開発できます。
•AngularJSは、アプリケーションデータをHTML要素にバインドします。
•AngularJSは、HTML要素をクローンして繰り返すことができます。
•AngularJSは、HTML要素を非表示および表示できます。
•AngularJSは、HTML要素の「背後」のコードを追加できます。
•AngularJSは入力検証をサポートします。
たとえば、モバイル端子は基本的に単一ページの比較を使用します。これは、角度ルーティング変換を使用して行われます。現在のプロジェクトと同様に、単一のページも使用しています。つまり、メインページでは、ジャンプしたページはすべてメインページで実行されます。スクリーンショットは次のとおりです。
AngularJS式
AngularJS式は、二重ブレースで書かれています：{{expression}}。
AngularJS式は、データをHTMLにバインドします。これは、NG-Bindディレクティブに似ています。
AngularJSは、式が記述されている場所でデータを「出力」します。
AngularJS式は、JavaScriptの式によく似ています。リテラル、演算子、および変数を含めることができます。
<！doctype html> <！ - タグangularjs htmlページ全体を処理してアプリケーションを起動し、> <html ng-app> <head> <meta charset = "utf-8"> <スクリプトsrc = "http://code.angularjs.org/angular-1.0.1.min.js"> </script> </head> <body> <p> name：{{"ting"+"feng"}} </p> <p>番号：{{5+5}}} </p> <div ng-init = "person = {name： 'tingfeng'、age：'13 '}"> <p> name：{{person.name}} age：{{person.age}} </p> </div> </body> </html>HTMLでのAngularJSの適用
主にNG指向性を介してHTMLを拡張します。 AngularJSディレクティブは、NGが付けられたHTML属性であり、MVC、モジュラー、命令システム（ディレクティブ）、およびデータバインディングの4つの主要な機能が含まれています。
ng-init：この指令は、AngularJSアプリケーション変数を初期化します。たとえば、次の列：
<！doctype html> <！ - htmlページ全体を処理してアプリケーションをガイドするためのタグangularjs-> <html ng-app> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1. ng-init = "name = 'tingfeng'"> <p> name is：<span ng-bind = "name"> </span> </p> </div> </body> </html>
NG-APP：この指令は、AngularJSアプリケーションが定義されていることを示しています。通常、HTMLの後ろに配置され、NG-Appディレクティブをローカルで使用することもできます。たとえば、<div ng-app>、AngularJSスクリプトはDIVでのみ実行されます。つまり、ここからは、すべてのコンテンツが管理のためのAngularJSです。
NG-Model：この指令は、アプリケーションへのバインディング要素値（入力ボックスの値など）を指します。
NG-Bind：この指令は、アプリケーションデータをHTMLビューにバインドします。対応する指示を使用して、AngularJSを使用してHTMLページを操作します。使用方法については、コードを見てみましょう。
現時点では、ng-modelを使用して、SetNameモデル変数にバインドします。入力ボックスに値を入力すると、対応するSetNameも変更されます。自分でテストできます。
$スコープに関する説明
$スコープとは何ですか？その機能は何ですか？それを使用する方法は？
簡単に言えば、スコープはオブジェクトと同様のPOJO（PlainOldJavaScriptObject）であり、プロパティとメソッドを備えたスコープは、プロパティとメソッドを備えたオブジェクトと同様のPojo（PlainOldJavaScriptObject）であり、Scopeはwatch（）、watch（）、およびapply（）ツールメソッドを提供します。 AngularJSのMVCはすべて、$スコープの助けを借りて行われます。
機能：1。それは式の実行環境（または範囲）です
2。スコープは、domタグに平行なスコープを含むツリー構造であり、ドムタグに平行なツリー構造であり、その上にルーツスコープがトップレベルにあります。
3.スコープは、親のルーツスコープのプロパティと方法を継承します。
4. $スコープは、上下に伝播できるDOMと同様に、イベントを伝播できます。
5. $スコープは、MVCの基礎であるだけでなく、後で双方向のバインディングを実装するための基礎でもあります。
Angularjsのコンポーネント
テンプレート：つまり、HTMLおよびCSSファイルを書いて、アプリケーションのビューを示しています。 AngularJSは、HTMLで独自のHTMLタグを作成できます！
コントローラー：AJAXとは異なり、角度に既に組み込まれているため、リスナーまたはDOMコントローラーを作成する必要はありません。利点：書き込み、テスト、維持、理解が簡単です。
モデルデータ：モデルは、ドメインオブジェクトの属性としてAngularJSから拡張されています。モデルのデータは、JSオブジェクト、アレイ、またはプリミティブタイプである場合がありますが、すべてAngularJSスコープオブジェクトに属します。
Angularjsの範囲を理解する方法は？
つまり、スコープはテンプレート、モデルとコントローラーと連携するボンドと見なすことができます。 AngularJSはスコープを使用し、テンプレートには情報、データモデル、コントローラーもあります。これらはモデルとビューを分離するのに役立ちますが、どちらも同期されています！モデルの変更はすぐにビューに反映され、ビューの変更はすぐにモデルに反映されます。
ビュー：AngularJSでは、モデルがHTMLテンプレートを介してレンダリングされた後のマッピングです。つまり、モデルがいつ変更されても、AngularJSはジャンクションポイントをリアルタイムで更新し、ビューを更新します。
コードを投稿する方が直感的です！
<！doctype html> <html ng-app = "helloangular"> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script> //モジュラーmymodule = module " Controlテンプレートhellogularmymodule.controller（ "hellogular"、['$ scope'、function hellogular（$ scope）{$ scope.value = {name： 'jiangting'};}]）; </script> </head> <body> <！ - mvc-view angular-> <div ng-controller = "hellogular">コントローラーのアプリケーション、つまりコントローラー、つまりコントローラーがデータを操作し、バインドしてHTMLページに表示していることを見てみましょう。
AngularJSモジュール（モジュール）は、AngularJSアプリケーションを定義します。
AngularJSコントローラー（コントローラー）は、AngularJSアプリケーションを制御するために使用されます。
NG-APPディレクティブはアプリケーションを定義し、NG-Controllerはコントローラーを定義します。上記の列を使用して表示しましょう。
AngularJSモジュールはアプリケーションを定義します。
var mymodule = angular.module（ "hellogular"、[]）; －コントロールテンプレートhellogular
AngularJSコントローラー制御アプリケーション：
mymodule.controller（ "hellogular"、['$ scope'、function hellogular（$ scope）{$ scope.value = {name： 'jiangting'};}]）;フロントエンドMVCを理解します
コントローラー機能について：
1.コントローラーを服用しようとしないでください。コントローラーは通常、小さなビューのみを担当します。
2。コントローラーでDOMを直接操作しないでください、それはその責任ではありません
3.コントローラーでデータフィルタリング操作を行わないでください、フィルターサービスがあります
4.コントローラーにデータをフォーマットしないでください、NGには非常に便利なフォームコントロールがあります
5.コントローラーは互いに呼び出されません。コントローラー間の相互作用は、イベントを通じて実行されます。フィルターサービスを通じて行われます。 4.コントローラーにデータをフォーマットしないでください。非常に有用なフォームコントロールがあります。 5.コントローラーは互いに呼び出されません。コントローラー間の相互作用は、イベントを通じて実行されます。スコープを通じて実行されます。
コマンドシステムをカスタマイズする方法を見てみましょう。コードは次のとおりです。
<！doctype html> <html ng-app> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script> <script> // mymodule = ang module " []）; mymodule.directive（ "hello"、function（）{return {restrict： 'e'、empplate： '<div> hioneone！</div>'、 - htmlタグの置き換え：true}}）; </script> </head> <body> </hell指令には、その後3つのパラメーターが返されます。テンプレート中央は挿入されたHTMLタグを指します。次に、自分でHTMLコードの一部を書き、それをAngularjsに書き込む方法を確認します。
元の静的HTMLコードは次のとおりです。
<ul> <li> <span> new1 </span> <p>ただのテストページ1 </p> </li> <li> <li> <span> new2 </span> <p>テストページ2 </p> </li> </ul>
AngularJSに変更する方法は次のとおりです。
<！doctype html> <html ng-app> <head> <meta charset = "utf-8"> <script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </script> <スクリプト> // $範囲はコントローラーの範囲です。 // angularjsスコープ：テンプレートと見なすことができます。アプリケーションが開始されると、ルートスコープが作成され、コントローラーの範囲はルートスコープの典型的な後継者です。 function newsctrl（$ scope）{$ scope.news = [{"content"： "new1"、 "introduce"： "Just test page1"}、{"content"： "new2"、 "introws"： "Just test page2"}]; $ scope.phones = {length： "4" // Commas};} </script> </head> <body ng-controller = "newsctrl"> <ul> <li ng-repeat = "new in news"> {{new.content}} <p> {{new.introduce}}} </p> </li>上記は、編集者（i）によって紹介されたAngularjsの基本的な特徴の分析です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！