AngularJs Controller 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="#/users">users</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/usersController.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/usersController.js

app.controller('usersController', function($scope) {
 $scope.usersmessage = 'usersController  usersmessage';
 $scope.userlist = [ {
  "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/aboutus.html

<h3>users Us Page</h3>
{{usersmessage}}
<br>

<table border="2">

<tr><td>pic</td>
<td>userid</td>
<td>fname</td>
<td>lname</td>
<td>mobile</td>
<td>email</td>
<td></td></tr>


<tr ng-repeat="user in userlist">
<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></td></tr>
 
</table>

views/home.html

<h3>Home Page</h3>
{{message}}

output

AngularJs Controller And Json Data

Related Post

1 comments:

ads2