Angularjsの覚え書き

<h1>AngularJS</h1>

<h2>ng-app ng-controller ng-init</h2>
--> 必ず`<html ng-app>`の記述をはじめにする

--> `ng-controller`スコープを利用するコンストラクタ

--> `ng-init`初期設定をする
*注意*

```html:test.html
<h1 ng-init="count = 0" ng-click="click()">count:{{count}}</h1>
```
```javascript:script.js
$scope.click = function(){
       $scope.count = "Hello World";
}
```
のように``ng-init="expression"`` `ng-click="function"`とそれぞれタグ内とjsファイル内に別々に書くとng-clickが評価された後にタグ内のng-initと評価され、`count:0`になり、`count:Hello World`にはならない。

解決策として

```html:test.html
<h1 ng-init="init()" ng-click="click()">count:{{count}}</h1>
```
```javascript:script.js
$scope.init = function(){
       $scope.count = 0;
}
$scope.click = function(){
       $scope.count = "Hello World";
}
```
のように二つともjsファイル内にexpressionを書けば解決する。

<h2>ng-repeat</h2>
--> `ng-repeat="item in items"`
itemsに配列を渡すことでitemの所にひとつずつわたされる。


<h2>ng-click</h2>
--> `ng-click`でクリックイベントをつけられる。

例

```html:test1.html
<button ng-click="count = count + 1">count:{{count}}</button>
```
or

```html:test1.html
<button ng-click="click()">count:{{count}}</button>
```
```js:script.js
var x = 0;
$scope.click = function(){
             x++;
             $scope.count = x;
}  
```
実行結果

![alt](https://gyazo.com/115f974a6d1aba01f51fea98d6eedb4c.gif)


<h2>Angularjsでsocket.ioを使う</h2>

まずmoduleに以下を記入する

```js:service.js
 //--socket-factory------------------------------------------------------------------↲           
  5 .factory('socket',function($rootScope){↲
  6     var socket = io.connect(location.host + '/');↲
  7     return {↲
  8         on:function(eventName,callback){↲
  9           socket.on(eventName,function(){↲
 10               var args = arguments;↲
 11               $rootScope.$apply(function(){↲
 12                   callback.apply(socket,args);↲
 13               });↲
 14           });↲
 15         },↲
 16         emit:function(eventName,data,callback){↲
 17           socket.emit(eventName,data,function(){↲
 18               var args = arguments;↲
 19               $rootScope.$apply(function(){↲
 20                   if(callback){↲
 21                     callback.apply(socket,args);↲
 22                   }↲
 23               });↲
 24           });↲
 25         }↲
 26     };↲
 27 });
```

で、コントローラでは`socket`でリスナーをよべる

```js:controller.js

1 .controller('test',function($scope,socket){
2         socket.emit('eventName',{data});
3         socket.on('evetName',function(data){
4                 $scope.model = data.~;
5                }
6 }
```

見ないな感じ。

<h2>Angularjs + jQuery</h2>

angularjsの中にはJqueryLiteみたいなのがあるが、普通にjQueryを使いたい

ということでjqueryLiteをJQueryに上書きする。

```js:angular.js
 1 //---jquery-----------------------------------------↲                     
  2 function buindJQuery(){↲
  3     jQuery = window.jQuery;↲
  4     if(jQuery){↲
  5         jqLite = jQuery;↲
  6         extend(jQuery.fn,{↲
  7             scope: JQLitePrototype.scope,↲
  8             isolateScope:JQLitePrototype.isolateScope,↲
  9             controller:JQLitePrototype.controller,↲
 10             injector:JQLitePrototype.injector,↲
 11             inheritedData:JQLitePrototype.inheritedData↲
 12         });↲
 13 ↲
 14         jqLitePatchJQueryRemove('remove',true,true,false);↲
 15         jQLitePatchJQueryRemove('empty',false,false,false);↲
 16         jQLitePatchJQueryRemove('html',false,false,true);↲
 17 ↲
 18     } else {↲
 19         jqLite = JQLite;      ↲
 20     }↲
 21     angular.element = jqLite;↲
 22 }↲
```

を記述。

でangularjsが読み込まれる前にjQueryが先に読み込まれるようにするので

![alt](https://gyazo.com/c56e6e68d29e6b9d8a8f6ab0a7b87a0b.png)
参考 http://dev.classmethod.jp/client-side/javascript/angularjsandjquery/


*使用例*

```js:controller.js
1 angular.element("id or class ").prepend("<ul><li>" + "hello!" + "</li></ul>");
```