Analisis TodoMVC dalam Nota Kajian AngularJS_AngularJS

Saya telah melihat AngularJS baru-baru ini, jadi saya akan mengambil sedikit masa untuk meringkaskannya.

Alamat tapak web rasmi: http://angularjs.org/

Syorkan beberapa tutorial dahulu

1. Tutorial Bermula AngularJS Ia agak asas dan merupakan terjemahan dari Tutorial rasmi.

2. Daripada pemula AngularJS kepada pakar dalam tujuh langkah Ia juga agak asas dan saya mencipta tapak web bermain muzik dalam talian.

3. Panduan Pembangunan AngularJS Tutorial ini agak komprehensif, tetapi saya rasa terjemahannya agak kabur.

Selepas membaca tutorial ini, saya rasa saya memahami AngularJS sedikit, dan saya mahu menggunakannya untuk melakukan sesuatu. Mari analisa todomvc yang ditulis dalam AngularJS.

Alamat laman web rasmi Todomvc: http://todomvc.com/

Direktori projek adalah seperti berikut:

Terdapat dua folder yang diletakkan dalam bower_components Folder sudut digunakan untuk menyimpan fail angular.js Folder todomvc-common mengandungi cssjs bersatu untuk semua projek todo (hanya digunakan untuk menjana kandungan sebelah kiri, tidak berkaitan dengan. projek) dan gambar.

Folder js ialah pengepala besar, yang mengandungi perkhidmatan (perkhidmatan) dan app.js arahan (pengawal) yang sepadan.

Folder ujian mengandungi kod untuk ujian dan tidak akan dianalisis.

index.html ialah halaman paparan projek.

Mari kita lihat app.js dahulu

Salin kod Kod adalah seperti berikut:

/*sudut global */
/*jshint unused:false */
'gunakan ketat';
/**
 * Modul apl TodoMVC utama
 *
 * @type {angular.Module}
 */
var todomvc = angular.module('todomvc', []);

Ia mentakrifkan modul todomvc

Lihat sekali lagi di todoStorage.js di bawah perkhidmatan

Salin kod Kod adalah seperti berikut:

/*todomvc global */
'gunakan ketat';
/**
 * Perkhidmatan yang berterusan dan mendapatkan semula TODO daripada localStorage
 */
todomvc.factory('todoStorage', fungsi () {
// Pengecam unik storan rentetan JSON todos
var STORAGE_ID = 'todos-angularjs';
Kembali {
​​​​ // Dapatkan todos dari localStorage dan huraikannya ke dalam objek JSON
          dapatkan: fungsi () {
                kembalikan JSON.parse(localStorage.getItem(STORAGE_ID) || '[]');
},
// Tukar objek todos kepada rentetan JSON dan simpannya dalam localStorage
Letakkan: fungsi (todos) {
​​​​​​localStorage.setItem(STORAGE_ID, JSON.stringify(todos));
}
};
});

Kaedah perkhidmatan todoStorage dibuat menggunakan kaedah kilang Intipati kaedah perkhidmatan ini adalah untuk mengembalikan dua kaedah, dapatkan dan letak, yang kedua-duanya menggunakan ciri JSON2 dan HTML5. get mengambil kandungan todos daripada localStorage dan menghuraikannya ke dalam JSON, dan meletakkan penukaran todos ke dalam rentetan JSON dan menyimpannya dalam localStorage.

Lihat dua fail arahan di bawah arahan sekali lagi.

todoFocus.js

Salin kod Kod adalah seperti berikut:

/*todomvc global */
'gunakan ketat';
/**
 * Arahan yang meletakkan tumpuan pada elemen yang digunakan apabila ungkapan yang diikatnya dinilai kepada benar
 */
todomvc.directive('todoFocus', fungsi todoFocus($timeout) {
Fungsi kembali (skop, elem, attrs) {
                      // Tambahkan pendengar untuk nilai atribut todoFocus
skop.$watch(attrs.todoFocus, fungsi (newVal) {
                jika (Val baharu) {
                    $masa tamat(fungsi () {
                      elem[0].fokus();
                 }, 0, palsu);
            }
        });
};
});

Antara parameter yang dikembalikan kepada fungsi, elem ialah tatasusunan yang mengandungi elemen arahan, dan attrs ialah objek yang terdiri daripada semua atribut dan nama atribut elemen.

Dua kaedah AngularJS digunakan

$watch(watchExpression, listener, objectEquality) mendaftarkan panggilan balik pendengar Setiap kali watchExpression berubah, panggilan balik pendengar akan dilaksanakan.

$timeout(fn[, delay][, invokeApply]) Apabila nilai tamat masa dicapai, laksanakan fungsi fn.

todoFocus.js mencipta arahan todoFocus. Apabila elemen mempunyai atribut todoFocus, arahan ini akan menambah pendengar kepada nilai atribut todoFocus elemen Jika nilai atribut todoFocus berubah kepada benar, $timeout(function () {elem[0].focus(); akan dilaksanakan). }, 0, false); Masa tunda ialah 0 saat, jadi elem[0].focus() akan dilaksanakan serta-merta.

todoEscape.js

Salin kod Kod adalah seperti berikut:

/*todomvc global */
'gunakan ketat';
/**
 * Arahan yang melaksanakan ungkapan apabila elemen yang digunakan mendapat
 * acara keydown `escape`.
 */
todomvc.directive('todoEscape', fungsi () {
var ESCAPE_KEY = 27;
Fungsi kembali (skop, elem, attrs) {
          elem.bind('keydown', fungsi (acara) {
Jika (event.keyCode === ESCAPE_KEY) {
skop.$apply(attrs.todoEscape);
            }
        });
};
});

todoEscape.js mencipta arahan todoEscape. Apabila kekunci Escape ditekan, ungkapan attrs.todoEscape dilaksanakan.

Lihat todoCtrl.js dalam folder pengawal Fail ini agak panjang, jadi saya hanya menulis ulasan.

Salin kod Kod adalah seperti berikut:

/*todomvc global, sudut */
'gunakan ketat';
/**
 * Pengawal utama untuk aplikasi. Pengawal:
 * - mendapatkan semula dan mengekalkan model melalui perkhidmatan todoStorage
 * - mendedahkan model kepada templat dan menyediakan pengendali acara
 */
todomvc.controller('TodoCtrl', fungsi TodoCtrl($scope, $location, todoStorage, filterFilter) {
    // 从localStorage中获取semua
    var todos = $scope.todos = todoStorage.get();

// Rakam todo baharu
$scope.newTodo = '';
// Rakam todo yang diedit
$scope.editedTodo = null;
// Laksanakan kaedah apabila nilai todos berubah
$scope.$watch('todos', function (newValue, oldValue) {
​​​​ // Dapatkan bilangan tugasan yang belum selesai
           $scope.remainingCount = filterFilter(todos, { complete: false }).length;
​​​​ // Dapatkan bilangan tugasan yang telah selesai
           $scope.completedCount = todos.length - $scope.remainingCount;
// Jika dan hanya jika $scope.remainingCount ialah 0, $scope.allChecked adalah benar
          $scope.allChecked = !$scope.remainingCount;
// Apabila nilai baru todos tidak sama dengan nilai lama, simpan todos
dalam localStorage If (newValue !== oldValue) { // Ini menghalang panggilan yang tidak diperlukan ke storan setempat
             todoStorage.put(todos);
}
}, benar);
Jika ($location.path() === '') {
​​​​ //Jika $location.path() kosong, tetapkannya kepada /
          $location.path('/');
}
$scope.location = $location;
// Laksanakan kaedah apabila nilai location.path() berubah
$scope.$watch('location.path()', fungsi (path) {
​​​​ // Dapatkan penapis status
// Jika laluan '/aktif', penapis { selesai: palsu }
// Jika laluan '/completed', penapis adalah { complete: true }
​​​​ // Jika tidak, penapis adalah batal
           $scope.statusFilter = (laluan === '/aktif') ?
{ complete: false } : (laluan === '/completed') ?
                      { selesai: benar } : null;
});
// Tambah todo baharu
$scope.addTodo = fungsi () {
      var newTodo = $scope.newTodo.trim();
Jika (!newTodo.length) {
             kembali;
}
​​​​ // Tambahkan todo kepada todos, atribut yang telah lengkap menjadi lalai kepada false
         todos.push({
               tajuk: newTodo,
selesai: palsu
        });
                                        // Biarkan kosong
           $scope.newTodo = '';
};
//Edit tugasan
$scope.editTodo = fungsi (todo) {
           $scope.editedTodo = todo;
                // Klon todo asal untuk memulihkannya atas permintaan.
                  // Simpan todo sebelum mengedit untuk bersedia untuk menyambung semula penyuntingan
           $scope.originalTodo = angular.extend({}, todo);
};
// Edit todo selesai
$scope.doneEditing = fungsi (todo) {
                                        // Biarkan kosong
          $scope.editedTodo = null;
         todo.title = todo.title.trim();
Jika (!todo.title) {
                                                // Jika tajuk todo kosong, alih keluar todo
                $scope.removeTodo(todo);
}
};
//Pulihkan todo sebelum mengedit
$scope.revertEditing = fungsi (todo) {
         todos[todos.indexOf(todo)] = $scope.originalTodo;
          $scope.doneEditing($scope.originalTodo);
};
// Alih keluar todo
$scope.removeTodo = fungsi (todo) {
         todos.splice(todos.indexOf(todo), 1);
};
// Kosongkan tugas yang telah selesai
$scope.clearCompletedTodos = fungsi () {
$scope.todos = todos = todos.filter(fungsi (val) {
               pulangkan !val.completed;
        });
};
// Tandakan status semua tugasan (benar atau palsu)
$scope.markAll = fungsi (selesai) {
         todos.forEach(fungsi (todo) {
              todo.completed = selesai;
        });
};
});

Akhir sekali, lihat index.html Mari analisa bahagian demi bahagian fail ini.

Salin kod Kod adalah seperti berikut:

   
       
       
       
       
       
   
   
       

           

               

todos

               

                   
               

           

           

               
                Mark all as complete
               

                   
• 
                         
  
                             
                              {{todo.title}}
                             
                         
  
                         
  
                             
                         
  
                     

               

           

           

                {{remainingCount}}
                   
               
               

                   
• 
                          Semua
                     

                   
• 
                          Active
                     

                   
• 
                          Completed
                     

               

                Kosongkan selesai ({{completedCount}})
           

       

       

           

Klik dua kali untuk mengedit tugasan

           

Kredit:
                Christoph">http://twitter.com/cburgdorf">Christoph Burgdorf,
                Eric">http://ericbidelman.com">Eric Bidelman,
                Jacob">http://jacobmumm.com">Jacob Mumm dan
                Igor">http://igorminar.com">Igor Minar
           

           

Sebahagian daripada TodoMVChttp://todomvc.com">TodoMVC>
       

       
       
       
       
       
       
       
   

首先是在最下面，引入相应的JS，这个就不多说了。

复制代码 代码如下:

gaya 定义[ng-jubah]，含有ng-jubah属性则不可见。

复制代码 代码如下:

[ng-jubah] { paparan: tiada; }

来看添加todo的html，绑定的model为newTodo，serahkan的方法是todoCtrl.js中的 addTodo()，会添加一条todo，点击击他，亹击家他们他们从从从从从们从从从们一们记了就触发了addTodo()方法，添加了一条todo到todos中。

复制代码 代码如下:

   

再看展示todos的html

复制代码 代码如下:

   
    Tandai semua sebagai lengkap
   

       
• 
             
  
                 
                  {{todo.title}}
                 
             
  
             
  
                 
             
  
         

   

section使用ngShow方法根据todos的长度判断是否显示，加上ng-cloak属性是为了在刚开判断是否显示，加上ng-cloak属性是为了在刚开了在刚开了在刚开始窗刚开始窗刚开始无理的页面。可以去掉刷新试一试。

其中id为togol-semua的kotak semak绑定到allChecked model上，点击触发markAll(allChecked)，将allChecked的值传入，标记所有的todos。

使用ngRepeat循环产生li标签，todo in todos | penapis:statusTapis trek mengikut $index，循环todos，用statusFilter过滤，用$index追踪。ngClass绑定了两个class，{selesai: todo.completed, menyunting: todo == editedTodo}，庂果，庂果添加 kelas selesai，如果todo==editedTodo，则添加mengedit kelas。class为togol的checkbox绑定到todo.completed。todo标题展示的label绑定了双出定了双出editTodo会将todo赋给editedTodo，然后会触发下面form中的todoFocus指令，这时候form中的input可见。按Esc就触发revertEditing(todo)，我片得得片者失去焦点就触发selesaiMengedit(todo) ，保存编辑后的todo。class为musnah的button绑定了klik事件，点击触发removeTodo(todo)，删除掉该条todo。

最后看todos的统计信息展示的html

复制代码 代码如下:

    {{remainingCount}}
       
   
   

       
• 
              Semua
         

       
• 
              Active
         

       
• 
              Completed
         

   

    Kosongkan selesai ({{completedCount}})

ng-pluralize标签实现了当remainingCount个数为1时，显示 item left，否则显示 item left。

id为filters的ul标签中根据location.path()的内容不同，标记不同的a标签被选中。

id为clear-completed的button添加了点击事件，触发clearCompletedTodos()，清除掉所有已完成的todo。

今天的笔记就先到这里吧，都是些个人心得，希望小伙伴们能够喜欢。