AngularJS 関数

投稿日 2015/07/16

[Home]  | [Index]  | [ディレクティブ] [関数の使用]  | [サービス]  | [フィルタ] 

AngularJS の関数

AngularJS の関数は以下のページに詳細が載っている。

AngularJS API Document

これによると、次のようなものがある。


めったに使いそうもない関数がある一方で必ず使う関数もある。それは、angular.module() である。これは下の例のように ng-app ディレクティブで指定したビューをコントローラにひもづける。

var app1 = angular.module("app1", []);
app1.controller("controller1", function($scope) {
  // コントローラの動作コード
});

view (jade)

doctype html
html(ng-app="app1")
 head
  ...
 body
  ...
  div(ng-controller="controller1")
   ...

$scope は AngularJS が提供するサービスのひとつで、ビューとコントローラの橋渡しをするものである。他のサービスを使う場合は、次の例のようにする。($http を使用してサーバとのやり取りを行う場合)

var app1 = angular.module("app1", []);
app1.controller("controller1", function($scope, $http) {
  // コントローラの動作コード
});

これは、次のように書くこともできる。つまり、関数に直接、グローバルな $scope や $http を渡すのではなく、間接的に s, http を渡している。

var app1 = angular.module("app1", []);
app1.controller("controller1", [$scope, $http, function(s, http) {
  // コントローラの動作コード
}]);

さらに $inject サービスを利用してコントローラにオブジェクトを渡す方法もある。


関数の使用例

ときどきは使いそうな関数についての使用例。サーバ環境として node.js & Express 4, テンプレートエンジンは Jade を使用している。

angular.forEach

angular.forEach は JavaScript の for in 文に近い。

表示例

angular.forEach 0: DOG;1: DAYS;2: II;

view (jade)

div(ng-controller="controller1", style="margin-left:5%;color:blue;")
 p(ng-cloak) {{ foreachTest }}

controller

$http.get('/test/angular/foreach')
  .success(function(data, status, headers, config) {
    var s = "angular.forEach ";
    var log = new Array();
    angular.forEach(data, function(value, key) {
      s += (key + ': ' + value);
      s += ";"
    }, log);
    $scope.foreachTest = s;
  });

express (node.js)

router.get('/angular/foreach', function(req, res) {
  res.json(['DOG', 'DAYS', 'II']);
});

angular.element (jqLite)

AngularJS は jQuery の関数をサポートしている。これは、jQuery の関数のエイリアスとして動作する。また、jQuery がない場合もサポートされていて、AngularJS のビルトイン関数 (jQuery のサブセット) を利用している。

下のサンプルでは、コントローラで label1 のテキストを読み取り、text_element1 に表示する。

表示例


view (jade)

div(ng-controller="controller1", class="form-group")
 form(novalidate, class="form-inline")
  label(id="label1",for="text_element1") element1
  input(type="text", ng-model="text_element1", size="50", class="form-control")
  button(type="button", class="btn btn-primary", ng-click="elem_test()") OK

controller1.js

$scope.elem_test = function() {
  $scope.text_element1 = angular.element("#label1").text();
}

angular.fromJson, angular.toJson

fromJson(string) は string からオブジェクトに変換する。toJson(object) は object から JSON 文字列に変換する。

表示例


view (jade)

div(ng-controller="controller1", class="form-group")
 form(novalidate, class="form-inline")
  label(for="json_data1") JSON 
  input(type="text", ng-model="json_data1", size="50", class="form-control")
  div(class="panel panel-default", ng-init="radio_init=true")
   input(type="radio", ng-model="json1", value="0", name="radiogroup1", ng-checked="radio_init", class="form-control")
   label(for="fromJson")  fromJson
   input(type="radio", ng-model="json1", value="1", name="radiogroup1", ng-checked="!radio_init", class="form-control")
   label(for="toJson")  toJson
  button(type="button", class="btn btn-primary", ng-click="json_test(json_data1, json1)") OK
br
div(style="margin-left:5%;margin-top:30px;color:blue;", ng-cloak) {{json_result}}

controller1.js

/* angular.fromJson, angular.toJason */
$scope.json_test = function(str, radio) {
 if (radio == "0")
   $scope.json_result = "Result: " + angular.fromJson(str);
 else
   $scope.json_result = "Result: " + angular.toJson(str);
 }

angular.isArray

次のサンプルは angular.isArray() を使って引数が配列かどうかを判別する。


view (jade)

div(ng-controller="controller1", class="form-group")
 form(novalidate, class="form-inline")
  label(for="array_text") input: 
  input(type="text", id="array_text" ng-model="array_text", class="form-control", size="50")
  button(type="button", class="btn btn-primary", ng-click="array_test(array_text);") OK
div(style="margin-left:5%;margin-top:30px;color:blue;", ng-bind="array_test_result")

controller1.js

/* angular.isArray */
$scope.array_test = function(text) {
  var a = angular.fromJson(text);
  $scope.array_test_result = angular.isArray(a);
}

 

 


 

 開設 2014年12月   著作権 2014-2015 bonk.red  連絡先: こちらからメッセージを送ってください。

 このページの先頭へ..