Ace-T's Blog 내 검색 [네이버 커넥트 이웃 합니다~^-^/ 요청 大 환영~~]

learn angularJS

Front/AngularJS 2014.11.06 17:21
[Good Comment!!, Good Discussion!!, Good Contens!!]
[ If you think that is useful, please click the finger on the bottom~^-^good~ ]
by ace-T




이 페이지에서 학습을할 것은?! 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/


모듈?? 

모듈이란?


그리고 소스를 보다보면 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의 예제를 보자! 

Controller


Factory에 대해 알아보자!

Factory methods are responsible for creating most objects in Angular.


2가지 특징을 들어보면

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

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

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


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


Service에 대해서 알아보자!

Service



로그인 관련하여 필수적인! $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

Methods

  • get(key);

    Returns the value of given cookie key

    Parameters

    ParamTypeDetails
    keystring

    Id to use for lookup.

    Returns

    Object

    Deserialized cookie value.

  • put(key, value);

    Sets a value for given cookie key

    Parameters

    ParamTypeDetails
    keystring

    Id for the value.

    valueObject

    Value to be stored.

  • remove(key);

    Remove given cookie

    Parameters

    ParamTypeDetails
    keystring

    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



acet 박태하가 추천하는 readtrend 추천글!

설정

트랙백

댓글

:::: facebook을 이용하시는 분들은 로그인 후 아래에 코멘트를 남겨주세요 ::::

DI(Dependency Injection)

OpenSource/Spring 2012.08.09 17:06
[Good Comment!!, Good Discussion!!, Good Contens!!]
[ If you think that is useful, please click the finger on the bottom~^-^good~ ]
by ace-T



출처 : 토비의 스프링 3
DI(Dependency Injection) : 의존관계 주입!

배경 : IoC의 너무 넓은 의미=> Spring의 기능, 특징을 한마디로 표현 X => DI 라는 용어를 만듬.

DI는 외부로부터 레퍼런스를 제공받고, 이를 통해 여타 오브젝트와 다이나믹하게 의존관계가 만들어지는 것이 핵심이다.

의존관계 주입은 다음과 같은 세가지 조건을 충족하는 작업을 말한다.
1) 클래스 모델이나 코드에는 런타임 시점의 의존관계가 드러나지 않는다. 그러기 위해서는 인터페이스에만 의존하고 있어야 한다.
2) 런타임 시점의 의존관계는 컨테이너나 팩토리 같은 제3의 존재가 결정한다.
3) 의존관계는 사용할 오브젝트에 대한 레퍼런스를 외부에서 제공(주입) 해줌으로써 만들어진다.

다시 또 말해보면 DI는 자신이 사용할 오브젝트에 대한 선택과 생성 제어권을 외부로 넘기고 자신은 수동적으로 주입받은 오브젝트를 사용한다는 점에서 IoC의 개념에 잘 들어맞는다.

스프링이 제공하는 IoC방법은 의존관계주입(DI)만 있는 것이 아니다.
코드에서는 구체적인 클래스에 의존하지 않고, 런타임 시에 의존관계를 결정한다는 점에서 의존관계 주입과 비슷하지만, 의존관계를 맺는 방법이 외부로부터의 주입이 아니라 스스로 검색을 이용하기 때문에 의존관계 검색(dependeny lookup)이라고 불리는 것도 있다. 의존관계 검색은 자신이 필요로 하는 의존 오브젝트를 능동적으로 찾는다. 물론 자신이 어떤 클래스의 오브젝트를 이용할지 결정하지는 않는다. 그러면 IoC라고 할 수는 없을 것이다. 의존관계 검색은 런타임 시 의존관계를 맺을 오브젝트를 결정하는 것과 오브젝트의 생성작업은 외부 컨테이너에게 IoC로 맡기지만, 이를 가져올 때는 메소드나 생성자를 통한 주입 대신 스스로 컨테이너에게 요청하는 방법을 사용한다.

스프링의 IoC컨테이너인 애플리케이션 컨텍스트는 getBean()이라는 메소드를 제공한다. 바로 이 메소드가 의존관계 검색에 사용 된다.

ex)

public UserDao(){
  AnnotationConfigApplicationContext context =
                                       new AnnotationConfigApplicationContext(DaoFactory.class);

   this.connectionMaker = context.getBean("connectionMaker", ConnectionMaker.class);
}

※ DI를 원하는 오브젝트는 먼저 자기자신이 컨테이너가 관리하는 빈이 돼야 한다는 사실을 잊지 말자.
    스프링의 핵심인 IoC와 DI는 오브젝트의 설계와 생성, 관계 사용에 관한 기술 이다.

의존관계 검색과 의존관계 주입에서의 차이는
   의존관계 검색 방식에서는 검색하는 오브젝트는 자신이 스프링의 빈일 필요가 없다는 점이다.

스프링은 DI를 편하게 사용 할 수 있도록 도와주는 도구이면서 그 자체로 DI를 적극 활용한 프레임워크 이기도 하다. 그래서 스프링을 공부하는 건 DI를 어떻게 활용해야 할지를 공부하는 것이기도 하다.

DI는 생성자 뿐만 아니라 수정자 메소드(setter), 일반메소드(set으로 시작) 등으로도 구현이 가능.

acet 박태하가 추천하는 readtrend 추천글!

설정

트랙백

댓글

  • 초보 2013.01.24 03:08 신고 답글 | 수정/삭제 | ADDR

    아래의 의존관계 주입과 검색의 차이점이 잘 이해가 안됩니다.

    의존관계 검색 방식에서는 검색하는 오브젝트는 자신이 스프링의 빈일 필요가 없다는 점이다.

    검색하는 오브젝트는 UserDao이며 UserDao는 빈으로 등록되어야 한다는 뜻인가요?

    답변 부탁드립니다.

    • Favicon of http://acet.pe.kr BlogIcon String Ace-T 2013.01.24 16:27 신고 수정/삭제

      네 안녕하세요^^
      문의 하신 "의존관계 검색 방식에서는 검색하는 오브젝트는 자신이 스프링의 빈일 필요가 없다는 점이다" 이 문구만으로는 조금 이해하시기 어려우실꺼라 생각이 드네요^^;; 제가 더 자세하게 기술을 했어야 했는데 너무 포인트만 적어놨네요;

      위의 문구를 이해하실려면
      더 상단에 적힌 3개의 조건을 이해 하셔야 합니다.
      의존관계 주입은 다음과 같은 세가지 조건을 충족하는 작업을 말한다.
      1) 클래스 모델이나 코드에는 런타임 시점의 의존관계가 드러나지 않는다. 그러기 위해서는 인터페이스에만 의존하고 있어야 한다.
      2) 런타임 시점의 의존관계는 컨테이너나 팩토리 같은 제3의 존재가 결정한다.
      3) 의존관계는 사용할 오브젝트에 대한 레퍼런스를 외부에서 제공(주입) 해줌으로써 만들어진다.

      3가지 내용은 토비1권을 보시면 됩니다.
      또한 지금 위의 3가지는 의존관계에 대해서 강조 하고 있습니다.
      다시 말씀 드리면 DI / DL의 큰 차이는 "의존관계"가
      가장 큰 차이라고 할 수 있겠네요
      DI는 서로 의존 관계가 있죠! 어떤걸로? interface로요~ 1)번 사항 참고
      즉 userDao 쓸려면 connection이 되어야 하죠^^ (의존관계가 서로 있다는 뜻, 즉 둘 다 bean이 등록이 되어야 함.) 외부주입은 setter나 생성자로 보통 하죠~

      DL은 getBean()을 통해서 해당 connectionMaker을 가져올 지라도 usrDao는 빈으로 등록 할 필요가 없다는 뜻이에요 new해서 객체 생성 해도 무관하다는 것이죠

      문의 하신 "검색하는 오브젝트는 UserDao이며 UserDao는 빈으로 등록되어야 한다는 뜻인가요?" 에서 반대로 UserDao가 빈으로 등록되지 않아도 된다는 뜻이라고 생각하시면 됩니다. DL에서요^^

      음..설명을 잘못해서..더 헷깔리실 수 있겠지만..토비 1권을 조금 참조 하시면서 보시면 이해가 가실꺼라 생각합니다^^;

      참고사항으로
      http://acet.pe.kr/220과 http://acet.pe.kr/183 을 보시면 좋을 것 같네요

      열공하세요~~~

:::: facebook을 이용하시는 분들은 로그인 후 아래에 코멘트를 남겨주세요 ::::

티스토리 툴바