kalbarczyk/routing.html

## routing.html
<!DOCTYPE html>
<html data-ng-app="app">
<head>
    <title>AngularJS - routing</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
</head>
<body data-ng-controller="defaultCtrl">
    <div class="container">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li data-ng-class="getClass('/home')"><a href="#/home">Strona główna</a></li>
                        <li data-ng-class="getClass('/mountain')"><a href="#/mountain">Góry</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div data-ng-view=""></div>
    </div>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="https://code.angularjs.org/1.3.2/angular.js"></script>
    <script src="https://code.angularjs.org/1.3.2/angular-route.js"></script>
    <script>

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

        app.config(function ($routeProvider) {
            $routeProvider
            .when("/home", { templateUrl: "home.html" })
            .when("/mountain", { templateUrl: "mountain.html", controller: "listCtrl" })
            .when("/mountain/:id", { templateUrl: "details.html", controller: "detailsCtrl" })
            .otherwise({ redirectTo: "/home" });
        });

        app.controller("defaultCtrl", function ($scope, $location, mountainsList) {
            $scope.getClass = function (path) {
                if ($location.path().substr(0, path.length) == path) {
                    return "active"
                } else {
                    return ""
                }
            }
        });

        app.controller("listCtrl", function ($scope, mountainsList) {
            $scope.mountains = mountainsList.getAll();
        });

        app.controller("detailsCtrl", function ($scope, $routeParams, mountainsList, $location) {
            $scope.mountain = mountainsList.getById($routeParams.id);
            $scope.delete = function (id) {
                mountainsList.deleteById(id);
                $location.path('/mountain')
            };

        });

        app.factory("mountainsList", function () {
            var mountains = [
            { id: "1", mountain: "Mount Everest", metres: 8850, country: 'Nepal-China' },
            { id: "2", mountain: "K2", metres: 8611, country: 'Pakistan-China' },
            { id: "3", mountain: "Kangczendzonga", metres: 8598, country: 'Nepal-India' },
            { id: "4", mountain: "Lhotse", metres: 8501, country: 'Nepal-China' },
            { id: "5", mountain: "Makalu", metres: 8463, country: 'Nepal-China' },
            { id: "6", mountain: "Cho Oyu", metres: 8201, country: 'Nepal-China' },
            { id: "7", mountain: 'Dhaulagiri', metres: 8167, country: 'Nepal' },
            { id: "8", mountain: 'Manaslu', metres: 8163, country: 'Nepal' },
            { id: "9", mountain: 'Nanga Parbat', metres: 8125, country: 'Pakistan' },
            { id: "10", mountain: 'Annapurna', metres: 8091, country: 'Nepal' },
            { id: "11", mountain: 'Shishapangma', metres: 8012, country: 'China' }
            ];

            return {
                getAll: function () {
                    return mountains;
                },
                getById: function (id) {
                    var result = null;
                    angular.forEach(mountains, function (m) {
                        if (m.id == id) result = m;
                    });
                    return result;
                },
                deleteById: function (id) {
                    angular.forEach(mountains, function (m, i) {
                        if (id == m.id) {
                            mountains.splice(i, 1);
                        }
                    });
                }
            };
        });


    </script>

<script type="text/ng-template" id="home.html">
   <h1>Jesteś na stronie głównej.</h1>
</script>
    <script type="text/ng-template" id="mountain.html">
<div class="panel panel-default">
  <div class="panel-body">
   <h3>Lista</h3>
   <p data-ng-repeat="mountain in mountains track by $index">
    {{$index+1}}. <a href="#/mountain/{{mountain.id}}">{{mountain.mountain}}
    <span class="glyphicon glyphicon-info-sign"></span> </a></p>
  </div>
</div>
    </script>
    <script type="text/ng-template" id="details.html">
    <div class="panel panel-default">
        <div class="panel-body">
            <h3>Szczegóły</h3>
            <div class="list-group">
                <a href="#" class="list-group-item active">{{mountain.mountain}}
                </a>
                <a href="#" class="list-group-item">Wysokość: <b>{{mountain.metres}}</b></a>
                <a href="#" class="list-group-item">Państwo: <b>{{mountain.country}}</b></a>
            </div>
            <a href="#/mountain" class="btn btn-default">Powrót do listy</a>
            <a href="" ng-click="delete(mountain.id)" class="btn btn-danger">Usuń {{mountain.mountain}}</a>
          </div>
    </div>
</script>
</body>
</html>
	<!DOCTYPE html>
	<html data-ng-app="app">
	<head>
	<title>AngularJS - routing</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
	</head>
	<body data-ng-controller="defaultCtrl">
	<div class="container">
	<nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid">
	<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	<ul class="nav navbar-nav">
	<li data-ng-class="getClass('/home')"><a href="#/home">Strona główna</a></li>
	<li data-ng-class="getClass('/mountain')"><a href="#/mountain">Góry</a></li>
	</ul>
	</div>
	</div>
	</nav>
	<div data-ng-view=""></div>
	</div>
	<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<script src="https://code.angularjs.org/1.3.2/angular.js"></script>
	<script src="https://code.angularjs.org/1.3.2/angular-route.js"></script>
	<script>

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

	app.config(function ($routeProvider) {
	$routeProvider
	.when("/home", { templateUrl: "home.html" })
	.when("/mountain", { templateUrl: "mountain.html", controller: "listCtrl" })
	.when("/mountain/:id", { templateUrl: "details.html", controller: "detailsCtrl" })
	.otherwise({ redirectTo: "/home" });
	});

	app.controller("defaultCtrl", function ($scope, $location, mountainsList) {
	$scope.getClass = function (path) {
	if ($location.path().substr(0, path.length) == path) {
	return "active"
	} else {
	return ""
	}
	}
	});

	app.controller("listCtrl", function ($scope, mountainsList) {
	$scope.mountains = mountainsList.getAll();
	});

	app.controller("detailsCtrl", function ($scope, $routeParams, mountainsList, $location) {
	$scope.mountain = mountainsList.getById($routeParams.id);
	$scope.delete = function (id) {
	mountainsList.deleteById(id);
	$location.path('/mountain')
	};

	});

	app.factory("mountainsList", function () {
	var mountains = [
	{ id: "1", mountain: "Mount Everest", metres: 8850, country: 'Nepal-China' },
	{ id: "2", mountain: "K2", metres: 8611, country: 'Pakistan-China' },
	{ id: "3", mountain: "Kangczendzonga", metres: 8598, country: 'Nepal-India' },
	{ id: "4", mountain: "Lhotse", metres: 8501, country: 'Nepal-China' },
	{ id: "5", mountain: "Makalu", metres: 8463, country: 'Nepal-China' },
	{ id: "6", mountain: "Cho Oyu", metres: 8201, country: 'Nepal-China' },
	{ id: "7", mountain: 'Dhaulagiri', metres: 8167, country: 'Nepal' },
	{ id: "8", mountain: 'Manaslu', metres: 8163, country: 'Nepal' },
	{ id: "9", mountain: 'Nanga Parbat', metres: 8125, country: 'Pakistan' },
	{ id: "10", mountain: 'Annapurna', metres: 8091, country: 'Nepal' },
	{ id: "11", mountain: 'Shishapangma', metres: 8012, country: 'China' }
	];

	return {
	getAll: function () {
	return mountains;
	},
	getById: function (id) {
	var result = null;
	angular.forEach(mountains, function (m) {
	if (m.id == id) result = m;
	});
	return result;
	},
	deleteById: function (id) {
	angular.forEach(mountains, function (m, i) {
	if (id == m.id) {
	mountains.splice(i, 1);
	}
	});
	}
	};
	});


	</script>

	<script type="text/ng-template" id="home.html">
	<h1>Jesteś na stronie głównej.</h1>
	</script>
	<script type="text/ng-template" id="mountain.html">
	<div class="panel panel-default">
	<div class="panel-body">
	<h3>Lista</h3>
	<p data-ng-repeat="mountain in mountains track by $index">
	{{$index+1}}. <a href="#/mountain/{{mountain.id}}">{{mountain.mountain}}
	<span class="glyphicon glyphicon-info-sign"></span> </a></p>
	</div>
	</div>
	</script>
	<script type="text/ng-template" id="details.html">
	<div class="panel panel-default">
	<div class="panel-body">
	<h3>Szczegóły</h3>
	<div class="list-group">
	<a href="#" class="list-group-item active">{{mountain.mountain}}
	</a>
	<a href="#" class="list-group-item">Wysokość: <b>{{mountain.metres}}</b></a>
	<a href="#" class="list-group-item">Państwo: <b>{{mountain.country}}</b></a>
	</div>
	<a href="#/mountain" class="btn btn-default">Powrót do listy</a>
	<a href="" ng-click="delete(mountain.id)" class="btn btn-danger">Usuń {{mountain.mountain}}</a>
	</div>
	</div>
	</script>
	</body>
	</html>