1. akkun_choi

    No comment

    akkun_choi
Changes in body
Source | HTML | Preview
@@ -1,201 +1,203 @@
-## $scope event list
-
-- $viewContentLoaded: viewの読み込みが完了した時。jQueryMobileの`pageinit`的なやつ。以下のようにして使う。
-関連:ng-init
-
-```
-$scope.$on('$viewContentLoaded', function() {
- //call it here
-});
-```
-
-以下使い方がよく分からない
-
-- $locationChangeStart
-- $locationChangeSuccess
-- $routeUpdate
-- $routeChangeStart
-- $routeChangeSuccess
-- $routeChangeError
-- $destroy
-- $includeContentLoaded
-
-
-## ng-classである条件の時だけクラスをつけたい
-
-`selected`にbooleanが入るようして、
-
-```
-<span ng-class="{true: 'selected'}[selected]">なんか</span>
-```
-
-「もし値が設定されてなかったら」ってしたい場合、angularのexpression(上記ng-class属性の値の部分)にnullとかundefinedの概念がないので、そのまま変数を突っ込んでもダメ。`!selected`のようにboolean変換すれば良い。
-
-## デフォルト値
-
-http://stackoverflow.com/questions/16523076/angular-template-default-value-if-binding-null-undefined-with-filter
-
-```
-{{gallery.date || 'Various'}}
-```
# $provide
http://docs.angularjs.org/api/AUTO.$provide
## service, factory, provider
これらは結局どれも`provider`を呼ぶことになります。
`service`,`factory`は`provider`を楽に記述できるようにしたユーティリティ。特にserviceはCoffeeScript生成したクラスをそのまま入れることができて便利そうです。
## factory
```
var sample = angular.module('sample', []);
// core factoryを定義
sample.factory('core', function(){
return {
name: 'This is a core'
};
});
// 依存性注入により、上で定義したオブジェクトが入る
sample.run(function(core){
console.log(core.name); // => This is a core
});
```
## service
クラスを用意します。
```
var MyUser = (function(){
var number = 0;
MyUser = function(){
this.number = ++number;
this.name = 'Thomas';
};
MyUser.prototype.getName = function(){
return this.name;
}
MyUser.prototype.getNumber = function(){
return this.number;
}
return MyUser;
})();
```
モジュールに登録します。
```
sample.service('myUserService', MyUser);
```
実行します。
```
sample.run(function(myUserService) {
console.log(myUserService.getName(), myUserService.getNumber()); // => Thomas 1
});
sample.run(function(myUserService) {
// 同じインスタンス
console.log(myUserService.getName(), myUserService.getNumber()); // => Thomas 1
});
```
## provider
```
sample.provider('myProvider', function(){
return {
$get: function(){
return {
name: 'This is a provider'
}
}
}
});
sample.run(function(myProvider) {
// ...
});
```
## 依存性注入
factory, service, providerで登録したやつ(コンポーネント)から他のコンポーネントを呼び出すことができます。
```
// 実行する度に異なるオブジェクトを生成する関数
sample.factory('myFactory', function(core){
var number = 0;
return function(){
return core.name + ' #' + ++number;
};
});
sample.run(function(myFactory){
console.log(myFactory()); // => This is a changed core #1
});
sample.run(function(myFactory){
console.log(myFactory()); // => This is a changed core #2
});
sample.run(function(myFactory){
console.log(myFactory()); // => This is a changed core #3
});
```
## value
```
sample('appName', 'MyCoolApp');
sample.run(function(appName){
console.log(appName); // MyCoolApp
});
```
# angular.module
http://docs.angularjs.org/api/angular.module
登録したモジュールは `ng-app` で指定すると実行されます。
```
<html ng-app="sample">
```
別の依存モジュールを指定できます。
例えば ng-appを main というモジュールにしたとします。
```
<html ng-app="main">
```
そして、mainモジュールを作成。第2引数に、依存モジュールを指定します。文字列にすると読み込み順を気にしなくていいね。
```
var main = angular.module('main', ['someModule', 'otherModule']);
```
```
var someModule = angular.module('someModule', ['sample']);
someModule.run(function(core){
console.log('SOME', core);
});
var otherModule = angular.module('otherModule', []);
// sampleモジュールは指定してないけど、すでに別のモジュールで指定されていれば良いみたい
otherModule.run(function(core){
console.log('OTHER', core);
});
```
+# その他
+
+## $scope event list
+
+- $viewContentLoaded: viewの読み込みが完了した時。jQueryMobileの`pageinit`的なやつ。以下のようにして使う。
+関連:ng-init
+
+```
+$scope.$on('$viewContentLoaded', function() {
+ //call it here
+});
+```
+
+以下使い方不明
+
+- $locationChangeStart
+- $locationChangeSuccess
+- $routeUpdate
+- $routeChangeStart
+- $routeChangeSuccess
+- $routeChangeError
+- $destroy
+- $includeContentLoaded
+
+
+## ng-classである条件の時だけクラスをつけたい
+
+`selected`にbooleanが入るようして、
+
+```
+<span ng-class="{true: 'selected'}[selected]">なんか</span>
+```
+
+「もし値が設定されてなかったら」ってしたい場合、angularのexpression(上記ng-class属性の値の部分)にnullとかundefinedの概念がないので、そのまま変数を突っ込んでもダメ。`!selected`のようにboolean変換すれば良い。
+
+## デフォルト値
+
+http://stackoverflow.com/questions/16523076/angular-template-default-value-if-binding-null-undefined-with-filter
+
+```
+{{gallery.date || 'Various'}}
+```