SRCおよびHREF属性
Angularjsでは、SRCはNG-SRCとして記述する必要があり、HREFはNG-HREFとして書かれている必要があります。
コードコピーは次のとおりです。
<img ng-src = "/images/cats/{{faveitecat}}">
<a ng-href = "/shop/category = {{number}}">いくつかのテキスト</a>
表現
単純な数学操作、比較操作、ブール操作、ビット操作、参照配列、およびオブジェクトシンボルをテンプレートで実行できます。式で多くのことを行うことはできますが、JavaScript eval（）関数を使用するのではなく、カスタムインタープリター（Angularの一部）を使用して式が実行されるため、大きな制限があります。
ここでの式は多くの点でJavaScriptよりも厳しいですが、未定義やヌルに対してより良い断層の耐性を持っています。エラーが発生した場合、テンプレートは単に何も表示しないだけで、nullpointerexceptionエラーをスローしません。例えば：
コードコピーは次のとおりです。
<div ng-controller = 'somecontroller'>
<div> {{computer（） /10}} < /div> //合法ですが、ビジネスロジックをテンプレートに入れて、このアプローチを回避する必要があります
</div>
UIとコントローラーの責任を区別します
コントローラーは、特定のDOMフラグメントにバインドされており、管理する必要があります。コントローラーをDOMノードに関連付ける2つの主な方法があります。 1つはテンプレート内のNGコントローラーを介して宣言され、2つ目はルーティングを介して動的にロードされたDOMテンプレートフラグメントに結合することです。このテンプレートはビューと呼ばれます。ネストされたコントローラーを作成し、数値構造を継承することによりデータモデルと関数を共有できます。実際のネストは$スコープオブジェクトで発生します。内部の元の継承メカニズムを介して、親コントローラーオブジェクトの$スコープは、内部ネストされた$スコープ（関数を含むすべてのプロパティ）に渡されます。例えば：
コードコピーは次のとおりです。
<div ng-controller = "parentcontroller">
<div ng-controller = "ChildController"> ... </div>
</div>
$スコープを使用してモデルデータを公開します
$ scope.count = 5など、$ scope属性の作成を表示できます。テンプレート自体を介して間接的にデータモデルを作成することもできます。
パス式。例えば
コードコピーは次のとおりです。
<button ng-click = 'count = 3'> countを3つ</button>に設定します
フォームアイテムでng-modelを使用します
式と同様に、NG-Modelで指定されたモデルパラメーターも外側のコントローラー内で機能します。唯一の違いは、これがフォームアイテムと指定されたモデルの間に双方向結合関係を作成することです。
Watchを使用してデータモデルの変更を監視します
$ watchの関数署名は$ watch（watchfn、watchaction、deepwatch）です
watchfnは、監視されているデータモデルの現在の値を返す角度式または関数を備えた文字列です。時計は、watchfnが変更されたときに呼び出される関数または式です。その関数の署名は次のとおりです。
関数（NewValue、OldValue、Scope）DeepWatch Trueに設定されている場合、このオプションのブールパラメーターはAngularに監視されているオブジェクトの各プロパティが変更されたかどうかを確認するようにコマンドします。単純な値を監視して配列内の要素を監視する場合、または値の代わりにオブジェクト上のすべての属性を監視すると、このパラメーターを使用できます。 Angularは配列またはオブジェクトを通過する必要があることに注意してください。セットが大きい場合、操作はより複雑になります。
$ watch関数は関数を返します。変更通知を受信する必要がない場合は、返された関数を使用してモニターからログアウトできます。
プロパティを監視してから監視からログアウトする必要がある場合は、次のコードを使用できます。vardereg= $ scope。$ watch（ 'somemodel.someproperty'、callbackonchange（））;
... dereg（）;
例コードは次のとおりです。
コードコピーは次のとおりです。
<html ng-app>
<head>
<title>ショッピングカート</title>
<script type = "text/javascript">
function cartcontroller（$ scope）{
$ scope.bill = {};
$ scope.items = [
{タイトル：「ペイントポット」、数量：8、価格：3.95}、
{タイトル：「Polka Dots」、数量：17、価格：12.95}、
{タイトル：「ペブル」、数量：5、価格：6.95}
];
$ scope.totalcart = function（）{
var total = 0;
for（var i = 0、len = $ scope.items.length; i <len; i ++）{
合計=合計 + $ scope.items [i] .price * $ scope.items [i] .quantity;
}
合計を返します。
}
$ scope.subtotal = function（）{
$ scope.totalcart（） - $ scope.bill.discount;
}
function calculatediscount（newValue、oldValue、scope）{
$ scope.bill.discount = newValue> 100？ 10：0;
} //ここの時計機能
$ scope。$ watch（$ scope.totalcart、calculatediscount）; //時計機能はこちら
}
</script>
</head>
<body>
<div ng-controller = "cartcontroller">
<div ng-repeat = 'アイテムのアイテム'>
<span> {{item.title}} </span>
<入力ng-model = 'item.quantity'>
<span> {{item.price |通貨}} </span>
<span> {{item.price * item.quantity |通貨}} </span>
</div>
<div>合計：{{totalcart（）|通貨}} </div>
<div>割引：{{bill.discount |通貨}} </div>
<div> subtotal：{{subtotal（）|通貨}} </div>
</div>
<script type = "text/javascript" src = "angular.min.js"> </scrip>
</body>
</html>
上記の時計にはパフォーマンスの問題があります。計算されたテーテル関数は6回実行されましたが、そのうち3つはループが壊れたためです。ループがループされるたびに、データは再レンダリングされました。
以下は変更されたコードです
コードコピーは次のとおりです。
<html ng-app>
<head>
<title>ショッピングカート</title>
<script type = "text/javascript">
function cartcontroller（$ scope）{
$ scope.bill = {};
$ scope.items = [
{タイトル：「ペイントポット」、数量：8、価格：3.95}、
{タイトル：「Polka Dots」、数量：17、価格：12.95}、
{タイトル：「ペブル」、数量：5、価格：6.95}
];
var totalcart = function（）{
var total = 0;
for（var i = 0、len = $ scope.items.length; i <len; i ++）{
合計=合計 + $ scope.items [i] .price * $ scope.items [i] .quantity;
}
$ scope.bill.totalcart =合計;
$ scope.bill.discount =合計> 100？ 10：0;
$ scope.bill.subtotal =合計 -$ scope.bill.discount;
}
$ scope。$ watch（ 'items'、totalcart、true）; //時計のみを使用してアイテムを変更します
}
</script>
</head>
<body>
<div ng-controller = "cartcontroller">
<div ng-repeat = 'アイテムのアイテム'>
<span> {{item.title}} </span>
<入力ng-model = 'item.quantity'>
<span> {{item.price |通貨}} </span>
<span> {{item.price * item.quantity |通貨}} </span>
</div>
<div>合計：{{bill.totalcart |通貨}} </div>
<div>割引：{{bill.discount |通貨}} </div>
<div> subtotal：{{bill.subtotal |通貨}} </div>
</div>
<script type = "text/javascript" src = "angular.min.js"> </scrip>
</body>
</html>
大きなITMSアレイの場合、ページがAngularで表示されるたびに請求属性のみが再計算される場合、パフォーマンスははるかに優れています。 watchfnを使用して$ watch関数を作成することでこれを実現できます。
コードコピーは次のとおりです。
$ scope。$ watch（
var totalcart = function（）{
var total = 0;
for（var i = 0、len = $ scope.items.length; i <len; i ++）{
合計=合計 + $ scope.items [i] .price * $ scope.items [i] .quantity;
}
$ scope.bill.totalcart =合計;
$ scope.bill.discount =合計> 100？ 10：0;
$ scope.bill.subtotal =合計 -$ scope.bill.discount;
}）;
複数のものを監視します
複数のプロパティまたはオブジェクトを監視し、それらのいずれかが変更されたときに関数を実行する場合、2つの基本的なオプションがあります。
これらのプロパティを接続した後、値を監視します
それらを配列またはオブジェクトに入れて、DeepWatchパラメーターに値を渡します
別々に説明する：
最初のケースでは、スコープにオブジェクトが2つある場合、2つのプロパティAとBがあり、両方のプロパティが変更されると、CallMe（）関数を実行する必要があります。同時に$ scope。
リストが非常に長い場合、接続後に値を返す関数を記述する必要があります。
2番目のケースでは、オブジェクトのすべてのプロパティを監視する必要があります。これを行うことができます。
コードコピーは次のとおりです。
$ scope。$ watch（ 'things'、callme（...）、true）;
モジュールを使用して依存関係を整理します
プロバイダー（名前、オブジェクト、またはコンストラクター（））説明：構成可能なサービスを作成するロジックの作成は比較的複雑です。オブジェクトをパラメーターとして渡す場合、オブジェクトオブジェクトには$ getという名前の関数が必要です。これはサービス名を返す必要があります。それ以外の場合、Angularjsは、コンストラクターを渡すと、コンストラクターを呼び出すとService Instanceオブジェクトを返すと考えるでしょう。
Factory（name、$ get function（））説明：構成不可能なサービス、作成ロジックは比較的複雑です。関数を指定する必要があり、この関数が呼び出されると、サービスインスタンスが返されます。プロバイダーの形式（name、{$ get：$ getFunction（）}）と見なすことができます。
Service（name、constructor（））は、構成不可能なサービスであり、ロジックの作成は比較的簡単です。上記のプロバイダー関数のコンストラクターパラメーターと同様に、Angularはそれを呼び出してサービスインスタンスを作成します。
モジュール工場の使用例
コードコピーは次のとおりです。
<html ng-app = 'ShoppingModule'>
<head>
<title>ショッピングカート</title>
<script type = "text/javascript" src = "angular.min.js"> </scrip>
<script type = "text/javascript">
var ShoppingModule = Angular.Module（ 'ShopphingModule'、[]）;
shopthymodule.factory（ 'items'、function（）{
var items = {};
items.query = function（）{
戻る [
{タイトル：「ペイントポット」、説明：「塗料でいっぱいのポット」、価格：3.95}、
{タイトル：「ペイントポット」、説明：「塗料でいっぱいのポット」、価格：3.95}、
{タイトル：「ペイントポット」、説明：「塗料でいっぱいのポット」、価格：3.95}
];
};
返品アイテム。
}）;
function ShoppingController（$ scope、items）{
$ scope.items = items.query（）;
}
</script>
</head>
<body ng-controller = 'ShoppingController'>
<h1> shop !! </h1>
<表>
<tr ng-repeat = 'アイテムのアイテム'>
<td> {{item.title}} </td>
<td> {{item.description}} </td>
<td> {{item.price |通貨}} </td>
</tr>
</table>
</body>
</html>
サードパーティモジュールの導入
ほとんどのアプリケーションでは、すべてのコードに単一のモジュールを作成し、すべての依存関係をこのモジュールに入れます。これはうまく機能します。ただし、サードパーティパッケージが提供するサービスまたは指示を使用する場合は、通常、独自のモジュールが付属しており、アプリケーションモジュールで依存関係ケアを定義して参照する必要があります。例えば：
var appmod = angular.module（ 'app'、['nazzy'、 'super']）;
フィルターに関する例
コードコピーは次のとおりです。
<html ng-app = 'ShoppingModule'>
<head>
<title>ショッピングカート</title>
<script type = "text/javascript" src = "angular.min.js"> </scrip>
<script type = "text/javascript">
var ShoppingModule = Angular.Module（ 'ShopphingModule'、[]）;
ShoppingModule.Filter（ 'titlecase'、function（）{
var titlecasefilter = function（input）{
var words = input.split（ ''）;
for（var i = 0; i <words.length; i ++）{
words [i] = words [0] .charat（0）.touppercase（） + words [i] .slice（1）;
}
return words.join（ ''）;
};
TitleCaseFilterを返します。
}）;
function ShoppingController（$ scope）{
$ scope.pageheading = 'これはテストケースです';
}
</script>
</head>
<body ng-controller = 'ShoppingController'>
<h1> {{pageheading | titlecase}} </h1>
</body>
</html>