ngRoute is core part for angularjs library. Application can route through ngRoute and it's configure in Module configuration file.
Below is the best and simple implementation for ngRoute.
Index.html
<!doctype html>
<html ng-app="configModule">
<head>
<title>My Angular App</title>
<script src="https://code.angularjs.org/1.2.24/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.24/angular-route.min.js"></script>
<script src="JS\app.js"></script>
<script src="JS\controller.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
app.js
var configModule = angular.module('configModule',[
'ngRoute',
'phoneDetailModule'
]);
configModule.config(['$routeProvider',function($routeProvider){
$routeProvider.
when('/phones',{
templateUrl: 'Partials/PhoneDetail.html',
controller: 'PhoneDetailController'
}).
when('/phones/:phoneId',{
templateUrl: 'Partials/PhoneList.html',
controller: 'PhoneListController'
}).
otherwise({
redirectTo: '/phones'
});
}])
controller.js
var phoneDetailModule = angular.module('phoneDetailModule',[]);
phoneDetailModule.controller('PhoneDetailController',['$scope','$http',function($scope,$http){
$http.get('JS/phones.json').success(function(data){
$scope.phones = data;
});
$scope.orderPro = 'age';
}]);
phoneDetailModule.controller('PhoneListController',['$scope','$routeParams',function($scope,$routeParams){
$scope.phoneId = $routeParams.phoneId;
}]);
PhoneDetail.html
<div>
Search : <input ng-model="query">
</div>
<div>
<select ng-model="orderPro">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
</div>
<ul>
<li ng-repeat="phone in phones | filter:query | orderBy:orderPro">
{{phone.name}}
<p>
{{phone.snippet}}
</p>
<img ng-src="{{phone.imageUrl}}" style="max-width: 50px" >
</li>
</ul>
PhoneList.html
Detail view for <span>{{phoneId}}</span>
great post. Loved it. cloud computing training in chennai
ReplyDelete