'use strict';
angular.module('plunker', [
'ngRoute'
]).config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.when('/location/:a?/:b?/:c?/:d?', {
templateUrl: 'location.html',
controller: 'LocationCtrl'
});
$routeProvider.otherwise({
redirectTo: '/location'
});
}]).controller('LocationCtrl', ['$location', '$routeParams', '$scope', function ($location, $routeParams, $scope) {
$scope.entries = $location.path().substring(1).split('/').map(decodeURIComponent);
$scope.aParam = $routeParams.a;
$scope.text = $routeParams.a;
}]).controller('MainCtrl', ['$scope', function($scope) {
$scope.name = 'World';
}]).filter('uricomponent', [function () {
return function (input) {
return encodeURIComponent(input);
};
}]);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="https://cdn.rawgit.com/angular/bower-angular/v1.7.3/angular.js"></script>
<script src="https://cdn.rawgit.com/angular/bower-angular-route/v1.7.3/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<ng-view/>
</body>
</html>
/* Put your css in here */
<div>
<p>Note: this plunker only works when previewing in a separate window or when using embedded view.</p>
<p>$location entries:</p>
<ol>
<li ng-repeat="entry in entries track by $index" style="font-family: monospace; {{$index == 1 && 'font-weight: bold;'}}">
{{entry}}
</li>
</ol>
<p>aParam: <span style="font-family: monospace;">{{aParam}}</span></p>
<div><label>Enter text to link to: <input ng-model="text"/></label> <a href="#!/location/{{text|uricomponent}}/b">Go!</a></a></div>
<p>Note that entering any text with a forward slash in it breaks!</p>
</div>