<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
<script data-require="angular.js@1.4.7" data-semver="1.4.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="demoApp">
<div ng-controller="MainCtrl as main">
<div class="nav">
<a href="#/meat">Meat</a>
<a href="#/potatoes">Potatoes</a>
<a href="#/bacon">Bacon</a>
</div>
<h3>Demo on triggering a function based on change in ngRoute.</h3>
<div ng-view></div>
</div>
<script src="script.js"></script>
</body>
</html>
(function (angular) {
function changedMyPartialRoute(val){
//console.log('url has changed: ' + val);
alert('url has changed to: ' + val);
}
angular.module('demoApp', ['ngRoute', 'ngAnimate'])
.config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
$routeProvider
.when('/meat', {
templateUrl: 'meat.html',
controller: 'MeatCtrl',
controllerAs: 'meat'
})
.when('/potatoes', {
templateUrl: 'potatoes.html',
controller: 'PotatoCtrl',
controllerAs: 'potato'
})
.when('/bacon', {
templateUrl: 'bacon.html',
controller: 'BaconCtrl',
controllerAs: 'bacon'
})
.otherwise({
redirectTo: '/meat'
});
}])
.run( function($rootScope, $location) {
$rootScope.$watch(function() {
return $location.path();
},
function(val){
changedMyPartialRoute(val);
});
})
.controller('MainCtrl', ['$routeParams', '$location',
function($route, $routeParams, $location) {
var vm = this;
vm.$route = $route;
vm.$location = $location;
vm.$routeParams = $routeParams;
}])
.controller('MeatCtrl', function () {
var vm = this;
})
.controller('PotatoCtrl', function () {
var vm = this;
vm.who = "Mark Watney";
})
.controller('BaconCtrl', function () {
var vm = this;
});
})(window.angular);
The world is better with bacon.
Do you know who likes potatoes ? {{potato.who}} does!
This is meant to be a meat and potatoes demonstration of:
<ul>
<li> a simple Angular app using ngRouter </li>
<li>demonstrate the changing of routes</li>
<li> demonstrate the triggering of a funcion based on routed state change </li>
</ul>