<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js@*" data-semver="1.3.5" src="https://code.angularjs.org/1.3.5/angular.js"></script>
<script data-require="angular-resource@1.3.5" data-semver="1.3.5" src="https://code.angularjs.org/1.3.5/angular-resource.js"></script>
<script data-require="angular-router@1.2.0-rc1" data-semver="1.2.0-rc1" src="http://code.angularjs.org/1.2.0rc1/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="directive1.js"></script>
<script src="directive2.js"></script>
<script src="directive3.js"></script>
<script src="directive4.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<h3>HOME: {{title}}</h3>
<pm-directive1 title="pm1-title" subtitle="pm1-subtitle" description="pm1-description">
<pm-directive2></pm-directive2>
<pm-directive3></pm-directive3>
<pm-directive4 attr="" method="" ng-obj=""></pm-directive4>
</pm-directive1>
</div>
</body>
</html>
'use strict';
var app = angular.module('myApp', ['ngResource', 'ngRoute']);
app.controller('myCtrl', function($scope) {
$scope.title = 'A parent directive include 3 RESFUL apis sub-directives';
$scope.pmd1 = {
title: 'myCtrl-title',
subtitle: 'myCtrl-subtitle',
description: 'myCtrl-description'
};
$scope.pmd2 = {};
$scope.pmd3 = {};
$scope.pmd4 = {};
$scope.name = ' -myCtrl- ';
});
/* Styles go here */
<h3>1. {{name}}</h3>
<div>1. this is in <strong>pm-directive1.html</strong>.</div>
<ul>
<li>title: {{title}}</li>
<li>subtitle: {{subtitle}}</li>
<li>description: {{description}}</li>
</ul>
<ng-transclude>1. this is in ng-transclude.</ng-transclude>
<h3>2. this is pm-directive2.html</h3>
<h3>3. this is pm-directive3.html</h3>
'use strict';
var app = angular.module('myApp');
app.constant('REST_URL', 'http://54.164.157.178:7070/common/platform')
// 401 error:
app.config(function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
$httpProvider.defaults.headers.put['Content-Type'] = 'application/json';
delete $httpProvider.defaults.headers.common['X-Requested-With'];
})
// headers: {'PubToken': 'adminuser'}
app.service('RestService', ['$q', '$http', 'REST_URL',
function($q, $http, REST_URL) {
return function() {
var deferred = $q.defer();
$http({
method: 'GET',
url: 'http://54.164.157.178:7070/common/platform',
headers: {
"PubToken": "adminuser"
}
})
.success(function(data) {
deferred.resolve(data);
})
.error(function(data) {
deferred.resolve(data);
});
return deferred.promise;
}
}
]);
app.factory('RestFactory', ['$q', '$http', 'REST_URL',
function($q, $http, REST_URL) {
return {
get_restful: function() {
var deferred = $q.defer();
$http({
method: 'GET',
url: REST_URL,
dataType: 'json',
headers: {
"PubToken": "adminuser"
}
})
.success(function(data) {
deferred.resolve(data);
})
.error(function(data) {
deferred.resolve(data);
});
return deferred.promise;
}
}
}
]);
app.directive('pmDirective1', ['RestService', 'RestFactory',
function(RestService, RestFactory) {
return {
restrict: 'E',
transclude: true,
scope: {
title: '@',
subtitle: '@',
description: '@'
},
templateUrl: 'directive1.html',
controller: function($scope) {
$scope.name = $scope.name + ' -controller- ';
var promise = RestService();
//var promise = RestFactory.get_restful();
promise.then(function(data) {
console.log('Success: ', data);
}, function(reason) {
console.log('Failed: ', reason);
}, function(update) {
console.log('Got notification: ' + update);
});
},
link: function(scope, element, attrs) {
scope.name = scope.name + ' -link- ';
}
}
}
]);
'use strict';
angular.module('myApp')
.directive('pmDirective2', function() {
return {
restrict: 'E',
transclude: true,
controller: ['$scope', '$q', function($scope, $q) {
function okToGreet(name){
return name === 'Robin Hood';
}
function asyncGreet(name) {
var deferred = $q.defer();
setTimeout(function() {
$scope.$apply(function() {
deferred.notify('About to greet ' + name + '.');
if (okToGreet(name)) {
deferred.resolve('Hello, ' + name + '!');
} else {
deferred.reject('Greeting ' + name + ' is not allowed.');
}
});
}, 1000);
return deferred.promise;
}
var promise = asyncGreet('Robin Hood');
promise.then(function(greeting) {
console.log('Success: ' + greeting);
}, function(reason) {
console.log('Failed: ' + reason);
}, function(update) {
console.log('Got notification: ' + update);
});
}],
link: function(scope, element, attrs) {
}
}
});
'use strict';
var app = angular.module('myApp');
app.factory('Recipe', ['$resource', 'REST_URL',
function($resource, REST_URL) {
//return $resource('/pubmatic/api/orders/:id', {id: '@id'}
return $resource(REST_URL, {}, {
get: {
headers: {
"PubToken": "adminuser"
}
}
});
}
]);
app.service('MultiRecipeLoader', ['Recipe', '$q',
function(Recipe, $q) {
return function() {
var delay = $q.defer();
Recipe.query(function(recipes) {
delay.resolve(recipes);
}, function() {
delay.reject('Unable to fetch recipes');
});
return delay.promise;
}
}
]);
app.service('RecipeLoader', ['Recipe', '$route', '$q',
function(Recipe, $route, $q) {
return function() {
var delay = $q.defer();
Recipe.get({
id: $route.current.params.id
}, function(recipe) {
delay.resolve(recipe);
}, function() {
delay.reject('Unable to fetch recipe ' + $route.current.params.id);
})
return delay.promise;
}
}
]);
app.directive('pmDirective3', function() {
return {
restrict: 'E',
controller: ['$scope', 'MultiRecipeLoader',
function($scope, MultiRecipeLoader) {
var promise = MultiRecipeLoader();
promise.then(function(data) {
console.log(data)
}, function(reason) {
console.log('Failed: ' + reason);
}, function(update) {
console.log('Got notification: ' + update);
})
}
],
link: function(scope, element, attrs) {
}
}
});
'use strict';
var app = angular.module('myApp');
app.directive('pmDirective4', function() {
return {
restrict: 'E',
controller: function($scope) {
}
}
});