var app = angular.module('plunker', ['ui.router']);
app.controller('MainCtrl', function($scope) {
$scope.name = 'Parent Scope';
})
.controller('HomeController', function ($scope, $location) {
$scope.name = 'Base';
console.log("hash", $location.hash());
})
.controller('AboutController', function ($scope, $location) {
$scope.name = 'Time';
console.log("hash",$location.hash());
});
app.config(function ($stateProvider, $urlRouterProvider, $uiViewScrollProvider) {
// In order to use $anchorScroll
// You need to call .useAnchorScroll()! :)
$uiViewScrollProvider.useAnchorScroll();
$urlRouterProvider.otherwise('/');
$stateProvider.
state('home', {
url: "/",
templateUrl: 'embedded.home.html',
controller: 'HomeController'
}).
state('about', {
url: "/about",
templateUrl: 'embedded.about.html',
controller: 'AboutController'
});
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Simple Router Example</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/1.4.0/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script src="app.js"></script>
<script type="text/ng-template" id="embedded.home.html">
<h1> Home {{name}}</h1>
</script>
<script type="text/ng-template" id="embedded.about.html">
<h1> About {{name}}</h1>
</script>
</head>
<body ng-controller="MainCtrl">
<div>
<div id="navigation">
<a href="#/#two">Home</a>
<a href="#/about#three">About</a>
<a href="#three">Three</a>
</div>
<div ui-view></div>
<p class="bigheight"></p>
<a name="one">ONE</a>
<p class="bigheight"></p>
<a name="two">TWO</a>
<p class="bigheight"></p>
<a name="three">THREE</a>
<p class="bigheight"></p>
<a name="four">FOUR</a>
</div>
</body>
</html>
/* Put your css in here */
.bigheight { height: 800px; }
# ui-router with $anchorScroll deep linking
Wanted a clear example of how to do deep linking with scroll to anchor using ui-router. Hope this makes sense :)