태그

2015년 4월 6일 월요일

[시작하세요! AngularJS 프로그래밍] 03. AngularJS 부트스트랩, 04. 템플릿 시스템과 데이터 바인딩

03. AngularJS 부트스트랩 내용

http://horajjan.blog.me/110190250447


04. 템플릿 시스템과 데이터 바인딩

http://horajjan.blog.me/110190251856


정리한 블로그들이 있으니 참고하기도 편하군 ㅋ.
4장이 생각보다 분량이 많았다. 코딩 삽질도 많이하고... ㅎ

AngularJS의 템플릿
  • <예제 2.4> AngularJS의 템플릿 예제 코드
JS Bin

이중 중괄호와 AngularJS 표현식
  • <예제 2.5> 다양한 AngularJS의 표현식 예제 코드
JS Bin

데이터 바인딩의 이해
  • <예제 2.7> 양방향 데이터 바인딩 예제 코드
JS Bin

반복적인 데이터 표현을 위한 템플릿(반복 지시자)
  • <예제 2.8> ng-repeat 예제 코드
JS Bin

조건적인 데이터 표현을 위한 템플릿(조건 지시자)
  • <예제 2.9> ng-switch 예제코드
  • <예제 2.10 2.11> ng-if, ng-show/ng-hide 예제 코드
JS Bin

JS Bin

비지니스 로직 처리를 위한 템플릿(컨트롤러 지시자)
  • <예제 2.12> ng-controller 사용 예제 코드
JS Bin

폼과 유효성 검사를 위한 템플릿(폼/입력 지시자)
  • <예제 2.13> 텍스트 타입의 <input> 태그 예제 코드
  • <예제 2.14>체크박스 타입의 <input>요소 예제 코드
  • <예제 2.15><select> 요소 사용 예제
  • <예제 2.16> CSS 클래스를 이용한 유효성 검증 결과 예제 코드
JS Bin

JS Bin

JS Bin

JS Bin

이벤트 처리를 위한 템플릿(이벤트 처리 지시자
  • <예재 2.17> 이벤트 지시자 사용 예제
JS Bin

CSS 클래스/스타일을 동적으로 처리하기 위한 템플릿 (클래스 지시자/스타일 지시자)
  • <예제 2.18> ng-class 사용 예제
  • <예제 2.19> ng-style 사용 예제
JS Bin

JS Bin




근데 네이버는 왜 보안 어쩌고 저쩌고 하면서 iframe, script, embed 같은 걸 사용을 못하냐. Damn!

작성자: 시간: 댓글 없음:
라벨:

2015년 4월 5일 일요일

[시작하세요! AngularJS 프로그래밍] 02. AngularJS 살펴보기 

저자가 제공한 소스는 1.2버전이여서 최신버전을 받아 책에있는거 그대로 하고있는데 계속 결과가 안나왔다. 계속 삽질 끝에 쌍욕이나오다가... 알아보니 버전이 올라가면서 컨트롤러를 독립적으로 사용할 수 없다고 한다. 


  • 02 AngularJS 시작하기 잘 정리된 곳
 


AngularJS TODO APP 예제



  • 컨트롤러를 이용한 뷰 조작


 ​​ index.html
 
<!DOCTYPE html>
<html ng-app="todoApp"> 
<head>
  <meta charset="UTF-8">
  <title>TODO App Demo</title>
  <script src="//code.jquery.com/jquery.min.js"></script>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <script src="app.js"></script>
</head>
 
<body class="well"  ng-controller="todoCtrl">
  <h1>{{appName}}</h1>




</body>
</html>
 
  app.js
 ​
var todoApp = angular.module('todoApp', []);

todoApp.controller('todoCtrl', function ($scope){
 $scope.appName = "AngularJS TODO APP";

});


 


  • <예제 1.6> 할 일 목록을 동적으로 출력하도록 수정한 index.html 코드의일부와 가상의 데이터가 있는 app.js 코드

  index.html
 
 

<body class="well"  ng-controller="todoCtrl">
  <h1>{{appName}}</h1>
  <p>전체 할 일 <strong>2</strong>개 / 남은 할일은 <strong>1</strong>개
  [<a href="">보관하기</a> ]</p>
  <ul class="list-unstyled">
    <li ng-repeat="todo in todoList" class="checkbox">
      <input type="checkbox" ng-model="todo.done">{{todo.title}}
    </li>
  </ul>
  <ul class="list-unstyled">
    <li class="checkbox"><input type="checkbox">AngularJS 독서</li>
    <li class="checkbox"><input type="checkbox">개인 프로젝트 구성</li>
  </ul>


</body>
</html>


  app.js
 ​
var todoApp = angular.module('todoApp', []);


var todoList = [{done : true, title : "AngularJS 독서"},
  {done : false, title : "AngularJS 공부하기"},
  {done : false, title : "개인 프로젝트 구성"}
];


todoApp.controller('todoCtrl', function ($scope){
 $scope.appName = "AngularJS TODO APP";
 $scope.todoList = todoList;
});
 


 
 
  • <예제 1.7>새로운 할 일을 추가하는 코드
 index.jsp

<body class="well"  ng-controller="todoCtrl">
  <h1>{{appName}}</h1>
  <p>전체 할 일 <strong>2</strong>개 / 남은 할일은 <strong>1</strong>개
  [<a href="">보관하기</a> ]</p>
  <ul class="list-unstyled">
    <li ng-repeat="todo in todoList" class="checkbox">
      <input type="checkbox" ng-model="todo.done">{{todo.title}}
    </li>
  </ul>
  <ul class="list-unstyled">
    <li class="checkbox"><input type="checkbox">AngularJS 독서</li>
    <li class="checkbox"><input type="checkbox">개인 프로젝트 구성</li>
  </ul>
  <form name="newItemForm" class="form-inline" action"">
    <div class="form-group">
      <label class="sr-only" for="newItemText">새로운 할 일</label>
      <input type="text" class="form-control" name="newItemText" placeholder="새로운 할 일" ng-model="newTitle">
    </div>
    <button type="submit" class="btn btn-default" ng-click="addNewTodo(newTitle)">추가</button>
  </form>


</body>
</html>
 
  app.js


todoApp.controller('todoCtrl', function ($scope){
 $scope.appName = "AngularJS TODO APP";
 $scope.todoList = todoList;
 
 $scope.addNewTodo = function(newTitle) {
   todoList.push({done:false, title:newTitle});
   $scope.newTitle='';
 };


});
 
 


 
  • <예제 1.8> archive 함수를 추가한 todoCtrl 컨트롤러(완료시 삭제)
 index.jsp
 


<body class="well"  ng-controller="todoCtrl">
  <h1>{{appName}}</h1>
  <p>전체 할 일 <strong>2</strong>개 / 남은 할일은 <strong>1</strong>개
  [<a href="" ng-click="archive()">보관하기</a> ]</p>
  <ul class="list-unstyled">
    <li ng-repeat="todo in todoList" class="checkbox">
      <input type="checkbox" ng-model="todo.done">{{todo.title}}
    </li>
  </ul>
 
  app.js

todoApp.controller('todoCtrl', function ($scope){
 $scope.appName = "AngularJS TODO APP";
 $scope.todoList = todoList;
 
 $scope.addNewTodo = function(newTitle) {
   todoList.push({done:false, title:newTitle});
   $scope.newTitle='';
 };
 
 $scope.archive = function(){
   for(var i = $scope.todoList.length - 1; i>=0; i--){
     if($scope.todoList[i].done){
       $scope.todoList.splice(i,1);
     }
   }
 };


});
 
 


 
  • <예제 1.9> 남은 할 일의 개수를 구하는 remain 함수
 index.jsp

<body class="well"  ng-controller="todoCtrl">
  <h1>{{appName}}</h1>
  <p>전체 할 일 <strong>{{todoList.length}}</strong>개 /
  남은 할일은 <strong>{{remain()}}</strong>개
  [<a href="" ng-click="archive()">보관하기</a> ]</p>
  <ul class="list-unstyled">
    <li ng-repeat="todo in todoList" class="checkbox">
      <input type="checkbox" ng-model="todo.done">{{todo.title}}
    </li>
  </ul>
 
  app.js
 
.....


 

todoApp.controller('todoCtrl', function ($scope){
 $scope.appName = "AngularJS TODO APP";
 $scope.todoList = todoList;
 
 $scope.addNewTodo = function(newTitle) {
   todoList.push({done:false, title:newTitle});
   $scope.newTitle='';
 };
 
 $scope.archive = function(){
   for(var i = $scope.todoList.length - 1; i>=0; i--){
     if($scope.todoList[i].done){
       $scope.todoList.splice(i,1);
     }
   }
 };
 
 $scope.remain = function(){
   var remainCount = 0;
   angular.forEach($scope.todoList, function(value, key){
     if(value.done === false){
       remainCount++;
     }
   });
   return remainCount;
 };


});
 
 


 
  • 최종 index.html, app.js
 index.html

<!DOCTYPE html>
<html ng-app="todoApp"> <!--ng-app="todoApp"-->
<head>
  <meta charset="UTF-8">
  <title>TODO App Demo</title>
  <script src="//code.jquery.com/jquery.min.js"></script>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <script src="app.js"></script>
</head>
 
<body class="well"  ng-controller="todoCtrl"> <!--ng-controller="todoCtrl"-->
  <h1>{{appName}}</h1>
  <p>전체 할 일 <strong>{{todoList.length}}</strong>개 /
  남은 할일은 <strong>{{remain()}}</strong>개
  [<a href="" ng-click="archive()">보관하기</a> ]</p> <!--ng-click="archive()"-->
  <ul class="list-unstyled">
    <li ng-repeat="todo in todoList" class="checkbox">
      <input type="checkbox" ng-model="todo.done">{{todo.title}} <!--ng-model="todo.done">{{todo.title}}-->
    </li>
  </ul>
  <ul class="list-unstyled">
    <li class="checkbox"><input type="checkbox">AngularJS 독서</li>
    <li class="checkbox"><input type="checkbox">개인 프로젝트 구성</li>
  </ul>
  <form name="newItemForm" class="form-inline" action"">
    <div class="form-group">
      <label class="sr-only" for="newItemText">새로운 할 일</label>
      <input type="text" class="form-control" name="newItemText" placeholder="새로운 할 일" ng-model="newTitle">
    </div>
    <button type="submit" class="btn btn-default" ng-click="addNewTodo(newTitle)">추가</button>
  </form>


</body>
</html>
 app.js
 
var todoApp = angular.module('todoApp', []);


var todoList = [
  {done : true, title : "AngularJS 독서"},
  {done : false, title : "AngularJS 공부하기"},
  {done : false, title : "개인 프로젝트 구성"}
];


todoApp.controller('todoCtrl', function ($scope){
 $scope.appName = "AngularJS TODO APP";
 //초기 할 일 목록 설정
 $scope.todoList = todoList;
 //새로운 할 일 추가
 $scope.addNewTodo = function(newTitle) {
   todoList.push({done:false, title:newTitle});
   $scope.newTitle='';
 };
 //완료한 일 삭제
 $scope.archive = function(){
   for(var i = $scope.todoList.length - 1; i>=0; i--){
     if($scope.todoList[i].done){
       $scope.todoList.splice(i,1);
     }
   }
 };
 //남은 할 일 수 계산
 $scope.remain = function(){
   var remainCount = 0;
   angular.forEach($scope.todoList, function(value, key){
     if(value.done === false){
       remainCount++;
     }
   });
   return remainCount;
 };


});
 


  • 실행 해보기
JS Bin
작성자: 시간: 댓글 없음:
라벨:
피드 구독하기: 글 (Atom)