AngularJS Framework : Routes IV - navigation between views using links
Picture from How to structure large angularJS applications
The following sections are largely based on Introduction to Angular.js in 50 Examples (part 2).
We'll start from where we left off (Routes III - extracting and using parameters from routes). In this section, we'll be able to navigate between views using links. Two of the template files are here (country-list.html and country-detail.html).
We need to change country-list.html file, and it should look like this:
<ul>
<li ng-repeat="country in countries">
<a href="#/{{country.name}}">{{country.name}}</a>
</li>
<ul>
Note that we put {{country.name}} after '#/'.
Here is our main code (navigation_links.html) which has not been changed:
<html ng-app="countryApp">
<head>
<meta charset="utf-8">
<title>Angular.js Example</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script>
var countryApp = angular.module('countryApp', ['ngRoute']);
countryApp.config(function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'country-list.html',
controller: 'CountryListController'
}).
when('/:countryName', {
templateUrl: 'country-detail.html',
controller: 'CountryDetailController'
}).
otherwise({
redirectTo: '/'
});
});
countryApp.controller('CountryListController', function ($scope, $http){
$http.get('http://www.bogotobogo.com/AngularJS/files/Route2/countries.json').success(function(data) {
$scope.countries = data;
});
});
countryApp.controller('CountryDetailController', function ($scope, $routeParams){
$scope.name = $routeParams.countryName;
});
</script>
</head>
<body>
<div ng-view></div>
</body>
</html>
The root url just lists country names as before but this time each item has link to appropriate country page:
Continued at Routes V - details page.
AngularJS
Ph.D. / Golden Gate Ave, San Francisco / Seoul National Univ / Carnegie Mellon / UC Berkeley / DevOps / Deep Learning / Visualization
My YouTube channel