AngularJS1.5 メモ(1) 基本的な記載方法
投稿日: | |
---|---|
タグ: |
本稿はAngularJS1.5系の基本的な記載方法のサンプル集である。
- コンポーネント化する場合
templateの代わりに、templateUrlを使用することで、テンプレートを別のファイルに記載することもできる。<!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>
- パラメータを使用する場合
- 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は以下のようにしてインストールできる。
- npmをインストール。
user% aptitude install npm
- bowerをインストール。
user% npm install bower -g
npmとはNode Package Managerの略で、Node.js(サーバーサイドJavaScript)用のパッケージ管理ツールのこと。
理由は不明だが、bowerはnpm経由でインストールできる。
- user% bower search キーワード
- 検索
- user% bower install ソース
- user% bower install ソース#バージョン
- インストール
トラブルシューティング
以下、正常にできなかった場合にありそうなミス。
- AngularJSを取り込むscriptタグの閉じタグが抜けていた。
- ;または)などの終端を表す記号が漏れていた。