AngularJS-记事本应用程序

简介

这是一个使用AngularJS开发的记事本应用程序。它具有以下功能：

• 添加/编辑/删除笔记
• 标记笔记为已完成/未完成
• 搜索笔记
• 存储笔记到本地存储中

技术栈

该应用程序使用以下技术：

• AngularJS作为前端框架
• Bootstrap作为UI框架
• LocalStorage用于存储笔记数据

应用架构

该应用程序由以下组件构成：

• AppController：主控制器，负责管理笔记列表和搜索操作。
• EditController：笔记编辑控制器，负责添加/编辑笔记。
• NoteService：笔记服务，负责管理笔记数据。
• note-list.html：笔记列表HTML模板。
• edit-note.html：笔记编辑HTML模板。

应用演示

代码示例

AppController

app.controller('AppController', ['$scope', 'NoteService', function($scope, NoteService) {
  $scope.notes = NoteService.getAllNotes();
  
  $scope.search = function() {
    $scope.notes = NoteService.searchNotes($scope.query);
  };
  
  $scope.updateStatus = function(note) {
    NoteService.updateNoteStatus(note);
  };
  
  $scope.deleteNote = function(note) {
    NoteService.deleteNote(note);
  };
}]);

EditController

app.controller('EditController', ['$scope', '$location', 'NoteService', function($scope, $location, NoteService) {
  var noteId = $location.search().id;
  
  if (noteId) {
    $scope.note = NoteService.getNoteById(noteId);
  } else {
    $scope.note = {};
  }
  
  $scope.saveNote = function() {
    NoteService.saveNote($scope.note);
    $location.path('/');
  };
}]);

NoteService

app.factory('NoteService', function() {
  var notes = JSON.parse(localStorage.getItem('notes') || '[]');
  
  function saveNotes() {
    localStorage.setItem('notes', JSON.stringify(notes));
  }
  
  return {
    getAllNotes: function() {
      return notes;
    },
    getNoteById: function(id) {
      for (var i = 0; i < notes.length; i++) {
        if (notes[i].id == id) {
          return notes[i];
        }
      }
      return null;
    },
    saveNote: function(note) {
      if (note.id) {
        for (var i = 0; i < notes.length; i++) {
          if (notes[i].id == note.id) {
            notes[i].title = note.title;
            notes[i].text = note.text;
            notes[i].status = note.status;
            break;
          }
        }
      } else {
        notes.push({
          id: new Date().getTime(),
          title: note.title,
          text: note.text,
          status: '未完成'
        });
      }
      saveNotes();
    },
    deleteNote: function(note) {
      for (var i = 0; i < notes.length; i++) {
        if (notes[i].id == note.id) {
          notes.splice(i, 1);
          break;
        }
      }
      saveNotes();
    },
    updateNoteStatus: function(note) {
      for (var i = 0; i < notes.length; i++) {
        if (notes[i].id == note.id) {
          notes[i].status = note.status;
          break;
        }
      }
      saveNotes();
    },
    searchNotes: function(query) {
      return notes.filter(function(note) {
        return note.title.indexOf(query) > -1 || note.text.indexOf(query) > -1;
      });
    }
  };
});

结论

AngularJS是一种非常强大的Javascript框架，可以用来构建各种类型的Web应用程序，包括记事本和其他类型的应用程序。AngularJS提供了许多有用的功能和工具，从而简化了前端应用程序的开发，同时也提供了很好的代码重用机制和可维护性。