<!DOCTYPE html>
<html ng-app='cacheAppModule'>
<head>
<link data-require="kendoUI@2014.2.716" data-semver="2014.2.716" rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css" />
<link data-require="kendoUI@2014.2.716" data-semver="2014.2.716" rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css" />
<link data-require="bootstrap@3.2.0" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap@3.2.0" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script data-require="angular.js@1.3.0-beta.16" data-semver="1.3.0-beta.16" src="https://code.angularjs.org/1.3.0-beta.18/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.0-beta.18/angular-route.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<!--custom javascript and css file-->
<link rel="stylesheet" href="Cache.css" />
<script src="CacheApp.js"></script>
<script src="CacheController.js"></script>
<script src="CacheFactory.js"></script>
</head>
<body>
<div class="bg-success center" align="center" ng-view></div>
</body>
</html>
Angularjs Cache Some Value
=========
Using $routeProvider,$cacheFactory,$viewContentLoaded,$routeChangeStart
- When ng-view is changed we can listener on $viewContentLoaded in order to load we have cached value.
- When ng-view is changestart we can listener on $routeChangeStart in order to save some value in caches.
- We can use key/value method with $cacheFactory and key is your localpath like '/main' but value can use json to save.
- The json can use key/value method to save like key is variable name and value is variable's value.
- When getting cache we use local path key to get json and setting variable from json like this.
- --------------
```sh
$scope.variableName = json.variableName
```
> First we hava index.html to show main.html and detail.html and
> in main.html's [mainController] hava [mainData] include three title string for detail.html in the end
> the detail.html can show title with main's mainData
Reference
-----------
* [$routeProvider] - Used for configuring routes.
* [$cacheFactory] - Cache objects and gives access to them.
* [$viewContentLoaded] - Emitted every time the ngView content is reloaded.
* [$routeChangeStart] - Broadcasted before a route change.
[$routeProvider]:https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
[$cacheFactory]:https://docs.angularjs.org/api/ng/service/$cacheFactory
[$viewContentLoaded]:https://docs.angularjs.org/api/ngRoute/directive/ngView
[$routeChangeStart]:https://docs.angularjs.org/api/ngRoute/service/$route
/**
* Created by WillChen on 2014/9/30.
*/
(function(){
angular.module('cacheAppModule',['ngRoute','cacheControllerModule','kendo.directives'])
.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/main',{
templateUrl: 'main.html',
controller: 'mainController'
}).when('/details/:detailsID',{
templateUrl: 'detail.html',
controller: 'detailController'
}).otherwise({
redirectTo: '/main'
})
}]).directive('focus',function($timeout){
return{
scope:{
isFocus: '='
},
link: function(scope,element){
scope.$watch('isFocus',function(value){
if (value){
$timeout(function(){
element[0].focus();
})
}
})
}
}
});
})();
/**
* Created by WillChen on 2014/9/30.
*/
(function () {
angular.module('cacheControllerModule', ['ngRoute', 'cacheFactoryModule'])
.controller('mainController', function (cacheFactory, $scope, $location) {
$scope.nowPath = $location.path();
var DataClass = function (title) {
this.title = title;
}
$scope.mainDatas = [new DataClass('This is title for detail1'), new DataClass('This is title for detail2'), new DataClass('This is title for detail3')];
$scope.$on('$viewContentLoaded', function () {
$scope.onLoad()
});
$scope.$on('$routeChangeStart', function (event, next, current) {
$scope.routeChangeStart()
});
$scope.onLoad = function () {
var cacheDatas = cacheFactory.loadCacheData($scope.nowPath);
if (!cacheDatas) return;
$scope.mainInputTextBox = cacheDatas.mainInputTextBox;
}
$scope.routeChangeStart = function () {
cacheFactory.putData($scope.nowPath, {'mainInputTextBox': $scope.mainInputTextBox});
cacheFactory.putData('tmpParameter', $scope.mainDatas);
}
})
.controller('detailController', function ($scope, $routeParams, $location, cacheFactory) {
$scope.nowPath = $location.path();
$scope.$on('$viewContentLoaded', function () {
$scope.onLoad()
});
$scope.$on('$routeChangeStart', function () {
$scope.routeChangeStart()
});
$scope.onLoad = function () {
var cacheDatas = cacheFactory.loadCacheData($scope.nowPath);
if (cacheDatas) $scope.detailInputTextBox = cacheDatas.detailInputTextBox;
$scope.mainDatas = cacheFactory.loadCacheData('tmpParameter');
$scope.whichId = parseInt($routeParams.detailsID);
if ($routeParams.detailsID > 0)
$scope.prevGuitar = $scope.whichId - 1;//前一筆
else
$scope.prevGuitar = $scope.mainDatas.length - 1;//小於0則設為最後一筆
$scope.nextGuitar = ($scope.whichId + 1) % $scope.mainDatas.length;
}
$scope.routeChangeStart = function () {
cacheFactory.putData($scope.nowPath, {'detailInputTextBox': $scope.detailInputTextBox});
}
});
})();
/**
* Created by WillChen on 2014/9/30.
*/
(function(){
angular.module('cacheFactoryModule',[])
.factory('cacheFactory',function($cacheFactory){
var cache = $cacheFactory('myCache');
return{
putData: function(key,values){
cache.put( key, values );
},
loadCacheData: function(key){
return cache.get(key);
}
}
});
})();
.bg-success.center{
width:20em;
margin: auto;
text-align:center;
}
.bg-success.center div{
padding-top: 10px;
margin-top:20px;
}
.playlist {
width: 100%;
height: 150px;
background-color: #dff0d8;
border-radius: 5px;
border: 1px solid rgba(0,0,0,.1);
max-height: 200px;
overflow: auto;
position: relative;
text-align: center;
}
.playlist li{
color: #6859ff;
font-size: 1.4em;
}
<div>
<input type="text"
ng-model="mainInputTextBox"
placeholder="Search some value..."
focus is-focus="true"
/>
<div class="playlist">
<li ng-repeat="dataItem in mainDatas|filter:mainInputTextBox"><a href="#/details/{{$index}}"> {{dataItem.title}}</a></li>
</div>
<a class="btn btn-success" href="#/details/0" >Go to Detail</a>
</div>
<div>
<h3><span class="label label-default">{{mainDatas[whichId].title}}</span></h3>
<hr>
<input type="text"
ng-model="detailInputTextBox"
placeholder="Please Input somvalue..."
focus is-focus="true"
/>
<a class="btn btn-success" href="#/main">Go to main.html</a>
<hr>
<a class="btn btn-info" href="#/details/{{prevGuitar}}">Preview</a>
<a class="btn btn-info" href="#/details/{{nextGuitar}}">Next</a>
</div>