learn angularJS

2014. 11. 6. 17:21Front/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/


모듈?? 


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


Factory에 대해 알아보자!

Factory methods are responsible for creating most objects in Angular.


2가지 특징을 들어보면

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

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

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


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


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



반응형