魔術師見習いのノート

プロフィール

魔術師見習い
Author魔術師見習い-_-.
Twitter魔術師見習い

コンピュータ関係のメモを主に書きます．

MENU

AngularJS1.5 メモ(1) 基本的な記載方法

投稿日:
タグ:

本稿はAngularJS1.5系の基本的な記載方法のサンプル集である。

コンポーネント化する場合
<!doctype html>
<html ng-app="sampleApp">
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script>
var app = angular.module("sampleApp", []);

app.component("sample", {
  template: '<div>hello</div>',
  controller: function() {},
  bindings: {}
});
</script>
<title>sample</title>
</head>
<body>
<sample></sample>
</body>
</html>
templateの代わりに、templateUrlを使用することで、テンプレートを別のファイルに記載することもできる。
パラメータを使用する場合
controllerAsで名前を指定すると、その名前でメンバを指定できる。
AngularJSのng-〜属性以外で、メンバの参照を行う場合、「{{〜}}」で囲う。 
<!doctype html>
<html ng-app="sampleApp">
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script>
var app = angular.module("sampleApp", []);

app.component('sample', {
  template: '<div>hello, {{sample.value}}</div>',
  controller: function(){},
  controllerAs: 'sample',
  bindings: {
    value: '@'
  }
});
</script>
<title>sample</title>
</head>
<body>
<sample value="world"></sample>
</body>
</html>
バインディングの種類は以下の通りである。
バインディング説明
@文字列と連携。評価しない。
&メソッド連携。
<オブジェクト連携。単方向データバインディング
=オブジェクト連携。双方向データバインディング
メソッド定義
コントローラ内でメンバを指定する場合、thisを使って指定する。 
<!doctype html>
<html ng-app="sampleApp">
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script>
ctrlFunc = function() {
  this.value = 'button';
  this.func = function(){
    this.value = 'pushed';
  }
};
var app = angular.module("sampleApp", []);

app.component('sample', {
  controller: ctrlFunc,
  controllerAs: 'sample',
  template: '<div>hello, {{sample.value}}</div><input type="button" value="button" ng-click="sample.func();">'
});
</script>
<title>sample</title>
</head>
<body>
<sample></sample>
</body>
</html>
サービスを使用する場合
以下は$windowサービスを使用したサンプル。 
<!doctype html>
<html ng-app="sampleApp">
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script>
ctrlFunc = function($window) {
  this.func = function(){
    $window.alert("warn");
  }
};
var app = angular.module("sampleApp", []);

app.component('sample', {
  controller: ctrlFunc,
  controllerAs: 'sample',
  template: '<input type="button" value="button" ng-click="sample.func();">'
});
</script>
<title>sample</title>
</head>
<body>
<sample></sample>
</body>
</html>
モジュールを使用する場合
追加モジュールを使用する場合、パッケージ管理にbowerというJavaScriptのパッケージ管理を使用すると便利である。
以下はhtmlをバインドする例。 
<!doctype html>
<html ng-app="sampleApp">
<head>
<meta charset="UTF-8">
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script>
ctrlFunc = function() {
  this.content = '<div>hogehoge</div>';
};

var app = angular.module("sampleApp", ['ngSanitize']);

app.component('sample', {
  controller: ctrlFunc,
  bindings: {},
  controllerAs: 'sample',
  template: '<div ng-bind-html="sample.content"></div>'
  });
</script>
<title>sample</title>
</head>
<body>
<sample></sample>
</body>
</html>
計算する場合
<!doctype html>
<html ng-app="sampleApp">
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script>
var app = angular.module("sampleApp", []);

app.component("sample", {
  template: '<div>{{1 + 3}}</div>',
  controller: function() {},
  bindings: {}
});
</script>
<title>sample</title>
</head>
<body>
<sample></sample>
</body>
</html>
コーディングレスのデータバインディング
<!doctype html>
<html ng-app="sampleApp">
<head>
<meta charset="UTF-8">
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script>
var app = angular.module("sampleApp", []);

app.component("sample", {
  template: '<input type="text" ng-model="sample.text"><div>text: {{sample.text}}</div>',
  controllerAs: "sample",
  controller: function() {
    this.text = "hoge";
  },
  bindings: {}
});
</script>
<title>sample</title>
</head>
<body>
<sample></sample>
</body>
</html>

Appendix

bower

bowerとはフロントエンド(クライアントサイドJavaScript)用パッケージマネージャである。

bowerは以下のようにしてインストールできる。

  1. npmをインストール。 
    user% aptitude install npm
  2. bowerをインストール。 
    user% npm install bower -g

npmとはNode Package Managerの略で、Node.js(サーバーサイドJavaScript)用のパッケージ管理ツールのこと。
理由は不明だが、bowerはnpm経由でインストールできる。

bowerの使用例を以下に簡単に記す。
user% bower search キーワード
検索
user% bower install ソース
user% bower install ソース#バージョン
インストール
トラブルシューティング

以下、正常にできなかった場合にありそうなミス。

  • AngularJSを取り込むscriptタグの閉じタグが抜けていた。
  • ;または)などの終端を表す記号が漏れていた。

時期が近い記事

一覧

Glogal link