(function() {
'use strict';
angular
.module('app',[
'ngAnimate',
'ngResource',
'ui.bootstrap'
])
})();
//var app = angular.module('app', ['ngAnimate', 'ngResource', 'ui.bootstrap']);
// (function () {
// 'use strict';
// angular
// .module('app', [
// 'ngAnimate',
// 'ngResource',
// 'ui.bootstrap'
// ]);
// });
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<!-- script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.13/angular.js" data-semver="1.2.13"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.min.js"></script -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="//code.angularjs.org/1.5.0-rc.1/angular-resource.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js"></script>
<link src="css/app.css" ref="stylesheet">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="app" ng-controller="MainCtrl as MainCtrl">
<h6>Hello {{name}}!</h6>
<div ng-show="loading"><img src="http://www.ingleinternational.com/images/global/loading.gif" /></div>
<div id="users">
<ul>
<li ng-repeat="user in MainCtrl.users ">
id : {{user.id}}
<br/> Name : {{user.name}}
<br/> username : {{user.username}}
<br/>
</li>
</ul>
</div>
<hr>
<div>
<label for="singleSelect"> Single select: </label><br>
<select name="singleSelect" id="singleSelect" ng-model="MainCtrl.singleSelect">
<option value="" selected="selected">---Please select---</option> <!-- not selected / blank option -->
<option ng-repeat="i in MainCtrl.users" value="{{i.id}}">{{i.name}}</option> <!-- interpolation -->
</select><br>
<tt>singleSelect = {{MainCtrl.singleSelect}}</tt>
</div>
<hr>
<div>
<button id="item-button" type="button" class="btn btn-primary" ng-click="MainCtrl.getitem(MainCtrl.singleSelect);">Get Item Selected</button>
<ul>
<li>id#: {{MainCtrl.singleitem.id}}</li>
<li>Name: {{MainCtrl.singleitem.name}}</li>
<li>username: {{MainCtrl.singleitem.username}}</li>
<li>email: {{MainCtrl.singleitem.email}}</li>
</ul>
</div>
<hr>
<div class="btn-group" uib-dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li ng-repeat="i in MainCtrl.users" role="menuitem"><a href="#">{{i.name}}</a></li>
<li class="divider"></li>
<li role="menuitem"><a href="#">Separated link</a></li>
</ul>
</div>
<hr>
<!-- Split button -->
<div class="btn-group" uib-dropdown>
<button id="split-button" type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger" uib-dropdown-toggle>
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul uib-dropdown-menu role="menu" aria-labelledby="split-button">
<li role="menuitem"><a href="#">Action</a></li>
<li role="menuitem"><a href="#">Another action</a></li>
<li role="menuitem"><a href="#">Something else here</a></li>
<li class="divider"></li>
<li role="menuitem"><a href="#">Separated link</a></li>
</ul>
</div>
<hr>
<pre><code>{{MainCtrl.users | json}}</code></pre>
</body>
</html>
/* Put your css in here */
(function() {
'use strict';
angular
.module('app')
.controller('MainCtrl', MainCtrl);
function MainCtrl($scope, $sce, jsonService) {
var vm = this;
vm.name = 'world';
vm.loading = true;
vm.sigleSelect;
vm.toggled;
vm.getitem;
vm.toggleDropdown;
vm.response;
vm.users;
vm.loading;
vm.singleitem;
// $scope.name = 'World';
// $scope.loading = true;
// $scope.singleSelect = '';
//
jsonService.getjson().then(function(d) {
console.log("bigctrl" + d);
vm.response = d.data;
vm.users = d.data;
vm.loading = false;
});
function getitem(user) {
console.log('getitem:',user);
if (user) {
jsonService.getitem(user)
.then(function(d){
console.log(d);
var data = {d:data};
vm.singleitem = data;
});
} else {
vm.singleitem = null;
}
}
vm.status = {
isopen: false
};
function toggled (open) {
$log.log('Dropdown is now: ', open);
};
function toggleDropdown ($event) {
$event.preventDefault();
$event.stopPropagation();
vm.status.isopen = !vm.status.isopen;
};
}
})();
(function() {
'use strict';
angular
.module('app')
.factory('jsonService', jsonService);
function jsonService ($http) {
var service = {
getjson: getjson,
getitem: getitem
};
return service;
function getjson() {
// $http returns a promise, which has a then function, which also returns a promise
var promise = $http.get('https://jsonplaceholder.typicode.com/users')
.then(function(response) {
// The then function here is an opportunity to modify the response
console.log("big" + response);
console.log("json", JSON.parse(JSON.stringify(response)))
// The return value gets picked up by the then in the controller.
//
// I do not know where he draws the term data
// can be an expression of Angular
//
return JSON.parse(JSON.stringify(response));
});
// Return the promise to the controller
return promise;
}
function getitem (value) {
// $http returns a promise, which has a then function, which also returns a promise
var promise = $http.get('https://jsonplaceholder.typicode.com/users/'+value)
.then(function(response) {
// The then function here is an opportunity to modify the response
console.log("userJson", JSON.parse(JSON.stringify(response)))
// The return value gets picked up by the then in the controller.
//
// I do not know where he draws the term data
// can be an expression of Angular
//
return JSON.parse(JSON.stringify(response));
});
// Return the promise to the controller
return promise;
}
}
})();
//app.service('userPostSvc', function($resource) {
//
//
//});
{
"acteurs": [
{
"id": "1",
"nom": "Robert",
"prenom": "Downey Jr.",
"hero": "Iron Man",
"photo": "http://fr.web.img6.acsta.net/r_120_160/b_1_d6d6d6/pictures/210/017/21001798_20130426172912097.jpg"
},
{
"id": "2",
"nom": "Evans",
"prenom": "Chris",
"hero": "Captain America",
"photo": "http://fr.web.img1.acsta.net/r_120_160/b_1_d6d6d6/medias/nmedia/18/35/47/92/20091403.jpg"
},
{
"id": "3",
"nom": "Ruffalo",
"prenom": "Mark",
"hero": "The Hulk",
"photo": "http://fr.web.img5.acsta.net/r_120_160/b_1_d6d6d6/medias/nmedia/18/35/35/82/20091405.jpg"
},
{
"id": "4",
"nom": "Hemsworth",
"prenom": "Chris",
"hero": "Thor",
"photo": "http://fr.web.img4.acsta.net/r_120_160/b_1_d6d6d6/medias/nmedia/18/62/86/25/20092235.jpg"
},
{
"id": "5",
"nom": "Johansson",
"prenom": "Scarlett",
"hero": "Black Widow",
"photo": "http://fr.web.img1.acsta.net/r_120_160/b_1_d6d6d6/pictures/210/380/21038084_20130909122416886.jpg"
}
]
}
pre {
background-color: ghostwhite;
border: 1px solid silver;
padding: 10px 20px;
margin: 20px;
}
.json-key {
color: brown;
}
.json-value {
color: navy;
}
.json-string {
color: olive;
}
app.factory('jsonService', function($resource) {
return {
//var users = $resource('http://jsonplaceholder.typicode.com/posts', {id: '@id'}, {
getjson: function() {
// $http returns a promise, which has a then function, which also returns a promise
var $resource = $http.get('https://jsonplaceholder.typicode.com/posts')
.then(function(response) {
// The then function here is an opportunity to modify the response
console.log("big" + response);
console.log("json", JSON.parse(JSON.stringify(response)))
// The return value gets picked up by the then in the controller.
//
// I do not know where he draws the term data
// can be an expression of Angular
//
return JSON.parse(JSON.stringify(response));
});
// Return the promise to the controller
return promise;
},
getitem: function(value) {
// $http returns a promise, which has a then function, which also returns a promise
var $resource = $http.get('https://jsonplaceholder.typicode.com/posts?userid='+value)
.then(function(response) {
// The then function here is an opportunity to modify the response
console.log("userJson", JSON.parse(JSON.stringify(response)))
// The return value gets picked up by the then in the controller.
//
// I do not know where he draws the term data
// can be an expression of Angular
//
return JSON.parse(JSON.stringify(response));
});
// Return the promise to the controller
return promise;
}
}
});