AngularJS を学ぶにはどうすればよいですか? Angularjs 学習チュートリアルで迷子にならずに済みます-jsチュートリアル-php.cn

AngularJS を学ぶにはどうすればよいですか? Angularjs 学習チュートリアルで迷子にならずに済みます

寻∝梦

リリース： 2018-09-08 11:36:00

オリジナル

1203 人が閲覧しました

この記事では、angularjsの構文の紹介を中心に、angularjsのスコープの説明、angularjsのコントローラーとサービスの説明をしています

馴染みのないangularjsの構文を記録します

。

フィルター
カスタムフィルター
AngularJSサービス
AngularJS XMLHttpRequest
AngularJS Select(セレクトボックス)
$場所
$httpサービス
$timeout サービス
カスタムサービスの作成
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(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl1&#39;, function($scope) {
    $scope.firstName = "Johns";    $scope.lastName = "Doef";
});
    app.controller(&#39;myCtrl2&#39;, 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:&#39;country&#39;">
    {{ (x.name | uppercase) + &#39;, &#39; + 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(&#39;myApp&#39;, []);
app.controller(&#39;myCtrl&#39;, function($scope) {
    $scope.msg = "Runoob";
});
app.filter(&#39;reverse&#39;, 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(&#39;myApp&#39;, []);

app.service(&#39;hexafy&#39;, function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller(&#39;myCtrl&#39;, 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: &#39;GET&#39;,
    url: &#39;/someUrl&#39;}).then(function successCallback(response) {
        // 请求成功执行代码
    }, function errorCallback(response) {
        // 请求失败执行代码});$http.get(&#39;/someUrl&#39;, config).then(successCallback, errorCallback);$http.post(&#39;/someUrl&#39;, 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 サイトの他の関連記事を参照してください。