Loading...
Thursday, March 24, 2016

AngularJs Service And Json Data




index.html
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Angular Js</title>
</head>
<body ng-controller="homeController">
<a href="#/">Home</a> |
<a href="#/userslist">userslist</a>

<div ng-view></div>

<script type="text/javascript" src="scripts/js/angular.min.js"></script>
<script type="text/javascript" src="scripts/js/angular-route.min.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
<script type="text/javascript"
src="scripts/controller/homeController.js"></script>
<script type="text/javascript"
src="scripts/controller/userslistController.js"></script>
<script type="text/javascript" src="scripts/services/usersService.js"></script>

</body>
</html>
scripts/app.js
var app = angular.module('myapp', [ 'ngRoute' ]);

app.config(function($routeProvider) {
$routeProvider.when('/', {
controller : 'homeController',
templateUrl : 'views/home.html'
});

$routeProvider.when('/users', {
controller : 'usersController',
templateUrl : 'views/user.html'
});

$routeProvider.otherwise({
redirectTo : '/'
});
});









scripts/controller/homeController.js
app.controller('homeController', function($scope){
$scope.message = 'home Controller message';
});
scripts/controller/userslistController.js
app.controller('userslistController', function($scope, $routeParams, usersService){
$scope.userlistmessage = 'userslistController userlistsmessage';
$scope.allUserslist = usersService.allUsers();


});


scripts/services/usersService.js

app.service('usersService', function() {

this.allUsers = function() {

return[ {
"pic" : "shekar.jpg",
"email" : "shekar@gmail.com",
"firstname" : "shekar",
"lastname" : "g",
"mobile" : 8888888888,
"userid" : 1
}, {
"pic" : "robot.jpg",
"email" : "ravi900kumar@gmail.com",
"firstname" : "ravi",
"lastname" : "kumar",
"mobile" : 9999999999,
"userid" : 2
} ];
};


});

views/userlist.html
<h3>users Us Page</h3>
{{userlistmessage}}
<br>


<table border="2">

<tr>
<td>pic</td>
<td>userid</td>
<td>First Name</td>
<td>Last Name</td>
<td>Mobile</td>
<td>Email</td>
<td>Options</td>
</tr>


<tr ng-repeat="user in allUserslist">
<td><img alt="" src="images/{{ user.pic }}" height="300px"
width="300px"></td>
<td>{{ user.userid }}</td>
<td>{{ user.firstname }}</td>
<td>{{ user.lastname }}</td>
<td>{{ user.mobile }}</td>
<td>{{ user.email }}</td>

<td><a href="#/user-details/{{ user.userid }}">Details</a></td>
</tr>

</table>






views/home.html
<h3>Home Page</h3>
{{message}}
output

0 comments:

Post a Comment

 
TOP