I will try to spare my time to work on a ionic2 version in typescript.
in the 0.7.2
- Add encode option for URI
- Roll back
watchtoobserve - Find
java.io.EOFExceptionissue for old android causing the fileTransfer failed, if so don't cache.
in the 0.7.0
- Now support Video and Audio Tag
- Fix Bugs from several issues
- Add more examples
- Demo and Example: https://github.com/BenBBear/ionic-cache-src-demo
- Ng-repeat
- Collection Repeat
- Video
Just change src to cache-src
<img alt="" cache-src="http://a1.att.hudong.com/03/23/01300000332400125809239727476.jpg"/>and it will take the rest work for you.
- bower
bower install ionic-cache-src- it depends on ngStorage, ngCordova, angular-svg-round-progress so you have to load them both in you
index.html
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<script src="cordova_plugins.js"></script> <!-- This one is optional -->
<script src="lib/ngstorage/ngStorage.min.js"></script>
<script src="lib/angular-svg-round-progressbar/build/roundProgress.min.js"></script>
<script src="lib/ionic-cache-src/ionic-cache-src.js"></script>- and it use cordova-plugin-file-transfer and cordova-plugin-file, so
cordova plugin add cordova-plugin-file cordova-plugin-file-transfer- add
ionic-cache-srcto your angular module declaration dependencies
angular.module('myApp', ['ionic','ionic-cache-src'])- Done
very simple strategy
it accepts all options for angular-svg-round-progressbar , except for current
<img cache-src="" src-is="alt" />will be rendered to
<img alt="file://xxx/xx/xxx.jpg" />not so useful though.
<div cache-src="http://farm4.static.flickr.com/3131/2877192571_3eb8bcf431.jpg"
src-is="background" >
<!-- stuff -->
</div><video id="video" width="400" controls cache-src="http://vjs.zencdn.net/v/oceans.png" src-is="poster">
<source cache-src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video><img alt="" cache-src="http://a1.att.hudong.com/03/23/01300000332400125809239727476.jpg" expire="{{60}}"/>Set expiration time to 60 seconds. At the next page load and directive linking, this cache will be renewed if 60s passed. But there wouldn't be progress circle, the image will be replaced after the newly downloaded file is ready.
The expiration time is Infinity by default.
<img alt="" cache-src="http://a1.att.hudong.com/03/23/01300000332400125809239727476.jpg" encode-uri="false"/>CordovaFileTransfer encodes URL by default, but some urls don't need. See this issue #17
<div cache-src="http://farm4.static.flickr.com/3131/2877192571_3eb8bcf431.jpg"
src-is="background"
background-style="no-repeat center"
background-loading-style="url('path/to/your/loading/image.gif') no-repeat center"
>
<!-- stuff -->
</div>background-stylewill be used as
<div style="background:url('image/url') {{backgroundStyle}}">
<!-- stuff -->
</div>- Default
background-loading-styleisurl('lib/ionic-cache-src/img/loader.gif') no-repeat center
By default the progress circle is a block div, here is source code.
function makeProgressCircle($scope, $compile) {
return angular.element($compile('<div style="{{circleContainerStyle}}"><div round-progress max="max" current="progress" color="{{color}}" bgcolor="{{bgcolor}}" radius="{{radius}}" stroke="{{stroke}}" rounded="rounded" clockwise="clockwise" iterations="{{iterations}}" animation="{{animation}}"></div></div>')($scope));
};So you could change its style using circleContainerStyle
<div class="list">
<a class="item item-avatar" href="#">
<img cache-src="http://x1.zhuti.com/down/2012/12/13-win7/llx-1.jpg"
circle-container-style="display:inline-block;position:absolute;left:30px;"/>
<h2>inline progress circle</h2>
<p>Test Progress Circle as inline block</p>
</a>
</div><img cache-src="" on-error="onError" on-start="onStart" on-finish="onFinish" on-progress="fun" />function onError(err){}
function onStart(originUrl){}
function onFinish(naiveUrl){}
function onProgress(number){}Note that the OnProgress and OnStart will only be called if a download is needed.
It will works in browser with a mock download process.
The plugin will download and cache the file if the url is
http,httpsorftp, otherwise it won't.
So it works for local file path, or base64 etc...
This plugin store cache info as $localstorage.cache_src = {RemoteUrl:LocalUrl}, and there is a factory you could used to access the cache:
module.controller('Ctrl', function(cacheSrcStorage) {
cacheSrcStorage.get('url') // === the local cache path for 'url'
});which you can use to access the cached file
module.config(function($cacheSrcProvider){
$cacheSrcProvider
.set('key',value)
.set({key:value}); // set option
})Key, Value for options like
-
srcIs -
onErrorfor global use etc... -
showProgressCircleInBrowserwhether show progress circle in browser -
showProgressCircleInDevicewhether show progress circle in device -
intervalbrowser mock progress circle period, by default 200. -
options for progress circle angular-svg-round-progressbar
-
backgroundStyleandbackgroundLoadingStyle -
circleContainerStyle -
expire -
Anything you like, if you use custom progress indicator.
Note that the in-tag config has the higher priority than $cacheSrcProvider
Use callback
uiOnStart, uiOnProgress, uiOnFinish
You could take reference of the default source of this three functions, which implements the progress circle, and write your custom progress indicator.
To use your own uiOn* functions
module.config(function($cacheSrcProvider){
$cacheSrcProvider
.set('uiOnStart', myUiOnStart)
.set('uiOnProgress', myUiOnProgress)
.set('uiOnFinish', myUiOnFinish);
}); Because of ionic-team/ionic-plugin-keyboard#82 , the ionicPlatform.ready may fail from exception. If you encounter this problem, Add
<script src="cordova_plugins.js"></script>solve it.
For android, you may need to add this
<preference name="AndroidPersistentFileLocation" value="Internal" />to your config.xml, as mentioned in #10. Otherwise the image won't be loaded, and no error console.log.
When using live reload, you’re actually running the assets off the computer and not the device
You will get an error: Not allowed to load local resource, but it will only occur when livereloading.
Because iOS 9 forbids arbitrary http request, you may add
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key><true/>
</dict>to you .plist file. Details in this gist: https://gist.github.com/mlynch/284699d676fe9ed0abfa
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
