It's so contagious: [시작하세요! AngularJS 프로그래밍] 02. AngularJS 살펴보기

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

결국 찾아서 해결. http://blog.naver.com/hico1229/220192778689

02 AngularJS 시작하기 잘 정리된 곳
http://horajjan.blog.me/110190218049
 


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
It's so contagious

태그

2015년 4월 5일 일요일

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

댓글 없음:

댓글 쓰기

태그

Translate

블로그 보관함

프로필
