Flash 动画 模块详解

Flash 动画 实现详解

 1: ├── ./flash
 2: │   ├── ./flash/controllers
 3: │   │   ├── ./flash/controllers/flash.controller.js
 4: │   │   ├── ./flash/controllers/flash.controller.test.js
 5: │   │   └── ./flash/controllers/index.js
 6: │   ├── ./flash/index.js
 7: │   ├── ./flash/services
 8: │   │   ├── ./flash/services/flash.service.js
 9: │   │   ├── ./flash/services/flash.service.test.js
10: │   │   └── ./flash/services/index.js
11: │   ├── ./flash/tests.webpack.js
12: │   └── ./flash/views
13: │       └── ./flash/views/home.html

1. File: flash/index.js¹
   

    1: 'use strict';
    2: var angular = require('angular');
    3: var modulename = 'flash';
    4: 
    5: module.exports = function(namespace) {
    6:     var fullname = namespace + '.' + modulename;
    7: 
    8:     var app = angular.module(fullname, ['ui.router', 'ionic'/*, 'ngResource'*/]);
    9:     require('./services')(app);
   10:     require('../utils/services')(app);
   11:     app.namespace = app.namespace || {};
   12: 
   13:     var configRoutesDeps = ['$stateProvider', '$urlRouterProvider'];
   14:     var configRoutes = function($stateProvider, $urlRouterProvider) {
   15: 	//$urlRouterProvider.otherwise('/');
   16: 	$stateProvider.state('app.menu.flash', {
   17: 	    url: '/flash/',
   18: 	    views: {
   19: 		'menuContent@app.menu': {
   20: 		    //template: require('./views/home.html'),
   21: 		    templateProvider: ['$q', function ($q) {
   22: 			var deferred = $q.defer();
   23: 			require.ensure(['./views/home.html'], function () {
   24: 			    var template = require('./views/home.html');
   25: 			    deferred.resolve(template);
   26: 			});
   27: 			return deferred.promise;
   28: 		    }],
   29: 		    controller: fullname + '.' + 'flashCtrl'
   30: 		}
   31: 	    },
   32: 	    resolve: {
   33: 		loadFlashController: ['$q', '$ocLazyLoad', function ($q, $ocLazyLoad) {
   34: 		    var deferred = $q.defer();
   35: 		    require.ensure([], function () {
   36: 			require('./controllers/index.js')(app);
   37: 			require('./services/index.js')(app);
   38: 			$ocLazyLoad.load({
   39: 			    name: app.name
   40: 			});
   41: 			deferred.resolve(/*module.controller*/);
   42: 		    });
   43: 
   44: 		    return deferred.promise;
   45: 		}]
   46: 	    }
   47: 
   48: 	});
   49:     };
   50:     configRoutes.$inject = configRoutesDeps;
   51:     app.config(configRoutes);
   52: 
   53:     return app;
   54: };

2. File: flash/controller/flash.controller.js²
   

    1: 'use strict';
    2: var controllername = 'flashCtrl';
    3: 
    4: module.exports = function (app) {
    5:     var fullname = app.name + '.' + controllername;
    6:     /*jshint validthis: true */
    7: 
    8:     var deps = ['$scope', '$state', 'flashService'];
    9: 
   10:     function controller($scope, $state, flashService) {
   11: 	var vm = this;
   12: 	vm.controllername = fullname;
   13: 
   14: 	var activate = function () {
   15: 	    flashService.createDB().then(function () {
   16: 		flashService.initDB();
   17: 		// Get all flash records from the database.
   18: 		flashService.getAllFlashs().then(function (flashs) {
   19: 		    $scope.flashs = flashs;
   20: 		});
   21: 	    });
   22: 	};
   23: 	activate();
   24: 
   25: 	$scope.setupflash = function (cat) {
   26: 	    window.localStorage.fid = cat.id;
   27: 	    $state.go('app.menu.home', {
   28: 		fid: window.localStorage.fid,
   29: 		mid: window.localStorage.mid,
   30: 		pid: window.localStorage.pid,
   31: 		tid: window.localStorage.tid,
   32: 		did: window.localStorage.did,
   33: 		cid: window.localStorage.cid
   34: 	    });
   35: 	};
   36:     }
   37: 
   38:     controller.$inject = deps;
   39:     app.controller(fullname, controller);
   40: };

3. file: flash/service/flash.service.js³
   

  1: 'use strict';
  2: var servicename = 'flashService';
  3: 
  4: var PouchDB = require('pouchdb');
  5: var pouchFlash = new PouchDB('flashs', {adapter: 'websql', size: 1});
  6: if (!pouchFlash.adapter) { // websql not supported by this browser
  7:     pouchFlash = new PouchDB('flashs');
  8: }
  9: PouchDB.plugin(require('pouchdb-find'));
 10: if (process.env.SENTRY_MODE !== 'prod') {
 11:     PouchDB.debug.enable('*');
 12: } else {
 13:     PouchDB.debug.disable();
 14: }
 15: 
 16: module.exports = function (app) {
 17: 
 18:     var dependencies = ['$q', 'utilsService'];
 19: 
 20:     function service($q, utilsService) {
 21: 	var _db;
 22: 	var _flashs = [];
 23: 	var _ddoc = [];
 24: 
 25: 	return {
 26: 	    createDB: createDB,
 27: 	    initDB: initDB,
 28: 	    getAllFlashs: getAllFlashs
 29: 	};
 30: 
 31: 	function createDB() {
 32: 	    var deferred = $q.defer();
 33: 
 34: 	    function myBulkDocs(_ddoc) {
 35: 		pouchFlash.bulkDocs({docs: _ddoc}, function (err, response) {
 36: 		    // handle err or response
 37: 		    if (err) {
 38: 			console.log(err);
 39: 		    } else {
 40: 			window.localStorage.setItem('flashDBCreated', true);
 41: 			deferred.resolve();
 42: 		    }
 43: 		});
 44: 	    }
 45: 
 46: 	    //window.localStorage.removeItem("flashDBCreated");
 47: 	    if (!JSON.parse(window.localStorage.getItem('flashDBCreated'))) {
 48: 		pouchFlash.destroy().then(function (response) {
 49: 		    // success
 50: 		    // Creates the database or opens if it already exists
 51: 		    pouchFlash = new PouchDB('flashs', {adapter: 'websql', size: 1});
 52: 		    if (!pouchFlash.adapter) { // websql not supported by this browser
 53: 			pouchFlash = new PouchDB('flashs');
 54: 		    }
 55: 
 56: 		    pouchFlash.createIndex({
 57: 			index: {
 58: 			    fields: ['id']
 59: 			}
 60: 		    }).then(function (result) {
 61: 			pouchFlash.find({
 62: 			    selector: {id: 1},
 63: 			    fields: ['id'/*, 'name'*/],
 64: 			    sort: ['id']
 65: 			}).then(function (result) {
 66: 			    if (!result.docs.length) {
 67: 				if (!_ddoc.length) {
 68: 				    utilsService.getFlashResource().then(function (source) {
 69: 					_ddoc = source;
 70: 					myBulkDocs(_ddoc);
 71: 				    });
 72: 				} else {
 73: 				    myBulkDocs(_ddoc);
 74: 				}
 75: 			    }
 76: 			}).catch(function (err) {
 77: 			    // ouch, an error
 78: 			    console.log(err);
 79: 			});
 80: 		    }).catch(function (err) {
 81: 			// ouch, an error
 82: 			console.log(err);
 83: 		    });
 84: 		}).catch(function (err) {
 85: 		    console.log(err);
 86: 		    alert(err);
 87: 		});
 88: 	    } else {
 89: 		deferred.resolve();
 90: 	    }
 91: 	    return deferred.promise;
 92: 	}
 93: 
 94: 	function initDB() {
 95: 	    // Creates the database or opens if it already exists
 96: 	    _db = new PouchDB('flashs', {adapter: 'websql', size: 1});
 97: 	    if (!_db.adapter) { // websql not supported by this browser
 98: 		_db = new PouchDB('flashs');
 99: 	    }
100: 	}
101: 
102: 	function getAllFlashs() {
103: 	    if (!_flashs.length) {
104: 		return $q.when(
105: 		    _db.find({
106: 			    selector: {id: {$gt: 0}},
107: 			sort: ['id']
108: 			/* skip: 1,109: 			   limit: 5*/
109: 			   limit: 5*/
110: 		    }))
111: 		    .then(function (docs) {
112: 			_flashs = docs.docs.map(function (row) {
113: 			    return row;
114: 			});
115: 
116: 			return _flashs;
117: 		    }).catch(function (err) {
118: 			console.log('err ', err);
119: 		    });
120: 	    } else {
121: 		// Return cached data as a promise
122: 		return $q.when(_flashs);
123: 	    }
124: 	}
125:     }
126: 
127:     service.$inject = dependencies;
128:     app.factory(servicename, service);
129: };

Footnotes:

¹

flash/index.js

²

flash/controoler/flash.controller.js

³

flash/service/flash.service.js