How would one watch/trigger an event on a route change?
This question is related to
javascript
angularjs
This is for the total beginner... like me:
HTML:
<ul>
<li>
<a href="#"> Home </a>
</li>
<li>
<a href="#Info"> Info </a>
</li>
</ul>
<div ng-app="myApp" ng-controller="MainCtrl">
<div ng-view>
</div>
</div>
Angular:
//Create App
var app = angular.module("myApp", ["ngRoute"]);
//Configure routes
app.config(function ($routeProvider) {
$routeProvider
.otherwise({ template: "<p>Coming soon</p>" })
.when("/", {
template: "<p>Home information</p>"
})
.when("/Info", {
template: "<p>Basic information</p>"
//templateUrl: "/content/views/Info.html"
});
});
//Controller
app.controller('MainCtrl', function ($scope, $rootScope, $location) {
$scope.location = $location.path();
$rootScope.$on('$routeChangeStart', function () {
console.log("routeChangeStart");
//Place code here:....
});
});
Hope this helps a total beginner like me. Here is the full working sample:
<html>_x000D_
<head>_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script>_x000D_
</head>_x000D_
<body>_x000D_
<ul>_x000D_
<li>_x000D_
<a href="#"> Home </a>_x000D_
</li>_x000D_
<li>_x000D_
<a href="#Info"> Info </a>_x000D_
</li>_x000D_
</ul>_x000D_
_x000D_
<div ng-app="myApp" ng-controller="MainCtrl">_x000D_
<div ng-view>_x000D_
_x000D_
</div>_x000D_
</div>_x000D_
<script>_x000D_
//Create App_x000D_
var app = angular.module("myApp", ["ngRoute"]);_x000D_
_x000D_
//Configure routes_x000D_
app.config(function ($routeProvider) {_x000D_
$routeProvider_x000D_
.otherwise({ template: "<p>Coming soon</p>" })_x000D_
.when("/", {_x000D_
template: "<p>Home information</p>"_x000D_
})_x000D_
.when("/Info", {_x000D_
template: "<p>Basic information</p>"_x000D_
//templateUrl: "/content/views/Info.html"_x000D_
});_x000D_
});_x000D_
_x000D_
//Controller_x000D_
app.controller('MainCtrl', function ($scope, $rootScope, $location) {_x000D_
$scope.location = $location.path();_x000D_
$rootScope.$on('$routeChangeStart', function () {_x000D_
console.log("routeChangeStart");_x000D_
//Place code here:...._x000D_
});_x000D_
});_x000D_
</script>_x000D_
</body>_x000D_
</html>If you don't want to place the watch inside a specific controller, you can add the watch for the whole aplication in Angular app run()
var myApp = angular.module('myApp', []);
myApp.run(function($rootScope) {
$rootScope.$on("$locationChangeStart", function(event, next, current) {
// handle route changes
});
});
$rootScope.$on( "$routeChangeStart", function(event, next, current) {
//if you want to interrupt going to another location.
event.preventDefault(); });
$rootScope.$on( "$routeChangeStart", function(event, next, current) {
//..do something
//event.stopPropagation(); //if you don't want event to bubble up
});
Source: Stackoverflow.com