AngularJs Service And Json Data

March 24, 2016

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

AngularJs Service And Json Data

Related Post

0 comments:

Post a Comment

ads2