indexedDB bootstrap angularjs之 MVC DOMO (应用示例)

"indexedDB bootstrap angularjs之 MVC DOMO"是基于HTML5 IndexedDB API、Bootstrap框架和AngularJS组件库，使用MVC模式实现的一个示例应用程序，用于演示IndexedDB在Web应用程序中的使用。

下面是详细的攻略步骤：

1. 安装必备工具和库

安装node.js和npm
安装Bower npm install -g bower
安装Grunt npm install -g grunt-cli

2. 初始化项目

创建一个新项目文件夹
在项目文件夹中执行 npm init 命令，初始化项目，生成package.json文件
创建一个新的Git仓库，并绑定到Github或GitLab等代码托管平台

3. 添加依赖库

在项目文件夹中创建一个名为bower.json的文件，并添加以下内容：

{
  "name": "indexeddb-bootstrap-angular-mvc-demo",
  "version": "0.1.0",
  "dependencies": {
    "jquery": "3.3.1",
    "bootstrap": "3.3.7",
    "angular": "1.6.9",
    "angular-route": "1.6.9",
    "angular-local-storage": "0.5.2"
  }
}

在项目文件夹中执行以下命令安装依赖库：

bower install

4. 添加源代码文件

|- app/
|  |- index.html
|  |- scripts/
|  |  |- app.js
|  |  |- controllers/
|  |  |- services/
|  |  |- database/

在app/index.html文件中添加Bootstrap样式和AngularJS库文件引用：

<!doctype html>
<html ng-app="app">
<head>
  <meta charset="utf-8">
  <title>IndexedDB Bootstrap AngularJS MVC Demo</title>

  <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="styles/app.css">

  <script src="../bower_components/angular/angular.js"></script>
  <script src="../bower_components/angular-route/angular-route.js"></script>
  <script src="../bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
  <script src="scripts/app.js"></script>
  <script src="scripts/controllers.js"></script>
  <script src="scripts/services.js"></script>
  <script src="scripts/database.js"></script>
</head>
<body ng-controller="MainController">
  ...
</body>
</html>

在app/scripts/app.js文件中添加AngularJS模块和路由器的定义：

angular.module('app', ['ngRoute', 'LocalStorageModule'])

.config(function ($routeProvider, localStorageServiceProvider) {
  ...
})

5. 添加业务逻辑代码

以添加和显示学生信息为例，以下是完整代码：

5.1. 创建学生模型

在app/scripts/database.js文件中，添加以下代码：

angular.module('app')

.factory('StudentModel', function () {
  var db;

  var open = function () {
    var request = window.indexedDB.open('students', 1);

    request.onupgradeneeded = function () {
      var db = request.result;
      db.createObjectStore('students', { keyPath: 'id' });
    };

    request.onsuccess = function () {
      db = request.result;
    };
  };

  var get = function (id, callback) {
    var transaction = db.transaction(['students']);
    var objectStore = transaction.objectStore('students');
    var request = objectStore.get(id);

    request.onsuccess = function () {
      callback(request.result);
    };
  };

  var getAll = function (callback) {
    var transaction = db.transaction(['students']);
    var objectStore = transaction.objectStore('students');
    var students = [];

    objectStore.openCursor().onsuccess = function (event) {
      var cursor = event.target.result;

      if (cursor) {
        students.push(cursor.value);
        cursor.continue();
      } else {
        callback(students);
      }
    };
  };

  var save = function (student, callback) {
    var transaction = db.transaction(['students'], 'readwrite');
    var objectStore = transaction.objectStore('students');
    var request = objectStore.put(student);

    request.onsuccess = function () {
      if (callback) callback();
    };
  };

  return {
    open: open,
    get: get,
    getAll: getAll,
    save: save
  };
});

5.2. 创建学生控制器

在app/scripts/controllers.js文件中，添加以下代码：

angular.module('app')

.controller('StudentController', function ($scope, StudentModel) {
  $scope.student = {};

  $scope.add = function () {
    StudentModel.save($scope.student, function () {
      $scope.student = {};
      $scope.loadStudents();
    });
  };

  $scope.loadStudents = function () {
    StudentModel.getAll(function (students) {
      $scope.students = students;
      $scope.$apply();
    });
  };

  StudentModel.open();
  $scope.loadStudents();
});

5.3. 添加学生视图

在app/index.html文件中，添加以下代码：

<h2>Add Student</h2>
<form class="form-inline" ng-submit="add()">
  <div class="form-group">
    <label>Student ID:</label>
    <input type="text" class="form-control" ng-model="student.id" required="required">
  </div>
  <div class="form-group">
    <label>Student Name:</label>
    <input type="text" class="form-control" ng-model="student.name" required="required">
  </div>
  <button type="submit" class="btn btn-primary">Add</button>
</form>

<hr>

<h2>Students</h2>
<table class="table table-striped">
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Student Name</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="student in students">
      <td>{{ student.id }}</td>
      <td>{{ student.name }}</td>
    </tr>
  </tbody>
</table>

6. 构建和运行项目

在项目文件夹中创建Gruntfile.js文件，并添加以下内容：

module.exports = function(grunt) {
  grunt.initConfig({
    connect: {
      server: {
        options: {
          port: 9001,
          base: '',
          livereload: true,
          open: {
            target: 'http://localhost:9001/app/'
          }
        }
      }
    },
    watch: {
      options: {
        livereload: true
      },
      html: {
        files: ['app/**/*.html', 'app/**/*.js'],
        tasks: []
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['connect', 'watch']);
};

在项目文件夹中执行以下命令启动调试服务器：

grunt

在浏览器中访问 http://localhost:9001/app/，即可看到应用程序运行效果。

以上是"indexedDB bootstrap angularjs之 MVC DOMO"的完整攻略，其中包括了添加学生信息的示例。另外一个示例是如何删除学生信息。具体实现方法与上述示例类似，只需添加一个删除学生的功能即可。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：indexedDB bootstrap angularjs之 MVC DOMO (应用示例) - Python技术站