나는 최근에 Angularjs를 한동안보고 있었고, 어느 때에 그것을 요약 할 것입니다.
공식 웹 사이트 주소 : http://angularjs.org/
먼저 몇 가지 튜토리얼을 권장합니다
1. AngularJS 소개 자습서는 비교적 기본이며 공식 자습서의 번역입니다.
2. AngularJS 초보자에서 전문가까지 7 단계도 비교적 기본적이며 온라인 음악 재생 웹 사이트가 만들어졌습니다.
3. AngularJS 개발 가이드 튜토리얼은 매우 포괄적이지만 번역은 약간 모호하고 이해하기 어렵다고 생각합니다.
이 튜토리얼을 읽은 후 AngularJS도 조금 알고 있다고 느꼈기 때문에 무언가를하고 싶었 기 때문에 AngularJS가 작성한 todomvc를 분석했습니다.
todomvc 공식 웹 사이트 주소 : http://todomvc.com/
프로젝트 디렉토리는 다음과 같습니다.
bower_components에는 두 개의 폴더가 있으며, 그중에 Angular 폴더는 Angular.js 파일과 동일합니다. TODOMVC-Common 폴더에는 모든 TODO 프로젝트의 통합 CSS/JS (왼쪽 컨텐츠를 생성하고 프로젝트와 관련이없는) 및 사진이 포함되어 있습니다.
JS 폴더는 큰 헤더이며 해당 컨트롤러 (컨트롤러)/지시 (명령어)/서비스 (서비스) 및 app.js가 내부에 배치됩니다.
테스트 폴더에는 테스트 코드가 포함되어 있으며 분석하지 않습니다.
index.html은 프로젝트보기 페이지입니다.
app.js를 살펴 보겠습니다
코드 사본은 다음과 같습니다.
/ *글로벌 각도 */
/ *jshint 미사용 : False */
'엄격한 사용';
/**
* 메인 TODOMVC 앱 모듈
*
* @type {Angular.Module}
*/
var todomvc = angular.module ( 'todomvc', []);
모듈 todomvc를 정의합니다
서비스에서 Todostorage.js를 살펴보십시오
코드 사본은 다음과 같습니다.
/ *글로벌 todomvc */
'엄격한 사용';
/**
* 현지 스토리지에서 토도를 지속하고 검색하는 서비스
*/
todomvc.factory ( 'todostorage', function () {
// JSON 문자열 스토리지의 고유 식별자
var stoage_id = 'todos-angularjs';
반품 {
// LocalStorage에서 Todos를 꺼내 JSON 개체에 구문 분석하십시오.
get : function () {
return JSON.PARSE (localStorage.getItem (Storage_id) || '[]');
},
// TODOS 객체를 JSON 문자열로 변환하여 LocalStorage에 보관하십시오.
put : function (todos) {
localStorage.setItem (standing_id, json.stringify (todos));
}
};
});
Todostorage 서비스 방법은 공장 방법을 사용하여 작성됩니다. 이 서비스 방법의 본질은 두 가지 방법을 반환하는 것입니다. 둘 다 JSON2 및 HTML5의 특징을 사용합니다. Get Get Get Get Get은 LocalStorage에서 Todos의 내용을 가져 와서 JSON으로 구문 분석하고 Todos를 JSON 스트링에 넣고 LocalStorage에 저장합니다.
아래 두 가지 명령 파일을 살펴 보겠습니다.
Todofocus.js
코드 사본은 다음과 같습니다.
/ *글로벌 todomvc */
'엄격한 사용';
/**
* 지시 사항은 요소에 초점을 맞추는 표현이 적용되는 요소에 적용되는 요소에 적용되는 요소에 중점을 둡니다.
*/
todomvc.directive ( 'todofocus', function todofocus ($ timeout) {
반환 기능 (스코프, elem, attrs) {
// Todofocus 속성의 가치 듣기 추가
스코프. $ watch (attrs.todofocus, function (newval) {
if (newval) {
$ timeout (function () {
elem [0] .focus ();
}, 0, false);
}
});
};
});
매개 변수 반환 함수에서 Elem은 명령어를 포함하는 요소 배열이며, attrs는 요소의 모든 속성, 속성 이름 등으로 구성된 객체입니다.
두 가지 AngularJS 방법이 사용됩니다
$ watch (WatchExpression, 리스너, Objectequality) 리스너 콜백을 등록하십시오. WatchExpression이 변경 될 때마다 리스너 콜백이 실행됩니다.
$ timeout (fn [, delay] [, invokeapply]) 시간 초과 값에 도달하면 FN 함수가 실행됩니다.
Todofocus.js는 Todofocus 지침을 만듭니다. 요소에 Todofocus 속성이있는 경우, 지침은 요소의 Todofocus 속성의 값에 대한 리스너를 추가합니다. Todofocus 속성의 값이 true로 변경되면 $ timeout (function () {elem [0] .focus ();}, 0, false); 지연 시간은 0 초이므로 Elem [0] .focus ()가 즉시 실행됩니다.
Todoescape.js
코드 사본은 다음과 같습니다.
/ *글로벌 todomvc */
'엄격한 사용';
/**
* 적용되는 요소가 얻을 때 표현식을 실행하는 지침
* '탈출'키 다운 이벤트.
*/
todomvc.directive ( 'todoescape', function () {
var Escape_key = 27;
반환 기능 (스코프, elem, attrs) {
elem.bind ( 'keydown', function (event) {
if (event.keyCode === 탈출 _key) {
범위. $ apply (atts.todoescape);
}
});
};
});
Todoescape.js는 Todoescape 지시문을 만듭니다. 탈출 키를 누르면 Atts.todoescape의 표현이 실행됩니다.
컨트롤러 폴더의 큰 헤드 인 Todoctrl.js를 살펴보십시오. 이 파일은 조금 길어서 댓글을 썼습니다.
코드 사본은 다음과 같습니다.
/ *Global todomvc, Angular */
'엄격한 사용';
/**
* 앱의 기본 컨트롤러. 컨트롤러 :
* - Todostorage 서비스를 통해 모델을 검색하고 유지합니다.
* - 모델을 템플릿에 노출시키고 이벤트 처리기를 제공합니다.
*/
todomvc.controller ( 'todoctrl', function todoctrl ($ scope, $ location, todostorage, filterfilter) {
// LocalStorage에서 Todos를받습니다
var todos = $ scope.todos = todostorage.get ();
// 새로운 TODO를 기록합니다
$ scope.newtodo = '';
// 레코드 편집 TODO
$ scope.editedTodo = null;
// TODOS 값이 변경 될 때 메소드를 실행합니다.
$ scope. $ watch ( 'todos', function (newValue, OldValue) {
// 미완성 된 Todos의 수를 얻습니다
$ SCOPE.REMAININGCOUNT = FILTERFILTER (TODOS, {완성 : FALSE}). 길이;
// 완성 된 Todos 수를 얻습니다
$ SCOPE.COMPLETEDCOUNT = TODOS.LENGTH- $ SCOPE.REMAININGCOUNT;
// $ scope.AllChecked는 $ scope.remainingCount이 0 인 경우에만 true입니다.
$ SCOPE.ALLCHECKED =! $ SCOPE.REMAININGCOUNT;
// Todos의 새로운 값과 이전 값이 같지 않은 경우 Todos를 LocalStorage에 저장하십시오.
if (newValue! == OldValue) {// 로컬 스토리지에 대한 불필요한 호출을 방지합니다.
Todostorage.put (Todos);
}
}, 진실);
if ($ location.path () === '') {
// $ location.path ()가 비어있는 경우 /
$ location.path ( '/');
}
$ scope.location = $ 위치;
// location.path ()의 값이 변경 될 때 메소드를 실행합니다.
$ scope. $ watch ( 'location.path ()', function (path) {
// 상태 필터를 가져옵니다
// 경로가 '/active'인 경우 필터가 {완성 : false}입니다.
// 경로가 '/완성'인 경우 필터가 {완성 : true}입니다.
// 그렇지 않으면 필터가 null입니다
$ scope.statusfilter = (path === '/active')?
{완료 : false} : (path === '/완료')?
{완료 : true} : null;
});
// 새로운 TODO를 추가합니다
$ scope.addtodo = function () {
var newtodo = $ scope.newtodo.trim ();
if (! newtodo.length) {
반품;
}
// TODOS에 TODO 추가, 완성 된 속성 기본값은 False에 기본값을 추가합니다.
todos.push ({
제목 : Newtodo,
완료 : 거짓
});
// 비어 있는
$ scope.newtodo = '';
};
// TODO를 편집합니다
$ scope.edittodo = function (todo) {
$ scope.editedTodo = todo;
// 원래 할 일을 복제하여 요청시 복원하십시오.
// 편집하기 전에 TODO를 저장하고 편집 복원 준비 준비
$ scope.originalTodo = Angular.extend ({}, todo);
};
// 완료하려면 TODO를 편집합니다
$ SCOPE.DONEEDITING = function (todo) {
// 비어 있는
$ scope.editedTodo = null;
todo.title = todo.title.trim ();
if (! todo.title) {
// TODO의 제목이 비어 있으면 TODO를 제거하십시오.
$ SCOPE.REMOVETODO (TODO);
}
};
// 편집하기 전에 TODO를 복원합니다
$ scope.revertediting = function (todo) {
todos [todos.indexof (todo)] = $ scope.originaltodo;
$ scope.doneediting ($ scope.originaltodo);
};
// TODO를 제거합니다
$ scope.removetodo = function (todo) {
Todos.splice (todos.indexof (todo), 1);
};
// 완성 된 TODOS를 정리하십시오
$ scope.clearCompletedTodos = function () {
$ scope.todos = todos = todos.filter (function (val) {
반품! val.completed;
});
};
// 모든 todo 상태를 표시 (참 또는 거짓)
$ scope.markall = function (완료) {
todos.foreach (function (todo) {
todo.completed = 완료;
});
};
});
마지막 으로이 파일에 대한 분석 인 Index.html을 하나씩 살펴 보겠습니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html lang = "en"ng-app = "todomvc"data-framework = "angularjs">
<헤드>
<meta charset = "utf-8">
<meta http-equiv = "x-ua 호환"컨텐츠 = "ie = edge">
<title> angularjs • todomvc </title>
<link rel = "Stylesheet"href = "bower_components/todomvc-common/base.css">
<style> [ng-cloak] {디스플레이 : 없음; } </style>
</head>
<body>
<섹션 id = "todoapp"ng-controller = "todoctrl">
<헤더 id = "헤더">
<H1> TODOS </h1>
<form id = "todo-form"ng-submit = "addtodo ()">
<입력 ID = "New-Todo"자리 표시 자 = "무엇을해야합니까?" ng-model = "newtodo"autofocus>
</form>
</헤더>
<섹션 id = "main"ng-show = "todos.length"ng-cloak>
<input id = "toggle-all"type = "checkbox"ng-model = "allchecked"ng-click = "markall (allchecked)">
<label for = "Toggle-All"> 모든 것을 완료 </label>로 표시하십시오
<ul id = "todo-list">
<li ng-repeat = "todos in todos | 필터 : $ index에 의한 상태 필터 트랙"ng class = "{완성 : todo.completed, 편집 : todo == editedtodo}">
<div>
<input type = "checkbox"ng-model = "todo.completed">
<label ng-dblclick = "edittodo (todo)"> {{todo.title}} </label>
<button ng-click = "removetodo (todo)"> </button>
</div>
<form ng-submit = "doneEditing (todo)">
<입력 ng-trim = "false"ng-model = "todo.title"todo-escape = "rebvertediting (todo)"ng-blur = "doneediting (todo)"todo-focus = "todo == editedtodo">
</form>
</li>
</ul>
</섹션>
<바이트 ID = "바이트"ng-show = "todos.length"ng-cloak>
<span id = "todo-count"> <strong> {{나머지 수치}} </strong>
<ng-pluralize count = "나머지 카운트"는 = "{one : 'afform left', 기타 : '항목 왼쪽'}"> </ng-pluralize>
</span>
<ul id = "필터">
<li>
<a ng-class = "{selected : location.path () == '/'}"href = "#/"> all </a>
</li>
<li>
<a ng-class = "{selected : location.path () == '/active'}"href = "#/active"> active </a>
</li>
<li>
<a ng-class = "{selected : location.path () == '/완성'}"href = "#/완성"> 완료 </a>
</li>
</ul>
<button id = "clear-completed"ng-click = "smartCompletedTodos ()"ng-show = "wompletedCount"> 정리 완료 ({{andetedCount}}) </button
</바닥다>
</섹션>
<바닥자 id = "info">
<p> TODO </p>를 편집하려면 두 번 클릭하십시오
<p> 크레딧 :
<a href = "http://twitter.com/cburgdorf"> Christoph Burgdorf </a>,
<a href = "http://ericbidelman.com"> Eric Bidelman </a>,
<a href = "http://jacobmumm.com"> jacob mumm </a>
<a href = "http://igorminar.com"> igor minar </a>
</p>
<a href = "http://todomvc.com"> todomvc </a>의 <p> 부분
</바닥다>
<script src = "bower_components/todomvc-common/base.js"> </script>
<script src = "bower_components/angular/angular.js"> </script>
<script src = "js/app.js"> </script>
<script src = "js/controllers/todoctrl.js"> </script>
<script src = "js/services/todostorage.js"> </script>
<script src = "js/directives/todofocus.js"> </script>
<script src = "js/directives/todoescape.js"> </script>
</body>
</html>
우선, 우리는 해당 JS를 맨 아래에 소개 할 것이므로 이것에 대해 많이 말하지 않을 것입니다.
코드 사본은 다음과 같습니다.
<script src = "bower_components/todomvc-common/base.js"> </script>
<script src = "bower_components/angular/angular.js"> </script>
<script src = "js/app.js"> </script>
<script src = "js/controllers/todoctrl.js"> </script>
<script src = "js/services/todostorage.js"> </script>
<script src = "js/directives/todofocus.js"> </script>
<script src = "js/directives/todoescape.js"> </script>
ng-cloak 속성을 포함하고 보이지 않는 스타일 [ng-cloak]을 정의하십시오.
코드 사본은 다음과 같습니다.
<style> [ng-cloak] {디스플레이 : 없음; } </style>
HTML을 살펴보고 TODO를 추가합시다. 바운드 모델은 NewTodo입니다. 제출 방법은 todoctrl.js의 addTodo ()입니다. TODO가 추가됩니다. Enter를 클릭하면 제출 이벤트가 기본적으로 트리거되므로 AddTodo () 메소드를 트리거하고 ToDO에 할당을 추가합니다.
코드 사본은 다음과 같습니다.
<form id = "todo-form"ng-submit = "addtodo ()">
<입력 ID = "New-Todo"자리 표시 자 = "무엇을해야합니까?" ng-model = "newtodo"autofocus>
</form>
Todos를 보여주는 HTML을보십시오
코드 사본은 다음과 같습니다.
<섹션 id = "main"ng-show = "todos.length"ng-cloak>
<input id = "toggle-all"type = "checkbox"ng-model = "allchecked"ng-click = "markall (allchecked)">
<label for = "Toggle-All"> 모든 것을 완료 </label>로 표시하십시오
<ul id = "todo-list">
<li ng-repeat = "todos in todos | 필터 : $ index에 의한 상태 필터 트랙"ng class = "{완성 : todo.completed, 편집 : todo == editedtodo}">
<div>
<input type = "checkbox"ng-model = "todo.completed">
<label ng-dblclick = "edittodo (todo)"> {{todo.title}} </label>
<button ng-click = "removetodo (todo)"> </button>
</div>
<form ng-submit = "doneEditing (todo)">
<입력 ng-trim = "false"ng-model = "todo.title"todo-escape = "rebvertediting (todo)"ng-blur = "doneediting (todo)"todo-focus = "todo == editedtodo">
</form>
</li>
</ul>
</섹션>
이 섹션은 NGSHOW 메소드를 사용하여 TODO의 길이에 따라 표시되는지 여부를 결정합니다. NG-Cloak 속성은 AngularJS가 처음에 처리되지 않는 페이지를 방지하기 위해 추가됩니다. 새로 고침을 제거하고 시도해 볼 수 있습니다.
ID가있는 확인란은 전환 된 모델에 바인딩되며, 클릭하여 Markall (AllChecked)을 트리거하고 AllChecked의 값을 전달하며 모든 Todos를 표시합니다.
ngrepeat 루프를 사용하여 Li 태그를 생성하고 Todos | 필터 : $ index, Loop Todos, StatusFilter가있는 필터 및 $ index의 추적으로 Statustilter 트랙. ngclass는 두 개의 클래스를 바인딩합니다. {완성 : todo.completed, 편집 : todo == editedtodo}, todo.completed가 true, 완성 된 클래스를 추가하고, todo == editedtodo, 편집 클래스를 추가합니다. 클래스는 Togle의 확인란을 위해 todo.com에 바인딩됩니다. TODO 제목에 표시된 레이블은 더블 클릭 이벤트를 바인딩합니다. Edittodo (TODO)를 트리거하려면 두 번 클릭하십시오. Edittodo는 todo를 편집 todo에 할당 한 다음 아래 양식으로 Todofocus 명령을 트리거합니다. 현재 양식의 입력을 볼 수 있습니다. ESC를 눌러 반향 (TODO)을 트리거합니다. 편집으로 되돌리기 전에 Enter를 누르거나 초점을 누르십시오. DoneEditing (TODO)을 트리거하여 편집 된 TODO를 저장하십시오. 클래스는 클릭 이벤트를 바인딩하여 버튼을 파괴하고 클릭하여 removetodo (todo)를 트리거하고 할 일을 삭제합니다.
마지막으로 Todos 통계에 표시된 HTML을보십시오
코드 사본은 다음과 같습니다.
<바이트 ID = "바이트"ng-show = "todos.length"ng-cloak>
<span id = "todo-count"> <strong> {{나머지 수치}} </strong>
<ng-pluralize count = "나머지 카운트"는 = "{one : 'afform left', 기타 : '항목 왼쪽'}"> </ng-pluralize>
</span>
<ul id = "필터">
<li>
<a ng-class = "{selected : location.path () == '/'}"href = "#/"> all </a>
</li>
<li>
<a ng-class = "{selected : location.path () == '/active'}"href = "#/active"> active </a>
</li>
<li>
<a ng-class = "{selected : location.path () == '/완성'}"href = "#/완성"> 완료 </a>
</li>
</ul>
<button id = "clear-completed"ng-click = "smartCompletedTodos ()"ng-show = "wompletedCount"> 정리 완료 ({{andetedCount}}) </button
</바닥다>
NG- 플라워즈 태그는 나머지 공급 수가 1 일 때 남은 디스플레이 항목을 구현하고, 그렇지 않으면 디스플레이 항목이 남았습니다.
ID가있는 UL 태그는 필터가 location.path ()의 내용에 따라 선택됩니다.
ID는 클리어 완성 버튼에 클릭 이벤트를 추가하여 ClearCompleTedTodos ()를 트리거하여 완성 된 모든 TODO를 지우고 있습니다.
오늘의 메모를 여기서 멈추자. 그들은 모두 개인적인 경험입니다. 나는 당신이 그들을 좋아할 수 있기를 바랍니다.