/angularjs/

AngularJS – Route Example

2014-05-11 13:56:05

nspired by: https://github.com/curran/screencasts/tree/gh-pages/introToAngular My code: https://github.com/szalek/AngularJS-Route-Example

var countryApp = angular.module('countryApp', ['ngRoute']);

countryApp.config(function ($routeProvider) {
    $routeProvider.
        when('/', {
            templateUrl: 'countryList.tpl.html',
            controller: 'CountryListCtrl'
        }).
        when('/country/:countryName', {
            templateUrl: 'countryDetail.tpl.html',
            controller: 'CountryDetailCtrl'
        }).
        when('/about', {
            templateUrl: 'about.tpl.html'
        }).
        when('/contact', {
            templateUrl: 'contact.tpl.html'
        }).
        otherwise({
            redirectTo: '/'
        });
});

countryApp.controller('CountryListCtrl', function ($scope, $http) {
    $http.get('countries.json').success(function (data) {
        $scope.countries = data;
    });
});

countryApp.controller('CountryDetailCtrl', function ($scope, $routeParams) {
    $scope.countryName = $routeParams.countryName;
});

index.html


<html ng-app='"countryApp"'>
<head>
<meta charset="utf-8"/>
<title>Angular.js Example</title>
<script src='"angular.min.js"'></script>
<script src='"angular-route.min.js"'></script>
<script src='"app.js"'></script>
</head>
<body>
<nav>
<a href='"#about"'>about</a>
<a href='"#contact"'>contact</a>
<a href='"#"'>countries</a>
</nav>
<section ng-view=""></section>
</body>
</html>

about.tpl.html


# About

contact.tpl.html


# Contact

countryDetail.tpl.html


# {{countryName}}

countryList.tpl.html

<ul><li countries&quot;="" in="" ng-repeat='"country'>
        {{country.name}}
        <a href='"#/country/{{country.name}}"'>details</a>
</li></ul>