'Tutorial'에 해당되는 글 1건

  1. 2013.03.22 AngularJS 튜토리얼

AngularJS 튜토리얼

AngularJS 2013. 3. 22. 17:39
728x90

AngularJS


저번 구글 devfest 를 다녀온후 angularJS를 보았고 생각나서 조금씩 해보려한다.

 

튜토리얼을 그냥 하나씩 따라가는 걸로~ 


 

angular.js 및 정식 튜토리얼은 위 이미지 클릭 - API


IE7,8,9에서 작은(?) 문제가 있으며, 해결책은 맨아래


 

1. 가장 기본적이라고 생각되며, 가장 강력한 기능 값 바인딩


index.html

  1. <html ng-app>
  2. <head>
  3. ...
  4. <script src="lib/angular/angular.js"></script>
  5. <script src="js/controllers.js"></script>
  6. </head>
  7. <body ng-controller="PhoneListCtrl">
  8.  
  9. <ul>
  10. <li ng-repeat="phone in phones">
  11. {{phone.name}}
  12. <p>{{phone.snippet}}</p>
  13. </li>
  14. </ul>
  15. </body>
  16. </html>



controllers.js

  1. function PhoneListCtrl($scope) {
  2. $scope.phones = [
  3. {"name": "Nexus S",
  4. "snippet": "Fast just got faster with Nexus S."},
  5. {"name": "Motorola XOOM™ with Wi-Fi",
  6. "snippet": "The Next, Next Generation tablet."},
  7. {"name": "MOTOROLA XOOM™",
  8. "snippet": "The Next, Next Generation tablet."}
  9. ];
  10. }



동작 

심플!


<html> 태그에 ng-app 를 추가하여 angular application 이라고 선언해준다.


그리고 컨트롤러가 적용될 태그에 ng-controller="PhoneListCtrl" 를 추가한다.


컨트롤러에 들어갈 값은 controllers.js 에 함수로 정의한 함수명이 그대로 사용된다. 

body가 refresh 등 어떤 이유로 변경되었을 경우에 지정한 컨트롤러가 날아가는데

그걸 방지하기위해 컨트롤러를 html 태그안에 선언해도 된다.



그다음 리스트류를 표현할때

보통 li 를 iteration 하지 않는가.

li 에 다가 ng-repeat="phone in phones" 선언하면

foreach 나 each 처럼 사용이 된다.


 phones 를 $scope에 정의해주면

해당 컨트롤러의 scope 내에서 사용할 수 있다.




2. search


 

index.html

  1. <div class="container-fluid">
  2. <div class="row-fluid">
  3. <div class="span2">
  4. <!--Sidebar content-->
  5.  
  6. Search: <input ng-model="query123">
  7.  
  8. </div>
  9. <div class="span10">
  10. <!--Body content-->
  11.  
  12. <ul class="phones">
  13. <li ng-repeat="phone in phones | filter:query123">
  14. {{phone.name}}
  15. <p>{{phone.snippet}}</p>
  16. </li>
  17. </ul>
  18.  
  19. </div>
  20. </div>
  21. </div>



동작

ng-model="query123" 


이라고 input 에다가 선언을 하였습니다.


그럼 해당 input 에 입력되는 text는 query123 이라는 바인딩변수로 사용 할 수 있습니다.


문서 아무곳이나 <div> {{query123}} </div> 라고 해놓았다면


input 에 글자를 입력되는 순간 저 div 에도 동일하게 해당 text가 나오게 됩니다. 


돌아가서 13라인에 필터라고 선언하고 query123을 지정했습니다.


그러면 글자가 입력되는 순간 해당 li에 모든 텍스트중 동일한 글자가 있는지를 검색하여


동일한 글자가 있는 li만 리스트에 보여주게 됩니다.


완전 멋진 기능을 이렇게 쉽게 사용할 수 있다니 행복합니다.


하지만 10개 20개 가지고 오는 보통 페이징되는 곳에서는 그다지 잘안쓰겠지만


많은양의 리스트가 한번에 보여지게되는 곳에서 잘써먹을거 같습니다.






3. Sort


index.html

  1. Search: <input ng-model="query">

  3. Sort by:
  4. <select ng-model="orderProp">
  5. <option value="name">Alphabetical</option>
  6. <option value="age">Newest</option>
  7. </select>
  8.  
  9.  
  10. <ul class="phones">
  11. <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
  12. {{phone.name}}
  13. <p>{{phone.snippet}}</p>
  14. </li>
  15. </ul>



controllers.js

  1. function PhoneListCtrl($scope) {
  2. $scope.phones = [
  3. {"name": "Nexus S",
  4. "snippet": "Fast just got faster with Nexus S.",
  5. "age": 0},
  6. {"name": "Motorola XOOM™ with Wi-Fi",
  7. "snippet": "The Next, Next Generation tablet.",
  8. "age": 1},
  9. {"name": "MOTOROLA XOOM™",
  10. "snippet": "The Next, Next Generation tablet.",
  11. "age": 2}
  12. ];
  13.  
  14. $scope.orderProp = 'age';
  15. }



동작

이번엔 select 에다가 ng-model 을 선언했습니다.


그러면 선택되는 option 의 value가 model의 값이 됩니다.


그러면 index.html 의 11 라인 orderBy:orderProp"  으로 선언해주면 


해당 리스트는 선택된 orderProp 의 값 name, age 중 하나로 정렬하게 됩니다.


controllers.js에 key 인 name과 age중 하나를 선택하게 됩니다.


14라인에서 값을 'age'로 주고 있습니다.


그러면 select box는 해당 값으로 선택이 되어 있는 상태로 렌더링되고, 리스트도 적용되어 보이게 됩니다.






4. XHR


phones.json

  1. [
  2. {
  3. "age": 13,
  4. "id": "motorola-defy-with-motoblur",
  5. "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
  6. "snippet": "Are you ready for everything life throws your way?"
  7. ...
  8. },
  9. ...
  10. ]


controllers.js

  1. function PhoneListCtrl($scope, $http) {
  2. $http.get('phones/phones.json').success(function(data) {
  3. $scope.phones = data;
  4. });
  5.  
  6. $scope.orderProp = 'age';
  7. }
  8.  
  9. //PhoneListCtrl.$inject = ['$scope', '$http'];



동작

저는 크롬에서만 테스트를 했는데, 크롬보안정책상 로컬에서 파일을 불러다 사용하는 짓이 금지되어있어

로컬서버돌려서 진행하였습니다.

푸는방법이 있다고는 하는데 아무리 해봐도 저는 안풀려서 ㅠㅠ


$http.get 으로 파일을 가져오고 있습니다. 

다른메소드로는

$http.get, $http.head, $http.post, $http.put, $http.delete, $http.jsonp 가 있습니다. API 참조하세요 


그리고 controllers.js 에 주석처리된 놈은 Depedency Injection입니다.

원하면 컨트롤러에 직접 필요한 인자를 집어넣어 줄 수 있습니다.


해주지 않으면 기본으로 저 순서로 들어갑니다.


그리고 controllers.js 라인 3 - data를 


$scope.phones = data.splice(0, 5);


같이 원하는만큼만 넣으셔도됩니다.


계속 됩니다.




※ IE 에서 바인딩이 되지 않고, 그대로 {{name}} 이 나올 때,JSON.strigify 가 안되거나, 

     등등의 문제를 위한 작은 해결책


1. doctype이 저렇게 되어있지않다면 바꿔보세요.

<!doctype html>


2.

<html lang="en" class="ng-app:myapp" id="ng-app" ng-app="myapp" xmlns:ng="http://angularjs.org">

     <head>    

        <!--[if lt IE 9]>

          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

        <![endif]-->

        <!--[if lte IE 8]>

          <script>

            document.createElement('ng-include');

            document.createElement('ng-pluralize');

            document.createElement('ng-view');

            document.createElement('ng:include');

            document.createElement('ng:pluralize');

            document.createElement('ng:view');

          </script>

        <![endif]-->

        <!--[if lt IE 8]>

          <script src="js/json2.js"></script>

        <![endif]-->

      </head>

 

728x90
저작자표시 비영리 변경금지

'AngularJS' 카테고리의 다른 글

[AngularJS]앵귤러 JS  (0) 2013.03.22
Posted by 정망스
,
맨 위로
홈으로 ▲위로 ▼아래로 ♥댓글쓰기 새로고침

티스토리툴바