ฉันได้ดู AngularJs มาระยะหนึ่งแล้วและฉันจะสรุปในบางครั้ง
ที่อยู่เว็บไซต์อย่างเป็นทางการ: http://angularjs.org/
แนะนำบทเรียนสองสามข้อก่อน
1. การสอนเบื้องต้นของ AngularJS ค่อนข้างพื้นฐานและเป็นคำแปลของการสอนอย่างเป็นทางการ
2. เจ็ดขั้นตอนจาก AngularJS สามเณรไปจนถึงผู้เชี่ยวชาญก็ค่อนข้างธรรมดาและมีการสร้างเว็บไซต์การเล่นเพลงออนไลน์
3. การสอนคู่มือการพัฒนา AngularJS ค่อนข้างครอบคลุม แต่ฉันรู้สึกว่าการแปลนั้นค่อนข้างคลุมเครือและเข้าใจยาก
หลังจากอ่านบทเรียนเหล่านี้ฉันรู้สึกว่า AngularJs ก็รู้เล็กน้อยดังนั้นฉันจึงต้องการทำอะไรบางอย่างกับมันดังนั้นฉันจึงวิเคราะห์ TODOMVC ที่เขียนโดย AngularJS
ที่อยู่เว็บไซต์อย่างเป็นทางการของ TODOMVC: http://todomvc.com/
ไดเรกทอรีโครงการมีดังนี้:
มีโฟลเดอร์สองโฟลเดอร์ใน Bower_Components ซึ่งมีการใช้โฟลเดอร์เชิงมุมเหมือนกับไฟล์ Angular.js โฟลเดอร์ TODOMVC-Common มี CSS/JS แบบครบวงจรของโครงการสิ่งที่ต้องทำทั้งหมด (ใช้เพื่อสร้างเนื้อหาด้านซ้ายและไม่มีส่วนเกี่ยวข้องกับโครงการ) และรูปภาพ
โฟลเดอร์ JS เป็นส่วนหัวขนาดใหญ่และคอนโทรลเลอร์ที่เกี่ยวข้อง (คอนโทรลเลอร์)/Directive (คำแนะนำ)/บริการ (บริการ) และ App.js จะถูกวางไว้ภายใน
โฟลเดอร์ทดสอบมีรหัสสำหรับการทดสอบและไม่วิเคราะห์
index.html เป็นหน้ามุมมองของโครงการ
มาดู app.js กันเถอะ
การคัดลอกรหัสมีดังนี้:
/ *Global Angular */
/ *jshint ไม่ได้ใช้: false */
'ใช้อย่างเข้มงวด';
-
* โมดูลแอป TODOMVC หลัก
-
* @type {angular.module}
-
var toddomvc = angular.module ('toDomvc', []);
มันกำหนดโมดูล TODOMVC
ลองดูที่ todostorage.js ภายใต้บริการ
การคัดลอกรหัสมีดังนี้:
/ *Global TODOMVC */
'ใช้อย่างเข้มงวด';
-
* บริการที่ยังคงมีอยู่และดึง Todos จาก LocalStorage
-
TODOMVC.FACTORY ('TODOSTORAGE', function () {
// TODOS ตัวระบุที่ไม่ซ้ำกันสำหรับ JSON String Storage
var storage_id = 'todos-angularjs';
กลับ {
// นำ Todos ออกจาก LocalStorage และแยกวิเคราะห์เป็นวัตถุ JSON
รับ: function () {
return json.parse (localstorage.getItem (Storage_id) || '[]');
-
// แปลงวัตถุ TODOS เป็นสตริง JSON และเก็บไว้ใน localStorage
ใส่: ฟังก์ชั่น (todos) {
localstorage.setItem (Storage_id, json.stringify (todos));
-
-
-
วิธีการบริการ TODOSTORAGE ถูกสร้างขึ้นโดยใช้วิธีโรงงาน สาระสำคัญของวิธีการบริการนี้คือการส่งคืนสองวิธีได้รับและใส่ ทั้งสองใช้คุณสมบัติของ JSON2 และ HTML5 รับเนื้อหาของ Todos จาก LocalStorage และแยกวิเคราะห์ลงใน JSON ใส่แปลง Todos เป็นสตริง JSON และเก็บไว้ใน LocalStorage
มาดูไฟล์คำสั่งสองไฟล์ด้านล่างคำสั่ง
todofocus.js
การคัดลอกรหัสมีดังนี้:
/ *Global TODOMVC */
'ใช้อย่างเข้มงวด';
-
* Directive ที่ให้ความสำคัญกับองค์ประกอบที่นำไปใช้กับเมื่อนิพจน์มันเชื่อมโยงเพื่อประเมินความจริง
-
TODOMVC.Directive ('TODOFOCUS' ฟังก์ชั่น TODOFOCUS ($ TIMEOUT) {
ฟังก์ชั่น return (ขอบเขต, elem, attrs) {
// เพิ่มการฟังมูลค่าของคุณสมบัติ todofocus
ขอบเขต. $ watch (attrs.todofocus, function (newVal) {
ถ้า (newVal) {
$ timeout (function () {
elem [0] .focus ();
}, 0, false);
-
-
-
-
ในฟังก์ชั่นการส่งคืนพารามิเตอร์ Elem เป็นอาร์เรย์ขององค์ประกอบที่มีคำสั่งและ attrs เป็นวัตถุที่ประกอบด้วยแอตทริบิวต์ทั้งหมดชื่อแอตทริบิวต์ ฯลฯ ขององค์ประกอบ
มีการใช้สองวิธี AngularJS
$ watch (watchexpression, ผู้ฟัง, Objectequality) ลงทะเบียนการโทรกลับผู้ฟัง เมื่อใดก็ตามที่การเปลี่ยนแปลงของ WatchExpression การโทรกลับผู้ฟังจะถูกดำเนินการ
$ timeout (fn [, delay] [, invokepply]) เมื่อถึงค่าของการหมดเวลาจะมีการดำเนินการฟังก์ชัน FN
TODOFOCUS.JS สร้างคำสั่ง TODOFOCUS เมื่อองค์ประกอบมีคุณสมบัติ todofocus คำสั่งจะเพิ่มผู้ฟังให้กับค่าของคุณสมบัติ Todofocus ขององค์ประกอบ หากค่าของคุณสมบัติ todofocus ถูกเปลี่ยนเป็นจริง, $ timeout (function () {elem [0] .focus ();}, 0, เท็จ); เวลาหน่วงคือ 0 วินาทีดังนั้น Elem [0]. -focus () จะถูกดำเนินการทันที
todoescape.js
การคัดลอกรหัสมีดังนี้:
/ *Global TODOMVC */
'ใช้อย่างเข้มงวด';
-
* คำสั่งที่ดำเนินการนิพจน์เมื่อองค์ประกอบที่ใช้กับได้รับ
* เหตุการณ์คีย์ดาวน์ `Escape`
-
TODOMVC.Directive ('toDoescape', function () {
var Escape_key = 27;
ฟังก์ชั่น return (ขอบเขต, elem, attrs) {
elem.bind ('keydown', ฟังก์ชั่น (เหตุการณ์) {
if (event.keycode === Escape_key) {
ขอบเขต. $ ใช้ (attrs.todoescape);
-
-
-
-
toDoescape.js สร้างคำสั่ง todoescape เมื่อกดปุ่มหลบหนีการแสดงออกของ attrs.todoescape จะถูกดำเนินการ
ลองดูที่หัวใหญ่ todoctrl.js ในโฟลเดอร์คอนโทรลเลอร์ ไฟล์นี้นานขึ้นเล็กน้อยดังนั้นฉันเพิ่งเขียนความคิดเห็น
การคัดลอกรหัสมีดังนี้:
/ *Global TODOMVC, Angular */
'ใช้อย่างเข้มงวด';
-
* คอนโทรลเลอร์หลักสำหรับแอป คอนโทรลเลอร์:
* - ดึงและยังคงมีแบบจำลองผ่านบริการ TodoStorage
* - เปิดเผยโมเดลไปยังเทมเพลตและจัดหาตัวจัดการเหตุการณ์
-
TODOMVC.Controller ('TODOCTRL', ฟังก์ชั่น TODOCTRL ($ SCOPE, $ LOCATION, TODOSTORAGE, FILTERFILTER) {
// รับ todos จาก localstorage
var todos = $ scope.todos = todostorage.get ();
// บันทึกสิ่งใหม่
$ scope.newTodo = '';
// บันทึกการแก้ไขสิ่งที่ต้องทำ
$ scope.editedTodo = null;
// ดำเนินการเมธอดเมื่อค่าของ Todos เปลี่ยนไป
$ SCOPE. $ WATCH ('TODOS', ฟังก์ชั่น (newValue, oldValue) {
// รับจำนวน todos ที่ยังไม่เสร็จ
$ scope.remainedCount = FilterFilter (TODOS, {เสร็จสมบูรณ์: FALSE}). ความยาว;
// รับจำนวน todos ที่เสร็จสมบูรณ์
$ scope.completedCount = todos.length - $ scope.remainingCount;
// $ scope.allChecked เป็นจริงถ้าและเฉพาะในกรณีที่ $ scope.remainedCount คือ 0
$ 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 ()', ฟังก์ชั่น (เส้นทาง) {
// รับตัวกรองสถานะ
// ถ้าเส้นทาง '/active' ตัวกรองจะ {เสร็จสมบูรณ์: false}
// ถ้าเส้นทาง '/เสร็จ' ตัวกรองจะ {เสร็จสมบูรณ์: true}
// มิฉะนั้นตัวกรองจะเป็นโมฆะ
$ scope.statusFilter = (path === '/active')?
{เสร็จสิ้น: false}: (path === '/เสร็จสิ้น')?
{เสร็จสิ้น: จริง}: null;
-
// เพิ่มสิ่งใหม่
$ scope.addtodo = function () {
var newTodo = $ scope.newtodo.trim ();
if (! newtodo.length) {
กลับ;
-
// เพิ่ม todo ไปยัง Todos คุณสมบัติค่าเริ่มต้นที่เสร็จสมบูรณ์เป็นเท็จ
todos.push ({
ชื่อเรื่อง: Newtodo,
เสร็จสมบูรณ์: เท็จ
-
// ว่างเปล่า
$ scope.newTodo = '';
-
// แก้ไขสิ่งที่ต้องทำ
$ scope.edittodo = function (todo) {
$ scope.editedTodo = todo;
// โคลนสิ่งที่ต้องทำเพื่อเรียกคืนตามความต้องการ
// บันทึกสิ่งที่ต้องทำก่อนแก้ไขและเตรียมพร้อมสำหรับการแก้ไขการแก้ไข
$ scope.originalTodo = Angular.extend ({}, todo);
-
// แก้ไขสิ่งที่ต้องทำให้เสร็จสมบูรณ์
$ scope.doneEditing = function (todo) {
// ว่างเปล่า
$ scope.editedTodo = null;
todo.title = todo.title.trim ();
ถ้า (! todo.title) {
// หากชื่อเรื่องของสิ่งที่ต้องว่างเปล่าให้ลบสิ่งที่ต้องทำ
$ scope.removetodo (สิ่งที่ต้องทำ);
-
-
// คืนค่าสิ่งที่ต้องทำก่อนแก้ไข
$ scope.revertediting = function (todo) {
todos [todos.indexof (todo)] = $ scope.originaltodo;
$ scope.doneEditing ($ scope.originaltodo);
-
// ลบสิ่งที่ต้องทำ
$ scope.removetodo = function (todo) {
todos.splice (todos.indexof (todo), 1);
-
// เคลียร์ Todos เสร็จสมบูรณ์
$ scope.clearcompletedTodos = function () {
$ scope.todos = todos = todos.filter (ฟังก์ชั่น (val) {
กลับมา! val.completed;
-
-
// ทำเครื่องหมายสถานะสิ่งที่ต้องทำทั้งหมด (จริงหรือเท็จ)
$ scope.markall = ฟังก์ชั่น (เสร็จสมบูรณ์) {
todos.foreach (ฟังก์ชั่น (todo) {
toDo.completed = เสร็จสมบูรณ์;
-
-
-
สุดท้ายมาดู index.html การวิเคราะห์ไฟล์นี้ของเราทีละคน
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html lang = "en" ng-app = "toDomvc" data-framework = "Angularjs">
<head>
<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] {display: none; } </style>
</head>
<body>
<section id = "toDoApp" ng-controller = "todoctrl">
<header id = "header">
<H1> todos </h1>
<form id = "toDo-form" ng-submit = "addTodo ()">>
<อินพุต id = "new-todo" placeholder = "ต้องทำอะไร?" ng-model = "newtodo" ออโต้โฟกัส>
</form>
</header>
<ส่วน id = "หลัก" ng-show = "todos.length" ng-cloak>
<อินพุต id = "toggle-all" type = "ช่องทำเครื่องหมาย" ng-model = "allchecked" ng-click = "Markall (allchecked)">>
<label for = "toggle-all"> ทำเครื่องหมายทั้งหมดให้เสร็จสมบูรณ์ </label>
<ul id = "todo-list">
<li ng-repeat = "todo in todos | ตัวกรอง: track stationsfilter โดย $ index" ng-class = "{เสร็จสิ้น: toDo.completed, การแก้ไข: todo == editedTodo}">
<div>
<อินพุต type = "ช่องทำเครื่องหมาย" 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 = "retho revediting (toDo)" ng-blur = "doneediting (todo)" toDo-focus = "todo == editedTodo">
</form>
</li>
</ul>
</section>
<footer id = "footer" ng-show = "todos.length" ng-cloak>
<span id = "toDo-count"> <strong> {{ส่วนที่เหลือ}}} </strong>
<ng-pluralize count = "ส่วนที่เหลือ" เมื่อ = "{one: 'รายการซ้าย', อื่น ๆ : 'รายการซ้าย'}"> </ng-pluralize> </ng-pluralize>
</span>
<ul id = "ตัวกรอง">
<li>
<a ng-class = "{เลือก: location.path () == '/'}" href = "#/"> ทั้งหมด </a>
</li>
<li>
<a ng-class = "{เลือก: location.path () == '/active'}" href = "#/active"> active </a>
</li>
<li>
<a ng-class = "{เลือก: location.path () == '/เสร็จสิ้น'}" href = "#/เสร็จสิ้น"> เสร็จสมบูรณ์ </a>
</li>
</ul>
<button id = "clear-completed" ng-click = "clearcompletedTodos ()" ng-show = "เสร็จสมบูรณ์"> เคลียร์เสร็จแล้ว ({{เสร็จสมบูรณ์
</footer>
</section>
<footer id = "info">
<p> ดับเบิลคลิกเพื่อแก้ไขสิ่งที่ต้องทำ </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>
<p> ส่วนหนึ่งของ <a href = "http://todomvc.com"> todomvc </a> </p>
</footer>
<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-CLOOK และไม่สามารถมองเห็นได้
การคัดลอกรหัสมีดังนี้:
<style> [ng-cloak] {display: none; } </style>
มาดู HTML เพื่อเพิ่มสิ่งที่ต้องทำ โมเดลที่ถูกผูกไว้คือ Newtodo วิธีการส่งคือ addtodo () ใน todoctrl.js จะมีการเพิ่มสิ่งที่ต้องทำ คลิก Enter และเหตุการณ์การส่งจะถูกทริกเกอร์โดยค่าเริ่มต้นซึ่งจะทริกเกอร์เมธอด addtodo () และเพิ่ม todo ไปยัง Todos
การคัดลอกรหัสมีดังนี้:
<form id = "toDo-form" ng-submit = "addTodo ()">>
<อินพุต id = "new-todo" placeholder = "ต้องทำอะไร?" ng-model = "newtodo" ออโต้โฟกัส>
</form>
ดู html ที่แสดง todos
การคัดลอกรหัสมีดังนี้:
<ส่วน id = "หลัก" ng-show = "todos.length" ng-cloak>
<อินพุต id = "toggle-all" type = "ช่องทำเครื่องหมาย" ng-model = "allchecked" ng-click = "Markall (allchecked)">>
<label for = "toggle-all"> ทำเครื่องหมายทั้งหมดให้เสร็จสมบูรณ์ </label>
<ul id = "todo-list">
<li ng-repeat = "todo in todos | ตัวกรอง: track stationsfilter โดย $ index" ng-class = "{เสร็จสิ้น: toDo.completed, การแก้ไข: todo == editedTodo}">
<div>
<อินพุต type = "ช่องทำเครื่องหมาย" 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 = "retho revediting (toDo)" ng-blur = "doneediting (todo)" toDo-focus = "todo == editedTodo">
</form>
</li>
</ul>
</section>
ส่วนนี้ใช้วิธี NGSHOW เพื่อตรวจสอบว่าจะแสดงขึ้นอยู่กับความยาวของ TODOS หรือไม่ แอตทริบิวต์ ng-cloak ถูกเพิ่มเพื่อป้องกันไม่ให้หน้าเว็บที่ AngularJs ไม่ได้ประมวลผลในตอนต้น คุณสามารถลบการรีเฟรชและลอง
ช่องทำเครื่องหมายพร้อม ID คือสลับ-ทั้งหมดถูกผูกไว้กับโมเดล allchecked คลิกเพื่อทริกเกอร์ Markall (allchecked) ส่งผ่านค่าของ allchecked และทำเครื่องหมายทั้งหมด todos
ใช้ NGREPEAT LOOP เพื่อสร้างแท็ก LI, TODO ใน TODOS | ตัวกรอง: StatusFilter Track โดย $ INDEX, Loop Todos, ตัวกรองด้วย StatusFilter และ Trace ด้วย $ ดัชนี ngclass ผูกสองคลาส {เสร็จสิ้น: toDo.completed, การแก้ไข: toDo == editedTodo}, หาก toDo.completed เป็นจริงเพิ่มคลาสที่เสร็จสมบูรณ์และหาก toDo == แก้ไข oditodo, เพิ่มคลาสการแก้ไข คลาสถูกผูกไว้กับ toDo.complet สำหรับช่องทำเครื่องหมายของ Toggle ฉลากที่แสดงในชื่อเรื่อง Todo จะเชื่อมโยงเหตุการณ์ดับเบิลคลิก ดับเบิลคลิกที่จะเรียก edittodo (สิ่งที่ต้องทำ) Edittodo จะกำหนด todo ให้กับ EditedTodo จากนั้นเรียกใช้คำสั่ง TodoFocus ในรูปแบบด้านล่าง ในเวลานี้อินพุตในแบบฟอร์มสามารถมองเห็นได้ กด ESC เพื่อทริกเกอร์เปลี่ยนกลับ (สิ่งที่ต้องทำ) ก่อนที่จะย้อนกลับไปแก้ไขให้กด Enter หรือ Lose Focus เพื่อเรียกใช้ doneediting (สิ่งที่ต้องทำ) เพื่อบันทึกสิ่งที่ต้องแก้ไข คลาสเชื่อมโยงเหตุการณ์คลิกเพื่อทำลายปุ่มคลิกเพื่อทริกเกอร์ Removetodo (สิ่งที่ต้องทำ) และลบสิ่งที่ต้องทำ
ในที่สุดดู HTML ที่แสดงโดยสถิติ Todos
การคัดลอกรหัสมีดังนี้:
<footer id = "footer" ng-show = "todos.length" ng-cloak>
<span id = "toDo-count"> <strong> {{ส่วนที่เหลือ}}} </strong>
<ng-pluralize count = "ส่วนที่เหลือ" เมื่อ = "{one: 'รายการซ้าย', อื่น ๆ : 'รายการซ้าย'}"> </ng-pluralize> </ng-pluralize>
</span>
<ul id = "ตัวกรอง">
<li>
<a ng-class = "{เลือก: location.path () == '/'}" href = "#/"> ทั้งหมด </a>
</li>
<li>
<a ng-class = "{เลือก: location.path () == '/active'}" href = "#/active"> active </a>
</li>
<li>
<a ng-class = "{เลือก: location.path () == '/เสร็จสิ้น'}" href = "#/เสร็จสิ้น"> เสร็จสมบูรณ์ </a>
</li>
</ul>
<button id = "clear-completed" ng-click = "clearcompletedTodos ()" ng-show = "เสร็จสมบูรณ์"> เคลียร์เสร็จแล้ว ({{เสร็จสมบูรณ์
</footer>
แท็ก NG-pluralize ใช้รายการแสดงผลที่เหลืออยู่เมื่อจำนวนเงินที่เหลืออยู่คือ 1 มิฉะนั้นรายการแสดงผลที่เหลืออยู่
แท็ก UL พร้อม ID คือตัวกรองถูกเลือกตามเนื้อหาของ location.path ()
ID เพิ่มเหตุการณ์การคลิกลงในปุ่มที่สมบูรณ์แบบทำให้เรียกใช้ ClearcompletedTodos () การล้าง TODOS ที่เสร็จสมบูรณ์ทั้งหมด
หยุดที่นี่บันทึกของวันนี้ พวกเขาทั้งหมดเป็นประสบการณ์ส่วนตัว ฉันหวังว่าคุณจะชอบพวกเขา