var app = angular.module('plunker', ['ngRoute']);
app.controller('MainCtrl', function($scope, myService) {
$scope.name = 'World';
});
app.controller('TestCtrl', function($scope, myService) {
$scope.name = 'World';
console.log("data",myService.getPreloadedImages());
});
app.controller('PreloadDataCtrl', function($scope, myService) {
$scope.name = 'World';
$scope.images = myService.getPreloadedImages().data;
});
app.controller('PreloadDataAndCacheViewCtrl', function($scope, myService) {
$scope.name = 'World';
$scope.images = myService.getPreloadedImages().data;
});
app.config(function($routeProvider){
$routeProvider.when('/', {
controller: 'MainCtrl as test',
templateUrl: 'main.html'
})
.when('/test', {
controller: 'TestCtrl as test',
templateUrl: 'test.html'
})
.when('/preload', {
controller: 'PreloadDataCtrl',
templateUrl: 'PreloadData.html'
})
.when('/preloadandCache', {
controller: 'PreloadDataAndCacheViewCtrl',
templateUrl: 'PreloadDataAndCache.html'
})
.otherwise('/');
})
app.service('myService', function($http){
var images;
this.getLinks = function() {
return {
'yahoo' : 'https://www.yahoo.com/',
'google' : 'https://www.google.com/',
'msn' : 'http://www.msn.com/'
}
}
this.getImages = function(){
return $http.get('http://jsonplaceholder.typicode.com/albums/1/photos').
success(function(data, status, headers, config) {
return data;
}).
error(function(data, status, headers, config) {
// log error
});
};
this.preloadImages = function(){
this.getImages().then(function(data){
images = data;
});
};
this.getPreloadedImages = function(){
return images;
};
});
app.run(function($templateCache, myService){
// preloads images from service
myService.preloadImages();
// preloads links from service
var myLinks = myService.getLinks();
// view built from links from service
var myView = "<div class='well'><h2>Preload and Prebuild View Test </h2></div>" +
" <ul class='nav nav-tabs'><li><a ng-href=" + myLinks.google +"> Google</a></li>"+
" <li><a ng-href=" + myLinks.yahoo +"> yahoo</a></li>"+
" <li><a ng-href=" + myLinks.msn +">Msn</a></li>"+
" </ul>";
// building view for cahe
var secondCache = '<div class="well"><h2>Preloaded data and cached template on app load</div> </h2><div class="col-md-6 well" ng-repeat = "image in images"><div>'+
'<img ng-src="{{image.url}}" class="img-circle"></div>'+
'<div ><h3>Cateogory id : {{image.albumId}}</h3><h6>Product Id: {{image.id}}</h6>'+
'<h6>Description: {{image.title}}</h6></div></div>'
//caching links view
$templateCache.put('test.html', myView);
// caching image v
$templateCache.put('PreloadDataAndCache.html', secondCache);
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js" data-semver="1.4.7"></script>
<script data-require="ng-route@*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0-rc.3/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body class="container-fluid">
<nav class="navbar navbar-default">
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#/">Main</a></li>
<li role="presentation"> <a href="#/test">Preload data and Prebuild view Test</a></li>
<li role="presentation"><a href="#/preload">Preload data test</a></li>
<li role="presentation"><a href="#/preloadandCache">Preload data and Cache View test</a></li>
</ul>
</nav>
<div class="row" ng-view></div>
</body>
</html>
/* Put your css in here */
<div class="well"><h2>Random Home page </h2></div>
<div class="well"><h2>Preloaded data on app load </h2></div>
<div class="col-md-6 well" ng-repeat = "image in images">
<div>
<img ng-src="{{image.url}}" class="img-circle">
</div>
<div >
<h3>Cateogory id : {{image.albumId}}</h3>
<h6>Product Id: {{image.id}}</h6>
<h6>Description: {{image.title}}</h6>
</div>
</div>