Getting the data from the json file and display data using ng-repeat in list format in angularjs(second way):
chk the previous post the same example , you can find the difference in module.js file.
<!DOCTYPE html>
<!-- Referenced as an example from by rabidGadfly.com -->
<!-- Define this as an AngularJS app that uses the module named myApp -->
<html ng-app="myApp">
<head>
<!-- Don't forget to load angularjs AND angular-resource.js -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular-resource.js"></script>
<!-- Our modules and controller -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script src="app.js"></script>
<script src="module.js"></script>
<!-- Give it some style -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div ng-controller="StatesController" >
<span class="searchtext">Search:</span>
<span class="inputbg"><input ng-model="criteria" placeholder="Search for..."></span>
<ul class="states">
<li ng-repeat="state in stateData | filter:criteria | orderBy:'name'">
<div class="resultwrapper">
<span class="title">{{state.name}}</span><br>
<span class="bold">Abbreviation:</span> {{state.abbreviation}}<br>
<span class="bold">Capital:</span> {{state.capital}}
</div>
</li>
</ul>
</div>
<script>
angular.module('servicemodule',[])
.service('Statess', function($http){
this.getStates = function(c) {
return $http.get('states.json');
};
})
.controller('StatesController',['$scope','Statess', '$routeParams','$location', function ($scope,Statess, '$routeParams','$location'){
Statess.getStates().success(function (data){
$scope.stateData = data;
});
}]);
</script>
</body>
</html>
module.js:
angular.module('servicemodule',[])
.service('Statess', function($http){
this.getStates = function(c) {
return $http.get('states.json');
};
})
.controller('StatesController',['$scope','Statess',function ($scope,Statess){
Statess.getStates().success(function (data){
$scope.stateData = data;
});
}]);
app.js:
( if we have multiple modules, we include all of those here, and we call simply the main module, here main module name is myApp, servicemodule is the module of our project this is called data injection, if wehave other module in our project by seperating comma we can include it here.)
angular.module('myApp',['servicemodule']);
states.json:
[
{"name":"Massachusetts", "capital":"Boston","abbreviation":"MA"},
{"name":"Alabama", "capital":"Montgomery","abbreviation":"AL"},
{"name":"Alaska", "capital":"Juneau","abbreviation":"AK"},
{"name":"Arizona", "capital":"Phoenix","abbreviation":"AZ"},
{"name":"Arkansas", "capital":"Little Rock","abbreviation":"AR"},
{"name":"California", "capital":"Sacramento","abbreviation":"CA"},
{"name":"Colorado", "capital":"Denver","abbreviation":"CO"},
{"name":"Pennsylvania", "capital":"Harrisburg","abbreviation":"PA"},
{"name":"Connecticut", "capital":"Hartford","abbreviation":"CT"},
{"name":"Delaware", "capital":"Dover","abbreviation":"DE"}
]
chk the previous post the same example , you can find the difference in module.js file.
<!DOCTYPE html>
<!-- Referenced as an example from by rabidGadfly.com -->
<!-- Define this as an AngularJS app that uses the module named myApp -->
<html ng-app="myApp">
<head>
<!-- Don't forget to load angularjs AND angular-resource.js -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular-resource.js"></script>
<!-- Our modules and controller -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script src="app.js"></script>
<script src="module.js"></script>
<!-- Give it some style -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div ng-controller="StatesController" >
<span class="searchtext">Search:</span>
<span class="inputbg"><input ng-model="criteria" placeholder="Search for..."></span>
<ul class="states">
<li ng-repeat="state in stateData | filter:criteria | orderBy:'name'">
<div class="resultwrapper">
<span class="title">{{state.name}}</span><br>
<span class="bold">Abbreviation:</span> {{state.abbreviation}}<br>
<span class="bold">Capital:</span> {{state.capital}}
</div>
</li>
</ul>
</div>
<script>
angular.module('servicemodule',[])
.service('Statess', function($http){
this.getStates = function(c) {
return $http.get('states.json');
};
})
.controller('StatesController',['$scope','Statess', '$routeParams','$location', function ($scope,Statess, '$routeParams','$location'){
Statess.getStates().success(function (data){
$scope.stateData = data;
});
}]);
</script>
</body>
</html>
module.js:
angular.module('servicemodule',[])
.service('Statess', function($http){
this.getStates = function(c) {
return $http.get('states.json');
};
})
.controller('StatesController',['$scope','Statess',function ($scope,Statess){
Statess.getStates().success(function (data){
$scope.stateData = data;
});
}]);
app.js:
( if we have multiple modules, we include all of those here, and we call simply the main module, here main module name is myApp, servicemodule is the module of our project this is called data injection, if wehave other module in our project by seperating comma we can include it here.)
angular.module('myApp',['servicemodule']);
states.json:
[
{"name":"Massachusetts", "capital":"Boston","abbreviation":"MA"},
{"name":"Alabama", "capital":"Montgomery","abbreviation":"AL"},
{"name":"Alaska", "capital":"Juneau","abbreviation":"AK"},
{"name":"Arizona", "capital":"Phoenix","abbreviation":"AZ"},
{"name":"Arkansas", "capital":"Little Rock","abbreviation":"AR"},
{"name":"California", "capital":"Sacramento","abbreviation":"CA"},
{"name":"Colorado", "capital":"Denver","abbreviation":"CO"},
{"name":"Pennsylvania", "capital":"Harrisburg","abbreviation":"PA"},
{"name":"Connecticut", "capital":"Hartford","abbreviation":"CT"},
{"name":"Delaware", "capital":"Dover","abbreviation":"DE"}
]
No comments:
Post a Comment