Indexeddb Bootstrap Angularjs MVC DOMO (application example) _angularjs

1, indexeddb (Model) -Front-End browser object-oriented database, the general background of our database are relational database. So what are the characteristics of INDEXEDDB:

First, in terms of meaning it is indexed database, from the actual use can be reflected that it needs to create indexes for the table can be based on a field to obtain data, and in a relational database, this is obviously not needed.

Second, I don't need the conversion of row and column data, I just need to pass an array-like approach:

Copy Code code as follows:

Objectstore.push (data);

It's kind of like putting a JSON object into a database, isn't it violent?

　2, Bootstrap (View)--bootstrap, to be honest, I am not very familiar with this thing, after all, I was back-end Java development background. In my understanding, this is a response to the layout of the characteristics of the front-end framework, as to say more special, it should be more popular it?! To be honest, I only use CSS here, and I also think that the front-end development of post-modern, will not need to Bootstrap JS part, after all, that is the jquery-oriented way.

　3, Angularjs (Controller) --it must be admitted that the birth of this thing completely overturned my view of front-end development, and now we are still trapped in the front and back end can not completely separate the dilemma, but I think that if the latter, Front-end people generally use the application of the Angularjs script development (and some similar framework), we will no longer need to let the backend development engineers to apply a lot of front-end style, structure and so on.

So, a lot of backend people may still not understand, for example: Angularjs is a bit like JSP, Freemarker, such as rendering html things, just one at the client rendering, the other in the background server rendering. As long as we change the structure and attributes of the data, the corresponding rendered page will be different, ANGULARJS is to let us pay more attention to the change of data, rather than the change of DOM, that is to say: you will rarely write to $ ("Btnsave"). Click (function () {}); This requires capturing the scripting code for the HTML node, which can be said to be completely out of the scope of jquery. So can this be considered a trans-era change?

　　Let's go on to the example (eventually must run to the server):

User.html

<! DOCTYPE html>  

Jdbc.js (as a data-access module for each application to load the call)

' Use strict ';! (Function (w, angular) {angular.module (' db ', []). Service (' JDBC ', function ($http, $q) {var _self = this; var MyDB = {NA Me: ' Roma ', Version:1, Db:null, schema: {2:function (db) {//initialize user var customer = Db.createobjectstore (' customer ', {k
Eypath: "id", autoincrement:true});
Customer.createindex ("Customer_fname_index", "FName", {unique:true});
}
}
}; Used to handle the opposite of the callback function, when defer calls the Resolve method, it triggers the Defer.promise.then (callback) incoming callback method, and resolve can pass in any variable/** * * function Test () {* var defer = $q. Defer (); * settimeout (Watts, function () {* Defer.resolve ("hello"); *}); * Return defer
. Promise;
*} * Test (). Then (function (say) {* Console.log (say); *});
* * * 2 seconds will print out "Hello" * * @type {deferred|*}/var defer = $q. Defer ();
_self.onload = function (CB) {return Defer.promise.then (CB);}; var getdb = function (db) {var d = $q. Defer (); if (db) {d.resolve (db);}//Open database var result = Window.indexedDB.open (MyDB
. name); Result.onerror = function (e) {console.log ("Open DB ERROr! ");
D.reject ("error");
};
Correct open result.onsuccess = function (e) {var db = E.target.result; mydb.db = db; d.resolve (db);};
return d.promise;
}; _self.opendb = function (name, version, success, upgrade) {var d = $q. Defer (); var name = name | | mydb.name; var version = Version | |
Mydb.version;
Open database var result = Window.indexedDB.open (name, version);
Error Result.onerror = function (e) {console.log ("Open DB error!"); D.reject (e);};
Correctly open result.onsuccess = function (e) {mydb.db = E.target.result; if (success) success (MYDB.DB); D.resolve (e);}; Database version Change result.onupgradeneeded = function (e) {mydb.db = E.target.result; if (upgrade) upgrade (MYDB.DB); D.resolve ("Up
Gradeneeded ");
};
return d.promise;
}; var schema = function (Schema) {Angular.foreach (schema, function (upgrade, version, O) {_self.opendb (Mydb.name, version,
function () {defer.resolve ();}, function (db) {upgrade (db);});
})
};
Schema (Mydb.schema); _self.get = function (Storename, key) {var d = $q. Defer ();//PROmise Getdb (mydb.db). Then (function (db) {var transaction = db.transaction (Storename, ' readonly '); var store = transaction
. ObjectStore (Storename);
var result = Store.get (key);
result.onsuccess = function (e) {_self.result = E.target.result; D.resolve ();};
Result.onerror = function (e) {d.reject ();};
});
return d.promise;
}; _self.find = function (Storename, key, value) {var d = $q. Defer ();//promise getdb (mydb.db). Then (function (db) {var Transa
ction = Db.transaction (storename, ' ReadOnly ');
var store = Transaction.objectstore (storename);
var keyrange = idbkeyrange.only (value);
var result = Store.index (key). Opencursor (Keyrange, "next");
var results = []; result.onsuccess = function (event) {var cursor = Event.target.result; if (cursor) {Results.push (cursor.value); cursor.co
Ntinue ();
else {d.resolve (results);}};
Result.onerror = function (e) {d.reject ();};
});
return d.promise;
}; _self.put = function (storename, value) {var d = $q. Defer (); var db = Mydb.db | | getdb (); var trAnsaction = Db.transaction (storename, ' readwrite ');
var store = Transaction.objectstore (storename); if (value!== null && value!== undefined) {store.put (value); D.resolve ();} else {d.reject ();} return D.promis
E
}; _self.remove = function (storename, value) {var d = $q. Defer ();//promise var db = mydb.db | | getdb (); var transaction = d
B.transaction (storename, ' readwrite ');
var store = Transaction.objectstore (storename);
var result = Store.delete (value);
result.onsuccess = function (e) {d.resolve ();};
Result.onerror = function (e) {d.reject ();};
return d.promise;
}; _self.findall = function (storename) {var d = $q. Defer ();//promise getdb (mydb.db). Then (function (db) {var transaction = d
B.transaction (Storename, ' ReadOnly ');
var store = Transaction.objectstore (storename);
var result = Store.opencursor ();
var results = []; result.onsuccess = function (event) {var cursor = Event.target.result; if (cursor) {Results.push (cursor.value); cursor.c
Ontinue (); else {d.resolve (Results);
}
};
Result.onerror = function (e) {d.reject ();};
});
return d.promise;
};
return _self;
}); 
} (window, window.angular));
Myusers.js (Application of the Controller layer script) ' use strict '; Angular.module (' myApp ', [' DB ']). Controller ("Userctrl", Function ($scope, $http, JDBC) {//Refresh data structure, Angularjs's two-way binding will automatically render interface function reload () {Jdbc.findall ("Customer"). Then (function (response) {if (!response) {$
Http.get ("Data.json"). Success (function (response) {$scope. Users = response;});
Return
$scope. Users = response;
});
}///Data structure is completed after refreshing the interface jdbc.onload (reload);
$scope. Edit = True;
var _user = $scope. user = {}; $scope. Edituser = function (user) {if (user) {_user.id = user.id; _user.fname = user.fname; _user.lname = user.lname; _us
Er.telephone = User.telephone;
else {_user.fname = "";
_user.lname = "";
_user.telephone = "";
_user.id = "";};
$scope. DeleteUser = function (ID) {//Refresh the table data Jdbc.remove ("customer", id) after deleting records from the database. then (reload); $scope. Savecustomer = function () {//To refresh the table data jdbc after adding or updating records from the database.Put ("Customer", _user). then (reload);
};
Jdbc.find ("Customer", "Customer_fname_index", "Lin"). Then (function (data) {Console.log (data);}); 
}); Data.json (used to display data when INDEXEDDB is not available) [{"id": 1, "FName": "Lin", "lName": "Ka bin", "Telephone": "13514087953"}, {"id": 2, " FName ":" Chen "," LName ":" Xiao "," Telephone ":" 13509890786 "}]

The above is a small series to bring you the Indexeddb bootstrap Angularjs MVC DOMO (application example) of all the narrative, I hope to help you!