AngularJS의 TodoMVC 분석 연구 노트_AngularJS

최근 AngularJS를 보고 있는데 잠시 정리해보겠습니다.

공식 홈페이지 주소: http://angularjs.org/

우선 몇 가지 튜토리얼을 추천해 주세요

1. AngularJS 시작하기 튜토리얼 비교적 기본적이고 공식 튜토리얼을 번역한 것입니다.

2. AngularJS 초보자부터 전문가까지 7단계로 진행됩니다. 또한 비교적 기초적인 온라인 음악 재생 웹사이트를 만들었습니다.

3. AngularJS 개발 가이드 이 튜토리얼은 비교적 포괄적이지만 번역이 약간 모호한 것 같습니다.

이 튜토리얼을 읽고 나면 AngularJS에 대해 조금 이해하게 되었고, 이를 활용하여 AngularJS로 작성된 todomvc를 분석해 보고 싶습니다.

Todomvc 공식 홈페이지 주소 : http://todomvc.com/

프로젝트 디렉토리는 다음과 같습니다.

bower_comComponents에는 두 개의 폴더가 있습니다. angle 폴더는angular.js 파일을 저장하는 데 사용됩니다. todomvc-common 폴더에는 모든 할일 프로젝트에 대한 통합 CSSJ가 포함되어 있습니다(왼쪽 콘텐츠를 생성하는 데만 사용되며 관련 없음). 프로젝트) 및 사진.

js 폴더는 해당 컨트롤러(controller) 지시문(명령) 서비스(service)와 app.js가 포함된 큰 헤더입니다.

테스트 폴더에는 테스트용 코드가 포함되어 있으며 분석되지 않습니다.

index.html은 프로젝트 보기 페이지입니다.

먼저 app.js를 살펴보겠습니다

코드 복사 코드는 다음과 같습니다.

/*전역 각도 */
/*jshint 사용하지 않음:false */
'엄격한 사용';
/**
 * 주요 TodoMVC 앱 모듈
 *
 * @type {angular.Module}
 */
var todomvc = angle.module('todomvc', []);

domvc에 대한 모듈을 정의합니다

services 아래의 todoStorage.js를 다시 살펴보세요

코드 복사 코드는 다음과 같습니다.

/*전역 todomvc */
'엄격한 사용';
/**
 * localStorage에서 TODO를 유지하고 검색하는 서비스
 */
todomvc.factory('todoStorage', function () {
// todos JSON 문자열 저장소의 고유 식별자
var STORAGE_ID = 'todos-angularjs';
복귀 {
​​​​ // localStorage에서 할 일을 가져와서 JSON 객체로 구문 분석합니다
          get: 함수 () {
                return JSON.parse(localStorage.getItem(STORAGE_ID) || '[]');
},
// todos 객체를 JSON 문자열로 변환하여 localStorage에 저장합니다
Put: 함수(todos) {
​​​​​​localStorage.setItem(STORAGE_ID, JSON.stringify(todos));
}
};
});

todoStorage의 서비스 메소드는 팩토리 메소드를 사용하여 생성됩니다. 이 서비스 메소드의 핵심은 JSON2와 HTML5의 기능을 사용하는 get 및 put 두 가지 메소드를 반환하는 것입니다. get은 localStorage에서 할 일의 내용을 가져와서 JSON으로 구문 분석하고, put은 할 일을 JSON 문자열로 변환하여 localStorage에 저장합니다.

directives 아래에 있는 두 명령 파일을 다시 살펴보세요.

todoFocus.js

코드 복사 코드는 다음과 같습니다.

/*전역 todomvc */
'엄격한 사용';
/**
 * 바인딩된 표현식이 true로 평가될 때 적용되는 요소에 초점을 맞추는 지시문
 */
todomvc.directive('todoFocus', 함수 todoFocus($timeout) {
반환 함수(scope, elem, attrs) {
​​​​ // todoFocus 속성 값에 대한 리스너를 추가합니다
scope.$watch(attrs.todoFocus, 함수(newVal) {
                if (newVal) {
                    $timeout(함수 () {
                      elem[0].focus();
                 }, 0, 거짓);
            }
        });
};
});

함수에 반환되는 매개변수 중 elem은 명령어의 요소를 담고 있는 배열이고, attrs는 해당 요소의 모든 속성과 속성명으로 구성된 객체입니다.

두 가지 AngularJS 메서드가 사용됩니다

$watch(watchExpression, Listener, objectEquality)는 리스너 콜백을 등록합니다. watchExpression이 변경될 때마다 리스너 콜백이 실행됩니다.

$timeout(fn[,lay][,invokeApply]) timeout 값에 도달하면 fn 함수를 실행합니다.

todoFocus.js는 todoFocus 지시어를 생성합니다. 요소에 todoFocus 속성이 있는 경우 이 명령은 요소의 todoFocus 속성 값에 리스너를 추가합니다. todoFocus 속성 값이 true로 변경되면 $timeout(function () {elem[0].focus(); }, 0, false); 지연 시간이 0초이므로 elem[0].focus()가 즉시 실행됩니다.

todoEscape.js

코드 복사 코드는 다음과 같습니다.

/*전역 todomvc */
'엄격한 사용';
/**
 * 해당 요소가 적용될 때 표현식을 실행하는 지시문
 * `escape` 키다운 이벤트.
 */
todomvc.directive('todoEscape', function () {
var ESCAPE_KEY = 27;
반환 함수(scope, elem, attrs) {
          elem.bind('keydown', 함수(이벤트) {
If (event.keyCode === ESCAPE_KEY) {
scope.$apply(attrs.todoEscape);
            }
        });
};
});

todoEscape.js는 todoEscape 지시문을 생성합니다. Escape 키를 누르면 attrs.todoEscape 표현식이 실행됩니다.

controllers 폴더에 있는 todoCtrl.js 헤더를 보세요. 파일이 좀 길어서 그냥 댓글을 썼습니다.

코드 복사 코드는 다음과 같습니다.

/*전역 todomvc, 각도 */
'엄격한 사용';
/**
 * 앱의 메인 컨트롤러입니다. 컨트롤러:
 * - todoStorage 서비스를 통해 모델을 검색하고 유지합니다
 * - 모델을 템플릿에 노출하고 이벤트 핸들러를 제공합니다
 */
todomvc.controller('TodoCtrl', function TodoCtrl($scope, $location, todoStorage, filterFilter) {
    // 从localStorage中获取all
    var todos = $scope.todos = todoStorage.get();

// 새로운 할 일 기록
$scope.newTodo = '';
// 편집된 할 일을 기록합니다
$scope.editedTodo = null;
// todos 값이 변경되면 메소드 실행
$scope.$watch('todos', 함수 (newValue, oldValue) {
​​​​ // 완료되지 않은 할일 개수를 가져옵니다
           $scope.remainingCount = filterFilter(todos, { done: false }).length;
​​​​ // 완료된 할 일 수를 가져옵니다
           $scope.completedCount = todos.length - $scope.remainingCount;
// $scope.remainingCount가 0인 경우에만 $scope.allChecked는 true입니다
          $scope.allChecked = !$scope.remainingCount;
// todos의 새 값이 이전 값과 같지 않으면 todos
를 localStorage에 저장합니다. If (newValue !== oldValue) { // 이는 로컬 저장소에 대한 불필요한 호출을 방지합니다
             todoStorage.put(todos);
}
}, 사실);
If ($location.path() === '') {
​​​​ //$location.path()가 비어 있으면 /
로 설정하세요.           $location.path('/');
}
$scope.location = $location;
// location.path() 값이 변경되면 메소드 실행
$scope.$watch('location.path()', 함수(경로) {
​​​​ // 상태 필터 가져오기
// 경로가 '/active'이면 필터는 {completed: false }
입니다. // 경로가 '/completed'인 경우 필터는 {completed: true }
입니다. ​​​​ // 그렇지 않으면 필터는 null입니다
           $scope.statusFilter = (경로 === '/active') ?
{ 완료: 거짓 } : (경로 === '/완료') ?
                     { 완료됨: true } : null;
});
// 새 할일 추가
$scope.addTodo = 함수 () {
      var newTodo = $scope.newTodo.trim();
If (!newTodo.length) {
             반품;
}
​​​​ // todos에 todo를 추가하고, 완성된 속성의 기본값은 false입니다
         todos.push({
               제목: newTodo,
완료: 거짓
        });
                                        // 비워 둡니다
           $scope.newTodo = '';
};
//할 일 편집
$scope.editTodo = 함수(todo) {
           $scope.editedTodo = 할 일;
                // 요청 시 복원하려면 원래 할 일을 복제하세요.
                  // 편집 재개를 준비하기 위해 편집하기 전에 할 일을 저장
           $scope.originalTodo = angle.extend({}, todo);
};
// 할 일 수정 완료
$scope.doneEditing = 함수(todo) {
                                        // 비워 둡니다
          $scope.editedTodo = null;
         todo.title = todo.title.trim();
If (!todo.title) {
                                            // 할 일 제목이 비어 있으면 해당 할 일을 삭제하세요
               $scope.removeTodo(todo);
}
};
//편집하기 전에 할일을 복원하세요
$scope.revertEditing = 함수(todo) {
         todos[todos.indexOf(todo)] = $scope.originalTodo;
          $scope.doneEditing($scope.originalTodo);
};
// 할 일 제거
$scope.removeTodo = 함수(todo) {
         todos.splice(todos.indexOf(todo), 1);
};
// 완료된 할일 지우기
$scope.clearCompletedTodos = 함수 () {
$scope.todos = todos = todos.filter(함수 (val) {
               return !val.completed;
        });
};
// 모든 할 일의 상태를 표시합니다(true 또는 false)
$scope.markAll = 기능 (완료) {
         todos.forEach(함수(todo) {
              todo.completed = 완료됨;
        });
};
})

마지막으로 index.html을 살펴보고 이 파일을 섹션별로 분석해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

   
       
       
       
       
       
   
   
       

           

               

todos

               

                   
               

           

           

               
                Mark all as complete
               

                   
• 
                         
  
                             
                              {{todo.title}}
                             
                         
  
                         
  
                             
                         
                     
                 
             
             

  
                  {{remainingCount}}
                     
                 
                 

  
                     
  • 
                            모두
                       
  
                     
  • 
                            활성
                       
  
                     
  • 
                            완료됨
                       
  
                 
                  완료된 항목 지우기({{completedCount}})
             
         
         
  
             

  할 일을 편집하려면 두 번 클릭하세요

  
             

  크레딧:
                  Christoph">http://twitter.com/cburgdorf">크리스토프 부르그도르프,
                  Eric">http://ericbidelman.com">Eric Bidelman,
                  Jacob">http://jacobmumm.com">제이콥 엄마 그리고
                  Igor">http://igorminar.com">이고르 미나르
             
             

  TodoMVChttp://todomvc.com">TodoMVC>
  의 일부