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

angular.isUndefined 사용하기~

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

앵귤러를 사용하면서 아래처럼 ng-model을 통해 input text에 들어오는 키워드들에 대해서 변경된 값을 바로바로 셋팅할 수 가 있다.

<div class="input">
<input type="text" id="keyword" name="keyword" data-maxbyte="52"
class="form-control input-sm" value="{{keyword}}" ng-model="app.query" ng-keypress="($event.charCode==13)?search(app.query):return" placeholder="검색어를 넣어주세요.">
</div>


그리고 한가지 유의할 점은 input value에 {{keyword}} 즉, 다른쪽에서 넘어온 데이터를 셋팅을 해주게 되면

input 의 변화가 없다면 undefined가 search()의 파라미터로 넘어가게 된다.

ex) {{keyword}}가 카카오! 이 상태에서 검색버튼을 누르면 app.query에는 아직 undefined이다!! 그래서 제대로 된 검색결과가 나오지 않는다.




그러므로 체킹을 한번 해주고 기존에 있는 데이터({{keyword}})를 활용하면 되겠다.

if(angular.isUndefined(keyword)){
keyword=$scope.keyword;
}


   끝.


저작자 표시 비영리 변경 금지
신고

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

설정

트랙백

댓글

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

Failed to load resource: the server responded with a status of 404 (Not Found)

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

angularJS를 사용하는데.. img를 가져오는데 resource에서 상대경로로 이상한 resource를 가져오는것이 아닌가? -_-;;

그래서 오류가..<img src="{{item.imageUrl}}"~~블라블라~~ 

item.imageUrl 부분에서 났다.


<<오류 내용>>

Failed to load resource: the server responded with a status of 404 (Not Found)


Resource쪽 확인 - 이상한 값이 들어가 있다..why? ㅠㅠ 




원인은 바로.. img src부분에서  agularJS의 {{item.imgeUrl}}이 src에서 오동작을 하는것 같다.

ng-src로 바꿔주는 깔끔하게 잘돌아간다!!

https://docs.angularjs.org/api/ng/directive/ngSrc


<img ng-src="{{item.imageUrl}}"


  - 끝 -

저작자 표시 비영리 변경 금지
신고

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

설정

트랙백

댓글

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

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을 이용하시는 분들은 로그인 후 아래에 코멘트를 남겨주세요 ::::

angular, bower, karma, grunt, yo?

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



업무를 하면서 정리를 하지 않으니 그냥 대충 알고 가는것 같다.

천천히 제대로 따라가자!


아래는 이번 웹프로젝트에 참여하면서 사용할 친구들이다.

단, node.js가 먼저 셋팅되어있어야 한다.(npm 등)

localhost:~ terrypark$ npm list --global -depth=0

/usr/local/lib

├── bower@1.3.12

├── generator-angular@0.9.8

├── generator-karma@0.8.3

├── grunt-cli@0.1.13

├── npm@1.4.28

└── yo@1.3.0


생소한 것들이 많다.

angular, bower, karma, grunt, yo?

하나씩 알아가보자!

참고 url : https://www.youtube.com/watch?v=QfWmtb8bntU


우리의 방향은 아래의 그림인 것 같다.




YO

- Yeoman의 일부.

템플릿 npm 모듈로 작성한다.(배포하거나 로컬에 두고 실행)

이미 다양한 템플릿이 존재.

커스트마이징 가능

영어로는

Yo is maintained by the Yeoman project and offers web application scaffolding, utilizing scaffolding templates we refer to as generators. You typically install yo and any generators you think you might use via npm. : 간단히 말해서..웹어플리케이션의 템플릿을 제공! 

설치 시에 권한 문제가 있을 수 있음! -> su root 등으로 root권한으로 해주면 됨!

npm install -g yo  
1) npm install -g generator-webapp   : Basic Scaffolding
2) npm install -g generator-angular : Scaffolding an AngularJS app

1) 또는 2) 설치! angular로 하려면 2번을 셋팅!

2)번 선택 후 project 디렉토리를 하나 만들고 그 안에서 yo angular 명령어 수행!

localhost:app terrypark$ yo angular


     _-----_

    |       |    .--------------------------.

    |--(o)--|    |    Welcome to Yeoman,    |

   `---------´   |   ladies and gentlemen!  |

    ( _´U`_ )    '--------------------------'

    /___A___\    

     |  ~  |     

   __'.___.'__   

 ´   `  |° ´ Y ` 


Out of the box I include Bootstrap and some AngularJS recommended modules.

? Would you like to use Sass (with Compass)? No

? Would you like to include Bootstrap? Yes

? Which modules would you like to include? angular-animate.js, angular-cookies.js, angular-resource.js, angular-route.js, angular-sanitize.js, angular-touch.js

angular-animate.js

  angular-cookies.js

  angular-resource.js

  angular-route.js

  angular-sanitize.js

  angular-touch.js


결과 - 아래와 같이 만들어집니다.

localhost:ManagerOfMoney terrypark$ ls -alr

total 88

drwxr-xr-x   5 terrypark  staff   170 11 17 11:27 test

-rw-r--r--   1 terrypark  staff   977 11 17 11:27 package.json

drwxr-xr-x  21 terrypark  staff   714 11 17 11:28 node_modules

drwxr-xr-x  15 terrypark  staff   510 11 17 11:27 bower_components

-rw-r--r--   1 terrypark  staff   488 11 17 11:27 bower.json

drwxr-xr-x  12 terrypark  staff   408 11 17 11:27 app

-rw-r--r--   1 terrypark  staff  9700 11 17 11:27 Gruntfile.js


더 직관적으로 보면





In the AngularJS framework, for example

$ yo angular:controller myController
$ yo angular:directive myDirective
$ yo angular:filter myFilter
$ yo angular:service myService

$ yo angular:controller mainController

   create app/scripts/controllers/maincontroller.js

   create test/spec/controllers/maincontroller.js


셋팅 확인은  

npm list --global -depth=0

/usr/local/lib

├── bower@1.3.12

├── generator-angular@0.9.8

├── generator-karma@0.8.3

├── grunt-cli@0.1.13

├── npm@1.4.28

└── yo@1.3.0


참고 

필수참고! : http://yeoman.io/learning/

https://www.youtube.com/watch?v=zBt2g9ekiug

https://github.com/yeoman/yo

http://twofuckingdevelopers.com/2013/07/yeoman-modern-workflows-for-angularjs/

http://www.toptal.com/angular-js/your-first-angularjs-app-part-2-scaffolding-building-and-testing


GRUNT

Grunt is a task-based command line build tool for JavaScript projects.’

프로젝트에 사전정의된 task 단위로 실행되며 command line을 통해 동작하는 자바스크립트 용 빌드 툴

Grunt는 JavaScript Task Runner, JavaScript 프로젝트 관리를 위한 build-tool이다

npm install -g grunt-cli
grunt serve // 서버 시작!

참고 

http://gruntjs.com/getting-started

http://nuli.navercorp.com/sharing/blog/post/1132682


KARMA

카르마는 프로젝트에서 테스트를 위함이다.

카르마를 동작시키기위해서는 node.js와 npm이 필요하다.

참고

http://karma-runner.github.io/0.12/index.html

karma install : http://karma-runner.github.io/0.12/intro/installation.html

testacular : http://www.youtube.com/watch?v=MVw8N3hTfCI

npm install -g testacular



BOWER

보우어가 하는 짓은 다음과 같다. 즉, 실제로 사용되어지는 라이브러리등을 install 하여 사용한다. 간혹 install은 되어있으나 

app.js에 자동으로 만들어지지 않을 경우가 종종 있다. 이럴경우에는 수동으로 넣어주면 된다.

ex)

   .......

   'ui.router',

    'base64'  <--수동으로 넣어주기.

  ])

Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. 

Bower manages all these things for you.

npm install -g bower    // bower 설치. npm은 bower, grunt 등을 설치!
bower install <package> // bower는 위에 언급한 것처럼 frameworks, libraries등을 설치!

ex) bower install jquery 


참고

http://bower.io/

bower가 제공하는 package 찾기 : http://bower.io/search/


참고 - 개인 프로젝트 시 참고~

https://travis-ci.org/


      - 끝 -



저작자 표시 비영리 변경 금지
신고

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

설정

트랙백

댓글

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

티스토리 툴바