لقد كنت أشاهد AngularJS لفترة من الوقت مؤخرًا ، وسأقوم بتلخيصها في وقت ما.
عنوان الموقع الرسمي: http://angularjs.org/
أوصي ببعض البرامج التعليمية أولاً
1. AngularJS البرنامج التعليمي التمهيدي أساسي نسبيًا وهو ترجمة للبرنامج التعليمي الرسمي.
2. سبع خطوات من المبتدئين في AngularJS إلى الخبراء هي أيضًا أساسية نسبيًا ، وتم إنشاء موقع ويب للموسيقى عبر الإنترنت.
3. دليل تطوير AngularJS شامل تمامًا ، لكنني أشعر أن الترجمة غامضة بعض الشيء ويصعب فهمها.
بعد قراءة هذه البرامج التعليمية ، شعرت أن AngularJS عرفت أيضًا قليلاً ، لذلك أردت أن أفعل شيئًا معها ، لذلك قمت بتحليل TODODVC الذي كتبه AngularJS.
عنوان الموقع الرسمي TODOMVC: http://todomvc.com/
دليل المشروع كما يلي:
يوجد مجلدان في bower_components ، من بينها أن المجلد الزاوي يستخدم ليكون هو نفس ملف Angular.js. يحتوي مجلد TODOMVC-Common على CSS/JS الموحد لجميع مشاريع TODO (المستخدمة فقط لإنشاء المحتوى الأيسر وليس له أي علاقة بالمشروع) والصور.
مجلد JS هو رأس كبير ، ويتم وضع وحدة التحكم المقابلة (وحدة التحكم)/التوجيه (التعليمات)/الخدمة (الخدمة) و App.js في الداخل.
يحتوي مجلد الاختبار على رمز الاختبار ولا يحلل.
index.html هي صفحة عرض المشروع.
لنلقي نظرة على app.js
نسخة الكود كما يلي:
/ *Global Angular */
/ *JShint غير مستخدم: خطأ */
"استخدام صارم" ؛
/**
* وحدة تطبيق TODOMVC الرئيسية
*
* type {Angular.Module}
*/
var toDomvc = Angular.module ('toDomvc' ، []) ؛
يحدد وحدة TODODVC
ألق نظرة على Todostorage.js تحت الخدمات
نسخة الكود كما يلي:
/ *Global TODODVC */
"استخدام صارم" ؛
/**
* الخدمات التي تستمر واسترجاع Todos من LocalStorage
*/
TODODVC.FACTORY ('TODOSTORGER' ، function () {
// Todos معرف فريد لتخزين سلسلة JSON
var storage_id = 'todos-angularjs' ؛
يعود {
// قم بإخراج Todos من LocalStorage وحل محله في كائن JSON
الحصول على: وظيفة () {
return json.parse (localStorage.getItem (Storage_id) || '[]') ؛
} ،
// قم بتحويل كائن Todos إلى سلسلة JSON وتخزينها في LocalStorage
وضع: وظيفة (TODOS) {
LocalStorage.SetItem (Storage_id ، Json.Stringify (Todos)) ؛
}
} ؛
}) ؛
يتم إنشاء طريقة خدمة Todostorage باستخدام طريقة المصنع. جوهر طريقة الخدمة هذه هو إرجاع طريقتين ووضعها. كلاهما يستخدم ميزات JSON2 و HTML5. يأخذ Get محتوى Todos من LocalStorage وتوفيه إلى JSON ، ووضع تحويل Toodos إلى JSON String ويخزنها في LocalStorage.
دعنا نلقي نظرة على ملفين الأوامر أدناه.
Todofocus.js
نسخة الكود كما يلي:
/ *Global TODODVC */
"استخدام صارم" ؛
/**
* التوجيه الذي يركز الأماكن على العنصر الذي يتم تطبيقه عليه عندما يرتبط التعبير بالتقييم إلى True
*/
TODODVC.DIRECITION ('TODOFOCUS' ، وظيفة todofocus ($ timeout) {
وظيفة الإرجاع (النطاق ، elem ، attrs) {
// أضف الاستماع إلى قيمة خاصية todofocus
نطاق
إذا (newval) {
$ timeout (function () {
elem [0] .focus () ؛
} ، 0 ، خطأ) ؛
}
}) ؛
} ؛
}) ؛
في وظيفة إرجاع المعلمة ، ELEM هي مجموعة من العناصر التي تحتوي على التعليمات ، و attrs هي كائن يتكون من جميع السمات ، وأسماء السمات ، إلخ.
يتم استخدام طريقتين AngularJS
$ Watch (WatchExpression ، المستمع ، ObjectEquality) قم بتسجيل رد اتصال المستمع. عندما يتغير WatchExpression ، سيتم تنفيذ رد اتصال المستمع.
$ timeout (fn [، delay] [، vokeaply]) عند الوصول إلى قيمة المهلة ، يتم تنفيذ وظيفة FN.
Todofocus.js يخلق توجيه تودوفوكس. عندما يحتوي عنصر ما على خاصية todofocus ، فإن التوجيه سيضيف مستمعًا إلى قيمة خاصية Todofocus للعنصر. إذا تم تغيير قيمة خاصية todofocus إلى true ، $ timeout (function () {elem [0] .focus () ؛} ، 0 ، false) ؛ وقت التأخير هو 0 ثانية ، لذلك سيتم تنفيذ elem [0] .focus () على الفور.
TODOESCAPE.JS
نسخة الكود كما يلي:
/ *Global TODODVC */
"استخدام صارم" ؛
/**
* التوجيه الذي ينفذ تعبيرًا عندما يتم تطبيقه
* حدث "Escape" Keydown.
*/
TODODVC.DIRECITION ('TODOESCAPE' ، function () {
var excart_key = 27 ؛
وظيفة الإرجاع (النطاق ، elem ، attrs) {
elem.bind ('keydown' ، function (event) {
if (event.keycode === Escape_Key) {
نطاق. $ تطبيق (attrs.todoescape) ؛
}
}) ؛
} ؛
}) ؛
TODOESCAPE.JS يخلق توجيه تدوزسك. عند الضغط على مفتاح الهروب ، يتم تنفيذ التعبير عن att.todoescape.
ألقِ نظرة على الرأس الكبير ، Todoctrl.js في مجلد وحدات التحكم. هذا الملف أطول قليلاً ، لذلك كتبت للتو تعليقات.
نسخة الكود كما يلي:
/ *Global Tomvc ، Angular */
"استخدام صارم" ؛
/**
* وحدة التحكم الرئيسية للتطبيق. وحدة التحكم:
* - يسترجع ويظل النموذج عبر خدمة Todostorage
* - يعرض النموذج للقالب وتوفير معالجات الأحداث
*/
TODODVC.CONTROLLER ('TODOCTRL' ، وظيفة TODOCTRL (نطاق $ ، موقع $ ، todostorage ، filterfilter) {
// احصل على Todos من LocalStorage
var todos = $ scope.todos = todostorage.get () ؛
// سجل TODO الجديد
$ scope.newtodo = '' ؛
// سجل تحرير تودو
$ scope.editedtodo = null ؛
// تنفيذ الطريقة عندما تتغير قيمة Todos
$ scope. $ watch ('Toodos' ، function (newValue ، OldValue) {
// احصل على عدد Todos غير المكتملة
$ scope.RemainingCount = filterfilter (todos ، {exced: false}). length ؛
// احصل على عدد Todos المكتمل
$ scope.completedCount = todos.length - $ scope.RemainingCount ؛
// $ scope.allchecked يكون صحيحًا إذا وفقط إذا كان $ scope.RemainingCount 0
$ scope.allchecked =! $ scope.RemainingCount ؛
// عندما لا تكون القيمة الجديدة لـ Todos والقيمة القديمة متساوية ، قم بتخزين Todos في LocalStorage
إذا (newValue! == Oldvalue) {// هذا يمنع المكالمات غير الضرورية إلى التخزين المحلي
todostorage.put (Todos) ؛
}
}، حقيقي)؛
if ($ location.path () === '') {
// إذا كان $ location.path () فارغًا ، تم تعيينه على /
$ location.path ('/') ؛
}
$ scope.location = $ location ؛
// تنفيذ الطريقة عندما تتغير قيمة الموقع. path ()
$ scope. $ watch ('location.path ()' ، function (path) {
// الحصول على مرشح الدولة
// إذا كان المسار "/نشط" ، فإن المرشح هو {مكتمل: false}
// إذا كان المسار "/مكتمل" ، فإن المرشح هو {مكتمل: صحيح}
// خلاف ذلك ، المرشح فارغ
$ scope.statusfilter = (path === '/active')؟
{مكتمل: false}: (path === '/upplication')؟
{الانتهاء: صحيح}: null ؛
}) ؛
// أضف todo جديد
$ scope.addtodo = function () {
var newtodo = $ scope.newtodo.trim () ؛
if (! newtodo.length) {
يعود؛
}
// أضف todo إلى Todos ، الإعدادات الافتراضية للممتلكات الكاملة إلى False
todos.push ({
العنوان: نيوتودو ،
أكمل: خطأ
}) ؛
// فارغ
$ scope.newtodo = '' ؛
} ؛
// تحرير tode
$ scope.edittodo = function (toDo) {
$ scope.editedtodo = todo ؛
// استنساخ 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) ؛
}
} ؛
// استعادة تودو قبل التحرير
$ 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) ؛
} ؛
// Clear Complete Todos
$ scope.clearcompletedTodos = function () {
$ scope.todos = todos = todos.filter (function (val) {
العودة! val.completed ؛
}) ؛
} ؛
// وضع علامة على جميع حالة TODO (صواب أو خطأ)
$ scope.markall = function (مكتمل) {
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- متوافق" content = "ie = edge">
<title> AngularJS • TODODVC </itlem>
<Link Rel = "STYLESHEET" HREF = "Bower_components/TODODVC-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 ()">
<INPUT ID = "New-todo" Placeholder = "ما الذي يجب القيام به؟" ng-model = "newtodo" Autofocus>
</form>
</header>
<section 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 = "tode-list">
<li ng-repeat = "todo in todos | filter: statusfilter track by $ index" ng-class = "{complete: tode.cleted ، endited: toDo == EditedTodo}">
<viv>
<type type = "checkbox" ng-model = "tode.completed">
<label ng-dblclick = "edittodo (toDo)"> {{toDo.title}} </billy>
<button ng click = "removetodo (toDo)"> </utton>
</div>
<form ng ng-submit = "denteDiting (todo)">
<input ng-trim = "false" ng-model = "toDo.title" toDo-escape = "repretting (toDo)" ng-blur = "donediting (toDo)" to-focus = "tode == editedTodo">
</form>
</li>
</ul>
</القسم>
<footer id = "footer" ng-show = "todos.length" ng-cloak>
<span id = "todo-count"> <strong> {{defeneingCount}} </strong>
<ng-pluralize count = "deferenceCount" when = "{one: 'item left' ، other: 'stems left'}"> </ng-pluralize>
</span>
<ul id = "filters">
<li>
<a ng-class = "{select: location.path () == '/'}" href = "#/"
</li>
<li>
<a ng-class = "{select: location.path () == '/active'}" href = "#/active"> نشط </a>
</li>
<li>
<a ng-class = "{select: location.path () == '/upplication'}" href = "#/expture"> مكتملة </a>
</li>
</ul>
<button id = "clear-completed" ng-click = "clearcompletedtodos ()" ng-show = "completecount"
</tower>
</القسم>
<footer id = "info">
<p> انقر نقرًا مزدوجًا لتحرير ToDo </p>
<p> الاعتمادات:
<a href = "http://twitter.com/cburgdorf"> كريستوف بورغدورف </a> ،
<a href = "http://ericbidelman.com"> إريك بيدمان </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>
</tower>
<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] {display: none ؛ } </style>
دعونا نلقي نظرة على HTML لإضافة TODO. نموذج ملزمة هو نيوتودو. طريقة إرسال هي addtodo () في todoctrl.js. سيتم إضافة tode. انقر فوق إدخال ، وسيتم تشغيل حدث التقديم افتراضيًا ، مما سيؤدي إلى تشغيل طريقة AddTodo () وإضافة todo إلى Todos.
نسخة الكود كما يلي:
<form id = "todo-form" ng-submit = "addTodo ()">
<INPUT ID = "New-todo" Placeholder = "ما الذي يجب القيام به؟" ng-model = "newtodo" Autofocus>
</form>
انظر إلى HTML عرض Todos
نسخة الكود كما يلي:
<section 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 = "tode-list">
<li ng-repeat = "todo in todos | filter: statusfilter track by $ index" ng-class = "{complete: tode.cleted ، endited: toDo == EditedTodo}">
<viv>
<type type = "checkbox" ng-model = "tode.completed">
<label ng-dblclick = "edittodo (toDo)"> {{toDo.title}} </billy>
<button ng click = "removetodo (toDo)"> </utton>
</div>
<form ng ng-submit = "denteDiting (todo)">
<input ng-trim = "false" ng-model = "toDo.title" toDo-escape = "repretting (toDo)" ng-blur = "donediting (toDo)" to-focus = "tode == editedTodo">
</form>
</li>
</ul>
</القسم>
يستخدم القسم طريقة NGSHOW لتحديد ما إذا كان يتم عرضه بناءً على طول TODOS. تتم إضافة سمة NG-Cloak لمنع الصفحات التي لا تتم معالجة AngularJs في البداية. يمكنك إزالة التحديث وتجربته.
ترتبط مربع الاختيار مع ID مع Toggle-ALL بالطراز AllChecked ، انقر إلى تشغيل Markall (allchecked) ، وتمرير قيمة allchecked ، وتمييز جميع todos.
استخدم Ngrepeat Loop لإنشاء علامات LI ، Todo في Todos | Filter: statusFilter Track by $ index و loop todos و filter مع statusfilter و Trace مع $ index. NgClass يربط فئتين ، {مكتمل: todo.completed ، التحرير: toDo == EditedTodo} ، إذا كان ToDo.Completed صحيحًا ، أضف فئة مكتملة ، وإذا ToDo == EditedTodo ، إضافة فئة التحرير. الفصل بدلا من todo.completed لعلبة الاختيار Toggle. تربط التسمية المعروضة في عنوان TODO حدثًا نقرًا مزدوجًا. انقر نقرًا مزدوجًا إلى تشغيل Edittodo (TODO). ستقوم Edittodo بتعيين ToDo لـ EditedTodo ، ثم تشغيل تعليمات Todofocus في النموذج أدناه. في هذا الوقت ، يمكن أن تكون المدخلات في النموذج مرئية. اضغط على ESC للتشغيل (TODO). قبل العودة إلى التحرير ، اضغط على Enter أو LOSS FOCUST لتشغيل DESTEDITING (TODO) لإنقاذ TODO المعدل. تربط الفئة الحدث النقر لتدمير الزر ، انقر لتشغيل removetodo (TODO) ، وحذف tode.
أخيرًا ، انظر إلى HTML التي تعرضها إحصائيات Todos
نسخة الكود كما يلي:
<footer id = "footer" ng-show = "todos.length" ng-cloak>
<span id = "todo-count"> <strong> {{defeneingCount}} </strong>
<ng-pluralize count = "deferenceCount" when = "{one: 'item left' ، other: 'stems left'}"> </ng-pluralize>
</span>
<ul id = "filters">
<li>
<a ng-class = "{select: location.path () == '/'}" href = "#/"
</li>
<li>
<a ng-class = "{select: location.path () == '/active'}" href = "#/active"> نشط </a>
</li>
<li>
<a ng-class = "{select: location.path () == '/upplication'}" href = "#/expture"> مكتملة </a>
</li>
</ul>
<button id = "clear-completed" ng-click = "clearcompletedtodos ()" ng-show = "completecount"
</tower>
تنفذ علامة NG-pluralize عنصر العرض المتبقي عندما يكون عدد المتبقيات المتبقية 1 ، وإلا فإن عناصر العرض المتبقية.
يتم تحديد علامة UL مع ID IS Filters وفقًا لمحتوى الموقع. Path ().
يضيف ID حدث نقرة إلى الزر الذي تم إكماله ، مما يؤدي إلى ClearCompletedTodos () ، مما يؤدي إلى مسح جميع Todos المكتملة.
دعنا نتوقف هنا ملاحظات اليوم. انهم جميعا تجارب شخصية. أتمنى أن يعجبهم.