learn angularJS

이 페이지에서 학습을할 것은?! angularjs를 하기 위해 기본적인 지식들 정리! ㅎㅎ

공식 사이트 : https://www.angularjs.org/

배우기 위한 사이트 : https://thinkster.io/angulartutorial/a-better-way-to-learn-angularjs/

    ㄴ angularJS binding 동영상 : 음...ng-model의 유용함을 보여주는?! : https://thinkster.io/egghead/binding/

    ㄴ 기본 컨셉을 알려줌! : https://code.angularjs.org/1.2.26/docs/guide/concepts

가이드 페이지 : https://docs.angularjs.org/guide/

모듈?? 

우선 모듈?? 모듈이 무엇인지 살펴보겠다.

# angular apps don't have a main thread! 라고 한다.

앵귤라js는 모듈단위로 접근이 가능하다! 모듈단위니~재사용성은 증가!

// 모듈선언

-- just like..controller

var myAppModule = angular.module('myApp', []); // [] : 모듈의 리스트!

-- html

<div ng-app="myApp">

// 멀티 모듈

컨트롤러를 사용.

참고 사이트 : https://docs.angularjs.org/guide/module

그리고 소스를 보다보면 config, factory, controller 등을 볼수 있다.

먼저 concept에 대해서 잠깐 보면 좋을것 같다. 참고 사이트 : https://docs.angularjs.org/guide/concepts

Controllers are "classes" or "constructor functions" that are responsible for providing the application behavior that supports the declarative markup in the template.

ex)

someModule.controller('MyController', ['$scope', 'dep1', 'dep2', function($scope, dep1, dep2) {
...
$scope.aMethod = function() {
  ...
}
...
}]);

controller의 예제를 보자! 

지시자는 ng-controller를 사용!

html에서 호출 부분 : 보통은 액션이 들어가고 발동이 되기때문에 <form> tag또는 클릭 이벤트에서 많이 사용 된다.

<div ng-controller="GreetingController">
{{ greeting }}
</div>

js부분

var myApp = angular.module('myApp',[]);

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.greeting = 'Hola!';
}]);

아무튼 위처럼 모듈은 controller와 연결되어있는것을 알수 있다. function($scope){}은..생성자??

Factory에 대해 알아보자!

Factory methods are responsible for creating most objects in Angular.

2가지 특징을 들어보면

1) 서비스들을 사용할 수 있다. 서비스는 아래에서 말하겠다.

2) 서비스를 초기화 한다! 마치 자바에서는 생성자가 있다면 앵귤러에는 팩토리가 있는?! 그리고 팩토리패턴도 연상되어진다.

    팩토리는 보통 객체를 생성한다. 물론 조금 개념차이가 있는듯 하다. 앵귤러는 서비스사용, 서비스 초기화!를 들수 있겠다.

예제는 아래의 서비스에 나오니 참고하도록 하자! 서비스 gogo! 

Service에 대해서 알아보자!

Service? Angular services는 대체할 수있는 객체이다. 음..쉽게 말하면 DI할 수 있다.

To use an Angular service, you add it as a dependency for the component (controller, service, filter or directive) that depends on the service.

또한 싱글톤으로 구성! Services는 위에서 말한것 처럼 component(controller, service, filter, directive)에

추가할 수 있다. Angular는 많은 Services를 built-in 하고있다.

예제를 하나 보자!

-- html

<div id="simple" ng-controller="MyController">
  <p>Let's try this simple notify service, injected into the controller...</p>
  <input ng-init="message='test'" ng-model="message" >
  <button ng-click="callNotify(message);">NOTIFY</button>
  <p>(you have to click 3 times to see an alert)</p>
</div>

-- js : 소스를 보며 익히자! 모듈부터~컨트롤러, 팩토리 등등!

아래처럼 서비스는 $scope, $window등을 사용하고 있는것을 알수 있다. html에서 ng-controller로 컨트롤러를 호출!

물론 factory에서 서비스를 초기화 한다. 컨트롤러에서는 그 서비스를 사용! []안에 보면 여러가지 것들이 들어가있다.

notify는 factory라고 볼수있다. 즉, 팩토리 서비스! function은 $widow를 가지고 동작 한다.

angular.
 module('myServiceModule', []).
  controller('MyController', ['$scope','notify', function ($scope, notify) {
    $scope.callNotify = function(msg) {
      notify(msg);
    };
  }]).
 factory('notify', ['$window', function(win) {
    var msgs = [];
    return function(msg) {
      msgs.push(msg);
      if (msgs.length == 3) {
        win.alert(msgs.join("\n"));
        msgs = [];
      }
    };
  }]);

로그인 관련하여 필수적인! $cookieStore에 대해서 알아보자!^^

참고 url : https://docs.angularjs.org/api/ngCookies/service/$cookieStore

$cookieStore

1. - service in module ngCookies

Provides a key-value (string-object) storage, that is backed by session cookies. Objects put or retrieved from this storage are automatically serialized or deserialized by angular's toJson/fromJson.

Requires the ngCookies module to be installed.

Dependencies

• $cookies

Methods

• get(key);

  Returns the value of given cookie key

  Parameters

  Param	Type	Details
  key	string	Id to use for lookup.

  Returns

  Object

  Deserialized cookie value.

• put(key, value);

  Sets a value for given cookie key

  Parameters

  Param	Type	Details
  key	string	Id for the value.
  value	Object	Value to be stored.

• remove(key);

  Remove given cookie

  Parameters

  Param	Type	Details
  key	string	Id of the key-value pair to delete.

Example

angular.module('cookieStoreExample', ['ngCookies'])
.controller('ExampleController', ['$cookieStore', function($cookieStore) {
  // Put cookie
  $cookieStore.put('myFavorite','oatmeal');
  // Get cookie
  var favoriteCookie = $cookieStore.get('myFavorite');
  // Removing a cookie
  $cookieStore.remove('myFavorite');
}]);

--------  아래) 2014년 11월 06일 추가 -----

$rootScope

1. - $rootScopeProvider
2. - service in module ng

Every application has a single root scope. All other scopes are descendant scopes of the root scope. Scopes provide separation between the model and the view, via a mechanism for watching the model for changes. They also provide an event emission/broadcast and subscription facility. See the developer guide on scopes.

What are Scopes?

scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events.

참고 url : https://docs.angularjs.org/guide/scope

----------- 아래) 2014년 11월 12일 추가 ----------

https://docs.angularjs.org/api/ng/filter/limitTo

limitTo

1. - filter in module ng

Creates a new array or string containing only a specified number of elements. The elements are taken from either the beginning or the end of the source array, string or number, as specified by the value and sign (positive or negative) of limit. If a number is used as input, it is converted to a string.

ex) <li 블라블라~ ng-repeat="mark in markData | limitTo:limit">

적용 방법 

http://stackoverflow.com/questions/22984727/angularjs-how-to-change-ng-repeat-limitto-based-on-variable