angular js & ionic framework [tutorial] AngularJS 튜토리얼 - 1

2017.01.29 22:06

졸리운_곰 조회 수:357

 

[tutorial] AngularJS 튜토리얼 - 1

 

 

AngularJS

 

Angular 튜토리얼을 그냥 하나씩 진행하겠습니다.  Jasmine 은 패스 

 

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

 

역시나 IE는 쓰레기, 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 에 다가 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만 리스트에 보여주게 됩니다.

 

만약 phone.name 이나, phone.snippet 어느 하나에만 적용하고 싶을때는 

 

ng-model = "query123.name"  이나 query123.snippet 으로 해주시고 필터에는 그냥 query123 그대로 주면

 

해당 값에만 필터가 걸립니다.

 

만약 10개중 2개에서만 필터를 하고 싶을경우는

 

해당 controller.js 에

 

 $scope.queryFilter = function(list){

      return list.name.toLowerCase().search($scope.query) != -1

             || list.snippet.toLowerCase().search($scope.query) != -1;

  }

 

아래와 같이 합니다. 대소문자 구분을 짓고싶으면 toLowerCase 를 빼면되겠죠

 

 

 

 

 

3. Sort

 

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

index.html

 

  1. Search: <input ng-model="query">
  2.  
  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>

 

 


[출처] http://winmargo.tistory.com/188

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
이 게시물을
목록
목록
번호 제목 글쓴이 날짜 조회 수
20 [nest.js] [NestJS] NestJS 구조 이해를 위한 필수 개념 정리 - Node.js/TypeScript/Express 비교 포함 file 졸리운_곰 2025.12.12 501
19 [node.js 개발] Apache Reverse Proxy 설정(아파치와 노드 연동) file 졸리운_곰 2024.03.17 300
18 [node.js 개발] PM2로 Node.js 앱 프로세스 배포하기 file 졸리운_곰 2024.03.16 405
17 [node.js 개발] PM2를 활용한 Node.js 무중단 서비스하기 file 졸리운_곰 2024.03.16 517
16 [node.js 응용] Next.js : Next.js14에 Mysql연결하기 졸리운_곰 2024.03.03 379
15 [node.js 응용] Node.js에서 다른 파일의 함수를 "include" 하는 방법 졸리운_곰 2024.02.28 428
14 [node.js 응용] NodeJS 에서 mqtt 사용하기 file 졸리운_곰 2024.02.23 399
13 [node.js 응용] Next.js 기본 개념정리 file 졸리운_곰 2024.02.23 432
12 [node.js 응용] ejs 사용설명서 file 졸리운_곰 2023.11.25 371
11 [node.js 응용] Build a Node.js Proxy Server in Under 10 minutes! file 졸리운_곰 2023.05.07 468
10 [node.js 응용] node - pm2로 node.js 프로세스 관리하기 - 기본 명령어, 실행하기 file 졸리운_곰 2023.04.25 408
9 [node.js 응용] Node.js | MySQL과 연동(mysql모듈) - CRUD 2/2 졸리운_곰 2023.03.31 231
8 [node.js 응용] Node.js | MySQL과 연동(mysql모듈) - CRUD 1/2 file 졸리운_곰 2023.03.31 484
7 [node.js 응용] PM2 - Node.js 프로세스 관리 도구 file 졸리운_곰 2021.12.10 410
6 [node.js][nodejs] [Linux] 리눅스 내 Node.js 및 NPM 최신 버전으로 유지하기 file 졸리운_곰 2021.10.11 484
5 [node.js][typescript] 5분 안에 보는 TypeScript file 졸리운_곰 2021.07.03 428
4 Getting started with RabbitMQ and Node.js file 졸리운_곰 2019.05.09 466
3 [Node.js + RabbitMQ] Node.js + socket.io + RabbitMQ 이용한 실시간 메시지 처리 file 졸리운_곰 2019.05.09 352
2 node.js 서버 장애시 자동 재시작 설정 [forever 사용] 졸리운_곰 2019.01.24 884
1 Express 앱용 프로세스 관리자 졸리운_곰 2018.10.16 604
쓰기
태그
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED