<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js">
</script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="destiArtiController.js"></script>
</head>
<body ng-app="myApp">
<h1>ui-router passing parameters</h1>
<div>
<ul>
<li><a ui-sref=".home">home</a></li>
<li><a ui-sref=".desti">destination</a></li>
</ul>
<div ui-view></div>
</div>
</body>
</html>
var app = angular.module('myApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider
.otherwise('/');
$stateProvider
.state('home', {
url: '/home',
template: '<div> home </div>'
})
.state('desti', {
url: '/desti',
templateUrl: 'desti.html',
controller: "destiArtiController"
})
.state('desti.destiArti', {
url: '/destiArti/:id',
templateUrl: 'destiArti.html',
controller: "destiArtiController"
})
;
});
app.controller('destiController', ['$scope', function($scope){
$scope.destis = [
{
"url": "#",
"name": "South Cebu"
},
{
"url": "#",
"name": "Bataan"
},
{
"url": "#",
"name": "Calaguas"
},
{
"url": "#",
"name": "Ilocos"
},
{
"url": "#",
"name": "Baguio"
},
{
"url": "#",
"name": "La Union"
}
];
}]);
<div>
<h3>Destinations: </h3>
<div ng-repeat="detail in details">
<p>
<a ui-sref="desti.destiArti({ id: detail.id })">{{ detail.destiName }}</a>
</p>
</div>
</div>
<div ng-repeat="detail in details">
<p>{{ detail.destiName }}</p>
<ul>
<li ng-repeat="topdesti in detail.topDesti">{{ topdesti.name }}</li>
</ul>
</div>
app.controller('destiArtiController', ['$scope', '$stateParams', function($scope, $stateParams) {
$scope.id = $stateParams.id;
$scope.details = [{
"id": 1,
"destiName": "South Cebu",
"sourceUrl": "https://en.wikipedia.org/wiki/Cebu",
"topDesti": [{
"name": "Sirao Flower Farm",
"desc": "Sirao Flower Farm a.k.a. “Little Amsterdam”"
},
{
"name": "Moalboal",
"desc": "Moalboal, Cebu is known as home of sardine run"
},
{
"name": "Basilica Minore del Santo Niño",
"desc": "The Minor Basilica of the Holy Child and commonly known as the Santo Niño Basilica"
},
{
"name": "Kawasan Falls",
"desc": "pearl of the PH."
},
{
"name": "Fuerte de San Pedro",
"desc": "Fuerte de San Pedro is a military defence structure"
},
{
"name": "Magellan’s Cross",
"desc": "It is an important symbol of Cebu"
}
]
}, {
"id": 2,
"destiName": "Bataan",
"sourceUrl": "https://en.wikipedia.org/wiki/Bataan",
"topDesti": [{
"name": "Mount Samat",
"desc": "Located near its summit"
},
{
"name": "World War II Museum",
"desc": "Museum"
}
]
}];
}]);