この記事では、angularjsの構文の紹介を中心に、angularjsのスコープの説明、angularjsのコントローラーとサービスの説明をしています
馴染みのないangularjsの構文を記録します
。
AngularJS スコープ(スコープ)
$rootScope
$rootScope : 根作用域,所有 controller 都可以调用，类似于项目级别的全局变量
js赋值 : $rootScope.lastname = "Refsnes";
html调用 : $root.lastname
ログイン後にコピー
$scope スコープ
之间无法互相访问
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上
ログイン後にコピー
AngularJS コントローラー
控制 AngularJS 应用程序的数据。 AngularJS 控制器是常规的 JavaScript 对象。
ng-controller
ng-controller 指令定义了应用程序控制器
ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。 myCtrl 函数是一个 JavaScript 函数。
JS引用<script src="personController.js"></script> 多个controller
js文件中 定义一个app
之后可以定义多个controller
HTML中也可以对应多个controller
ログイン後にコピー
複数のコントローラーコントローラー
var app = angular.module('myApp', []);
app.controller('myCtrl1', function($scope) {
$scope.firstName = "Johns"; $scope.lastName = "Doef";
});
app.controller('myCtrl2', function($scope) {
$scope.firstName = "Tom"; $scope.lastName = "kkk";
});ログイン後にコピー
AngularJS フィルター
フィルターのフィルター
パイプ文字 (|) を使用して式とディレクティブにフィルターを追加できます。
AngularJS フィルターを使用してデータを変換できます
currency 数値を通貨形式にフォーマットします
filter 配列項目からサブセットを選択します。
小文字 文字列を小文字にフォーマットします。
orderBy 式に基づいて配列を配置します
uppercase 文字列を大文字にフォーマットします
入力をフィルタリングします
入力フィルタは、パイプ文字 (|) と、その後にコロンとモデル名が続くフィルタを介してディレクティブに追加できます。
<p><input type="text" ng-model="test"></p><ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li></ul>ログイン後にコピー
次の例は、文字列を逆にするフィルターリバースをカスタマイズします
<!DOCTYPE html><html><meta charset="utf-8"><script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script> <body> <p ng-app="myApp" ng-controller="myCtrl">姓名: {{ msg | reverse }}</p><script>var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依赖
return function(text) {
return text.split("").reverse().join("");
}
});</script> </body></html>ログイン後にコピー
大文字、小文字の変換 (詳細を確認したい場合は、PHP 中国語 Web サイトにアクセスしてくださいAngularJS 開発マニュアル 学習)
AngularJS Service (サービス)
AngularJS では、独自のサービスを作成したり、組み込みのサービスを使用したりできます。
AngularJS では、サービスは AngularJS アプリケーションで使用できる関数またはオブジェクトです。
$location
location.absUrl(); 現在のページの URL アドレスを取得するための組み込みサービス
$http サービス
$http が最もよく使用されますAngularJS アプリケーションのサービス。 サービスはサーバーにリクエストを送信し、アプリケーションはサーバーから送信されたデータに応答します。
$timeoutサービス
intervalサービスは、JSのwindow.setInterval関数に対応します。
interval を使用して、常に実行する遅延サービスを設定できます。
カスタム サービスを作成する
カスタム サービスを使用するには、コントローラーを定義して依存関係を設定するときにそれを個別に追加する必要があります:
カスタム サービスを作成してアプリケーションに接続した後、それを使用できますコントローラー、ディレクティブ、フィルター、またはその他のサービス内。
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script></head><body><p ng-app="myApp" ng-controller="myCtrl"><p>255 的16进制是:</p><h1>{{hex}}</h1></p><p>自定义服务，用于转换16进制数：</p><script>var app = angular.module('myApp', []);
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
app.controller('myCtrl', function($scope, hexafy) {
$scope.hex = hexafy.myFunc(255);
});</script></body></html>ログイン後にコピー
AngularJS XMLHttpRequest
http.get
-http.post
-http.delete
-http.patch
単純な get/post リクエスト
// 简单的 GET 请求，可以改为 POST$http({
method: 'GET',
url: '/someUrl'}).then(function successCallback(response) {
// 请求成功执行代码
}, function errorCallback(response) {
// 请求失败执行代码});$http.get('/someUrl', config).then(successCallback, errorCallback);$http.post('/someUrl', data, config).then(successCallback, errorCallback);ログイン後にコピー
AngularJS 選択ボックス)
AngularJS は、配列またはオブジェクトを使用してオプションのドロップダウン リストを作成できます。
ng-option ディレクティブを使用してドロップダウン リストを作成します。リスト項目はループ内のオブジェクトと配列を通じて出力されます
$scope.names = ["Google", "Runoob", "Taobao"];ドロップダウン ボックスの初期値
scope.cars.car02; //设置第2个为初始值；
ログイン後にコピー
この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイトAngularJS ユーザー マニュアル
にアクセスして学習してください)。以下のメッセージ。
以上がAngularJS を学ぶにはどうすればよいですか? Angularjs 学習チュートリアルで迷子にならずに済みますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
