angularjsの使い方は？ angularjs フレームワークの例の詳細な分析 (完全な例付き)-jsチュートリアル-php.cn

この記事では、angularjs のフレームワークの知識ポイントの概要を、完全な例と完全なタグの詳細な説明とともに紹介します。次に、この記事を一緒に読みましょう

1. AngularJSとは？

Googleによって開発された、MVC構造を備えたフロントエンドフレームワークです。 Angular アプリケーションでは、ビューレイヤーは DOM で、コントローラーは JavaScript クラスで、モデルデータはオブジェクトのプロパティに保存されます。

2. データバインディング

は、インターフェースの特定の部分が JavaScript のプロパティにマップされることを宣言し、これらのプログラミング方法がデータバインディングであることを可能にします。フィールドのリスナーを登録する必要はなく、オブジェクトのプロパティとインターフェイスの表示を同期して変更できます。

3. 依存性の注入

オブジェクトを再作成する必要はありません。次のように、必要なオブジェクト $scope または $loaction をコンストラクターに注入します。これが依存性注入です。

function HelloController($scope, $location) {
$scope.greeting = { text: &#39;Hello&#39; };
// use $location for something good here...
}

ログイン後にコピー

4. ディレクティブ

フレームワークのコア層には、HTML 構文を拡張できる強力な DOM 変換エンジンがあります。 HTML の ng-controller は、どのビューにどのコントローラーを提供するかを指定するために使用され、ng-model は入力ボックスをモデル部分にバインドします。これらを HTML 拡張ディレクティブと呼びます。 5. ng-app

属性は、ページのどの部分を管理する必要があるかを

Angular

に伝えます。

html

要素に置くので、

Angular
にページ全体を管理するように指示します。他の方法を使用してページを管理する既存のアプリケーションと

Angular を統合する場合は、それをアプリケーションの p

に配置する必要がある場合があります。 2) Angular では、JavaScriptクラスで管理されるページ領域をコントローラーと呼びます。 body タグ内にコントローラーを含めることで、宣言された CartController

は body タグの間にあるものをすべて管理します。

ng-repeat は items を表し、配列内の各要素はこの p の DOM に 1 回コピーされます。 p の各コピーでは、item という属性も現在の要素を表すように設定されているため、テンプレートで使用できます。ご覧のとおり、各 p には、商品名、数量、単価、合計金額、削除ボタンが含まれています。

4) {{item.title}}

'Hello World'の例で示されているように、データバインディングは {{ }}変数の値をページの特定の部分に挿入し、同期を保ちます。完全な式 {{item.title}} は、反復で現在の項目を取得し、現在の項目の titile 属性値を DOM に挿入します。

ng-model Definition は、入力フィールドと item.quantity の間にデータバインディングを作成します。スパンタグ{{ }}一方向の接続を確立します。ここに値を挿入します。ただし、アプリケーションは、ユーザーが数量を変更すると、合計価格が変更される可能性があることを認識する必要があります。これが私たちが望んでいることです。 ng-model を使用することで、変更をモデルと同期させます。 ng-modelは、item.quantityの値が入力ボックスに挿入され、ユーザーが新しい値を入力するたびにitem.quantityを自動的に更新することを示します。

6) {{item.price |通貨}}

単価を米ドルでフォーマットしたいと考えています。 Angular には、テキストを変換できるフィルターと呼ばれる機能が付属しています。このドル形式の書式設定を行う currency と呼ばれるフィルターがあります。

このボタンをクリックして、 Remove() 関数を呼び出します。 $index も渡されます。これには、どの項目を削除するかを知るための ng-repeat の反復順序が含まれています。

8)function CartController($scope) {

CartController このショッピングカートのロジックを管理します。これを通じて、Angularコントローラー

に、$scopeというオブジェクトが必要であることを伝えます。 $scope は、インターフェイス上の要素にデータをバインドするために使用されます。

9）$scope.remove = function(index) {

$scope.items.splice(index, 1);

};

我们希望 remove()函数能够绑定到界面上，因此我们也把它增加到$scope中。对于这

个内存中的购物车版本，remove()函数只是从数组中删除了它们。因为通过ng-repeat创建

的这些

是数据捆绑的，当某项消失时，列表自动收缩。记住，无论何时用户点击移除

按钮中的一个，都将从界面上调用 remove()函数。（想看更多就到PHP中文网AngularJS开发手册中学习）

6. 调用 Angular

任何应用使用 Angular 必须做两件事：

1）加载 angular.js

2）使用 ng-app告知Angular管理哪一部分的DOM

7. 加载脚本

很简单：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>

ログイン後にコピー

推荐使用 Google 的CDN。Google的服务器是非常快的，脚本是跨应用缓存的。那就是说，如果你的用户有多个使用Angular的应用，它只下载一次。同样，如果用户访问过使用Google Angular的CDN链接，那么当他访问你的站点时没有必要再次下载。

8. 模块

<html ng-app=&#39;myApp&#39;>
<body ng-controller=&#39;TextController&#39;>
<p>{{someText.message}}</p>
<script  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script>
var myAppModule = angular.module(&#39;myApp&#39;, []);
myAppModule.controller(&#39;TextController&#39;,
function($scope) {
var someText = {};
someText.message = &#39;You have started your journey.&#39;;
$scope.someText = someText;
});
</script>
</body>
</html>

ログイン後にコピー

在这个模板中，我们告知 ng-app 元素我们的模块名，myApp。然后我们调用了Angular对象创建一个名为myApp的模块，传递了控制器函数给模块的控制器函数。

只要记住，远离全局命名空间是一件好事。模块化这是我们通用的机制。

9. 模板和数据绑定

Angular 应用中的模板只是那些我们从服务器加载的 HTML文档或者是定义在

人気のチュートリアル

詳細>