<html ng-app="countryApp">
<head>
<meta charset="utf-8">
<title>Angular.js Example</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.min.js"></script>
<script>
var countryApp = angular.module('countryApp', ['ngRoute']);
countryApp.config(function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'country-list.html',
controller: 'CountryListCtrl'
}).
when('/:countryId', {
templateUrl: 'country-detail.html',
controller: 'CountryDetailCtrl'
}).
otherwise({
redirectTo: '/'
});
});
countryApp.factory('countries', function($http){
return {
list: function (callback){
$http({
method: 'GET',
url: 'countries.json',
cache: true
}).success(callback);
},
find: function(id, callback){
$http({
method: 'GET',
url: 'country_' + id + '.json',
cache: true
}).success(callback);
}
};
});
countryApp.directive('country', function(){
return {
scope: {
country: '='
},
restrict: 'A',
templateUrl: 'country.html',
controller: function($scope, countries){
countries.find($scope.country.id, function(country) {
$scope.flagURL = country.flagURL;
});
}
};
});
countryApp.controller('CountryListCtrl', function ($scope, countries){
countries.list(function(countries) {
$scope.countries = countries;
});
});
countryApp.controller('CountryDetailCtrl', function ($scope, $routeParams, countries){
countries.find($routeParams.countryId, function(country) {
$scope.country = country;
});
});
</script>
</head>
<body>
<div ng-view></div>
</body>
</html>
country-list.html
<ul>
<li ng-repeat="country in countries" country="country">
</li>
</ul>
country.html
<img ng-src="{{flagURL}}" width="20">
<a href="#/{{country.id}}">{{country.name}}</a>
country-detail.html
<h1>{{country.name}}</h1>
<ul>
<li>Flag: <img ng-src="{{country.flagURL}}" width="100"></li>
<li>Population: {{country.population | number }}</li>
<li>Capital: {{country.capital}}</li>
<li>GDP: {{country.gdp | currency }}</li>
</ul>
countries.json
[
{
"name": "China",
"id": 1
},
{
"name": "India",
"id": 2
},
{
"name": "United States of America",
"id": 3
}
]
country_1.json
{
"name": "China",
"population": 1359821000,
"flagURL": "//upload.wikimedia.org/wikipedia/commons/f/fa/Flag_of_the_People%27s_Republic_of_China.svg",
"capital": "Beijing",
"gdp": 12261
}
country_2.json
{
"name": "India",
"population": 1205625000,
"flagURL": "//upload.wikimedia.org/wikipedia/en/4/41/Flag_of_India.svg",
"capital": "New Delhi",
"gdp": 4716
}
country_3.json
{
"name": "United States of America",
"population": 312247000,
"flagURL": "//upload.wikimedia.org/wikipedia/en/a/a4/Flag_of_the_United_States.svg",
"capital": "Washington, D.C.",
"gdp": 16244
}
1 comment:
Eliteonrent provide online rental services like air conditioner and oil heater for more information contact us
https://eliteonrent.com/
Post a Comment